npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

create-cia

v1.0.0

Published

npm create cia — guided installer for css-is-awesome (cia). Detects your framework and package manager, installs cia, wires the two-import SCSS model, picks a theme, and optionally connects the MCP server for AI agents. Existing projects only — no scaffol

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

jerry2d3djerry2d3d

Keywords

create-ciacss-is-awesomedesign-systemscssinstallerwizard

Readme

create-cia

npm CI License: MIT

The guided installer for css-is-awesome ("cia") — a token-driven SCSS design system.

npm create cia@latest

Run it inside an existing project. It detects your framework and package manager, installs cia, writes the root SCSS entry with the two-import model already correct, wires your theme into the root layout, and (optionally) connects the MCP server so AI agents read cia's real API instead of guessing. Three questions, then a summary with your next steps.

The installer has zero runtime dependencies — the prompts are ~100 lines of our own readline code, answered with Enter, y/n or a number. A zero-JS design system deserves a zero-dependency installer: nothing to audit, nothing to break, and it behaves the same in a terminal, a pipe, and a CI log. Scripted answers work too: pipe one line per question and set CREATE_CIA_INTERACTIVE=1.

Existing projects only. create-cia is not a scaffolder — it does not create a Next.js/Vite/Astro app for you. Make the project with your framework's own tool, then run create-cia in it. If there is no package.json yet it offers to npm init -y first, and that's as far as scaffolding goes.

What it asks

  1. Framework — skipped when detected (Detected: Next.js — use this?). Otherwise: React, Vue, Svelte, Angular, Vanilla.
  2. Theme — one of cia's 8 theme families (default boilerplate).
  3. MCP — wire css-is-awesome-mcp into .mcp.json for AI agents (default yes).

Detection reads package.json dependencies (Next.js, Vite + React/Vue/Svelte, Astro, Nuxt, SvelteKit, Remix/React Router, Angular) and the lockfile or packageManager field (npm, pnpm, yarn, bun).

What it writes

| Action | Detail | |---|---| | Install | css-is-awesome as a dependency; sass and css-is-awesome-mcp as dev dependencies (each only if missing — Angular skips sass, it bundles its own) | | Root stylesheet | app/styles/cia.scss (Next.js app router) or src/styles/cia.scss (Vite and most others) containing @use 'css-is-awesome'; plus a comment showing the per-component @use 'css-is-awesome/api' as cia; — the two-import model from cia's docs. Never overwritten if it already exists. | | Root layout | Next.js: import "css-is-awesome/themes/<theme>"; and import "./styles/cia.scss"; added to app/layout.tsx, plus data-theme="<theme>" on <html>. Vite: the same imports in src/main.*, data-theme in index.html. Idempotent — running twice changes nothing. | | .mcp.json | Adds the css-is-awesome server (npx -y css-is-awesome-mcp), merged into whatever servers you already have. |

For frameworks it can't wire with confidence (Astro, Nuxt, SvelteKit, Remix, Angular, plain HTML) it prints the exact import or <link> line to paste.

Flags

npx create-cia [dir] [options]

  --yes, -y          No prompts: apply defaults and print a summary
  --dry-run          Print every action without touching disk or installing
  --pm <name>        npm | pnpm | yarn | bun            (default: detected)
  --theme <name>     boilerplate | sketchbook | press | prism | cupertino |
                     glass | graphite | terminal (+ -light / -dark variants)
  --framework <id>   next | vite-react | vite-vue | vite-svelte | vite | astro |
                     nuxt | sveltekit | remix | angular | vanilla
  --no-mcp           Skip the MCP wiring
  --help, -h         Show help
  --version, -v      Print the version

--dry-run --yes is the safe way to see exactly what would happen in a project before letting it run. It never spawns a package manager.

Local development

npm install
npm test                                  # node --test, fully offline
node bin/create-cia.mjs ../some-app --dry-run --yes

The test suite covers framework/package-manager detection over fixture package.json files, the idempotent layout injection, .mcp.json merging, and the real CLI end-to-end under --dry-run --yes for a Next.js project, a Vite + React project and an empty directory. CI runs it on Ubuntu and Windows, Node 20 and 24.

Publishing

Releases are cut by GitHub Actions only, never from a terminal: semantic-release runs after green CI on main, derives the version from conventional commits, publishes to npm, and creates the GitHub Release. It needs one secret, NPM_TOKEN, which must be a Classic "Automation" npm token — not a "Publish" token and not a granular token scoped to selected packages, since those cannot create a package that does not exist yet and cannot bypass 2FA. Same setup as css-is-awesome-mcp.

Relationship to css-is-awesome

One-way dependency: this package installs css-is-awesome into your project; css-is-awesome itself ships zero JavaScript and knows nothing about this wizard. The design system, its themes, recipes and MCP surface live in the css-is-awesome repo. This repo only changes when the setup experience changes.

Docs: https://cssisawesome.com/docs/install/

License

MIT