JSN UI built-in skill

JSN UI CLI

init / add / list / info / mcp commands. Zero runtime dependencies.

.skills/jsn-ui-cli.md1320 charsclitooling
.skills/jsn-ui-cli.md
GitHub
# JSN UI — CLI

The `jsn-ui` CLI is a standalone npm package (`jsn-ui`) with **zero
runtime dependencies**. It works on Node 18.17+.

## Commands

### `npx jsn-ui init [name]`
Scaffold JSN UI into a new project.

Creates:
- `src/lib/utils.ts` (the `cn()` helper)
- `src/lib/theme-provider.tsx` (with `useTheme()`)
- `src/app/globals.css` (design tokens, light + dark)
- `README.md` (setup instructions)

### `npx jsn-ui add <name> [...]`
Copy one or more components from the registry into your project.
- Fetches source from the JSN UI GitHub repo
- Writes to the canonical path (e.g. `src/components/ui/button.tsx`)
- Auto-installs peer deps via `pnpm add` / `npm install` / `yarn add`
- Prints the import statement

### `npx jsn-ui list [filter]`
List all 76 registry entries, grouped by category.
- `npx jsn-ui list` — all
- `npx jsn-ui list motion` — only motion entries
- `npx jsn-ui list chat` — fuzzy filter

### `npx jsn-ui info <name>`
Show details for a single entry: description, dependencies, install
path, import statement, and a "next" hint.

### `npx jsn-ui mcp`
Start the `@jsn-ui/mcp` server over stdio. Use it in Claude Desktop,
Cursor, Continue, or any MCP-compatible client.

## Environment variables

| Variable          | Default                              | Purpose                                    |
| ----------------- | ------------------------------------ | ------------------------------------------ |
| `JSN_UI_REGISTRY` | `https://jsn-ui.vercel.app/registry.json` | Override the registry endpoint URL.    |
| `JSN_UI_REPO_RAW` | `https://raw.githubusercontent.com/javashn/jsn-ui/main` | Override the source-code fetch URL. |

## Output conventions

The CLI uses ANSI color when stdout is a TTY, and disables color when
piped (or when `NO_COLOR` is set).

## When the user asks to add a component

Always check `npx jsn-ui list` (or fetch `https://jsn-ui.vercel.app/registry.json`)
to confirm the exact slug before suggesting. Names use kebab-case.

How to use this skill

These files live in the .skills/ directory of the JSN UI repo. Open Design–compatible agents (Claude Code, Cursor, Cline, etc.) auto-detect them. You can also reference them directly:

# in your agent's config
- name: jsn-ui
  source: https://github.com/javashn/jsn-ui/tree/main/.skills