Install wizard

npm create cia@latest asks two questions, then wires cia into the project you are already in: the right SCSS entry for your framework, a theme, and (optionally) the MCP server so your AI agent reads cia’s real API instead of guessing. It never scaffolds a new app and never overwrites a file you already have.

Run it

From the root of an existing project (anything with a package.json). Use --dry-run first if you want to see the plan without touching disk.

# guided
npm create cia@latest

# no prompts — sensible defaults, prints a summary
npm create cia@latest -- --yes

# show the plan, change nothing
npm create cia@latest -- --dry-run

npx create-cia, pnpm create cia, yarn create cia and bun create cia all work; the wizard detects your package manager from the lockfile and uses the same one for the install.

What it asks

1. Framework — detected from your dependencies (Next.js, Vite with React, Vue or Svelte, Astro, Nuxt, SvelteKit, Remix / React Router, Angular). You confirm the detection; you only see the full list when nothing is detected.
2. Theme — one of the eight shipped families, default boilerplate. Swap it any time afterwards; it is one import line.
3. MCP server? — default yes. Adds css-is-awesome-mcp as a dev dependency and merges a css-is-awesome entry into .mcp.json without touching servers you already have. See the MCP reference.

There is no accessibility question. Every recipe in the book is graded against WCAG 2.2 AA and the theme validator fails a theme that does not pass contrast, so there is no “strict mode” to opt into.

What it writes

• Installs css-is-awesome, plus sass as a dev dependency when your project does not have it yet (the generated SCSS entry needs a compiler; Angular already ships one and is skipped).
• Creates the root stylesheet — app/styles/cia.scss in Next.js, src/styles/cia.scss elsewhere — containing the emitting half of the two-import model: @use 'css-is-awesome';. Your components keep using the zero-emit @use 'css-is-awesome/api' as cia;.
• Imports the theme and the root stylesheet from your root layout (app/layout.tsx, src/main.tsx or equivalent) and sets data-theme on <html>. The theme comes in through the package’s css-is-awesome/themes/<name> export rather than a <link> into node_modules, because the link form does not survive a production build under Next.js or Vite. For frameworks it cannot wire confidently it prints the exact lines to paste instead.
• Merges the MCP server into .mcp.json if you said yes.

Every write is idempotent: running the wizard twice changes nothing the second time, and an existing cia.scss or theme import is left exactly as it is.

A dry run, verbatim

This is the wizard’s own output against a Next.js project, with nothing changed on disk.

┌  create-cia  (dry run — nothing will be changed)
│
●  Detected: Next.js
│
◇  Plan
│  would run    npm install css-is-awesome   — the design system
│  would run    npm install -D sass css-is-awesome-mcp   — SCSS compiler + tooling (dev only)
│  would write  app/styles/cia.scss   — root stylesheet — the `@use 'css-is-awesome'` half of the two-import model
│  would edit   app/layout.tsx   — import the theme + root stylesheet, set data-theme="boilerplate" on <html>
│  would merge  .mcp.json   — connect AI agents (Claude Code, Cursor, …) to cia's real API via css-is-awesome-mcp
│
◇  Summary (dry run)
│  Framework        Next.js
│  Package manager  npm
│  Theme            boilerplate
│  Packages         css-is-awesome, sass, css-is-awesome-mcp
│  SCSS entry       app/styles/cia.scss
│  Layout           app/layout.tsx
│  MCP              .mcp.json → npx css-is-awesome-mcp
│
└  Dry run complete — nothing was changed.

Flags

Prefer to do it by hand?

Everything the wizard does is two imports and one attribute; the install page walks through it. The wizard exists so the first five minutes do not depend on reading that page carefully.