@create-ui/cli 0.5.4 → 0.5.6

package/dist/skills/createui/SKILL.md

@@ -1,17 +1,19 @@
 ---
 name: createui
-description: Manages Create UI components and projects — adding, searching, viewing, theming, composing, and contributing UI. Provides project context, component patterns, and Create UI semantic tokens. Use when working with the createui CLI (init/add/create/diff/view/search/migrate/mcp), a components.json file, the @createui registry, authoring components with Create UI tokens and themes, or contributing to the Create UI monorepo.
+description: Manages Create UI components and projects — adding, searching, viewing, theming, and composing UI. Provides project context, component patterns, and Create UI semantic tokens. Use when working with the createui CLI (init/add/create/diff/view/search/migrate/mcp), a components.json file, the @createui registry, or authoring UI with Create UI tokens and themes.
 user-invocable: false
-allowed-tools: Bash(npx @create-ui/cli *), Bash(pnpm createui *), Bash(pnpm dlx @create-ui/cli *)
+allowed-tools: Bash(npx @create-ui/cli *), Bash(pnpm dlx @create-ui/cli *)
 ---
 
 # Create UI
 
 Create UI is a design code system: **one unified styling system + many themes**. Components are added as source code into the user's project via the `createui` CLI, and styled with Create UI's own semantic tokens.
 
-Components are delivered as source code through a registry (registry + components-as-source). Create UI is its own system — its own CLI (`createui`), its own registry (`@createui`), and its own tokens and themes. There is no style/base split.
+Components are delivered as source code through a registry (registry + components-as-source). Create UI is its own system — its own CLI (`createui`), its own registry (`@createui`), and its own tokens and themes. There is no style/base split, and **`@createui` is the only registry** — never configure, suggest, or default to another one.
 
-> **IMPORTANT:** Run published CLI commands with `npx @create-ui/cli <command>` (or `pnpm dlx @create-ui/cli <command>`). Inside this monorepo, contributors use `pnpm createui <command>` against the local registry — see [contributing.md](./contributing.md).
+> **IMPORTANT:** Run CLI commands with `npx @create-ui/cli <command>` (or `pnpm dlx @create-ui/cli <command>`).
+
+This skill is for **using Create UI in your app**: install components with the CLI, then compose them with the patterns and rules below.
 
 ## Current Project Context
 
@@ -21,17 +23,12 @@ Run the `info` command to read the project's config and installed components:
 npx @create-ui/cli info
 ```
 
-`info` prints project info plus the contents of `components.json` (config, aliases, `tailwind.css` path, `iconLibrary`, registries). Run it before adding or editing components so imports, the icon library, and `"use client"` advice match the real project. (There is no `--json` flag.)
-
-## Two Audiences
-
-- **Using Create UI in your app** — install components with the CLI, then compose them with the patterns and rules below.
-- **Contributing to this monorepo** — authoring components, the registry build, dev/test scripts → see [contributing.md](./contributing.md).
+`info` prints project info plus the contents of `components.json` (config, aliases, `tailwind.css` path, `iconLibrary`). Run it before adding or editing components so imports, the icon library, and `"use client"` advice match the real project. (There is no `--json` flag.)
 
 ## Principles
 
-1. **Use existing components first.** Search the registry before writing custom UI: `npx @create-ui/cli search @createui -q "sidebar"`.
-2. **Compose, don't reinvent.** Settings page = Tabs + Card + Field controls. Dashboard = Sidebar + Card + Chart + Table.
+1. **Use existing components first.** Search the registry before writing custom UI: `npx @create-ui/cli search @createui -q "toast"`.
+2. **Compose, don't reinvent.** Settings page = `TabMenu` + `FieldGroup` + `Field` controls. Checkout = `Field` + `PhoneInput` + `CreditCardInput` + `Button`.
 3. **Use built-in props before custom classes.** `variant`, `appearance`, `size`, `shape` on `Button`; `size` on `Field` — reach for these before `className`.
 4. **Use semantic tokens, never raw values.** `bg-static`, `text-body`, `bg-primary-base` — never `bg-blue-500` or hardcoded hex.
 
@@ -54,7 +51,7 @@ These rules are **always enforced**. Each links to a file with Incorrect/Correct
 - **Forms use `FieldGroup` + `Field`.** Never raw `div` + `space-y-*` for form layout.
 - **`Field` owns size; children inherit it.** Set `size` on `Field` (`xs` | `sm` | `md`); `Input`, `Select`, etc. read it via context — never downgrade a child.
 - **`InputGroup` uses `InputGroupControl` / `InputGroupTextarea`.** Never a raw `Input` / `Textarea` inside `InputGroup`.
-- **Option sets (2–7 choices) use `ToggleGroup`** with `type="single"` / `"multiple"`. Don't loop `Button` with manual active state.
+- **Option sets (2–7 choices) use `SegmentedControl`** (single-select via `value` / `onValueChange`). Don't loop `Button` with manual active state; multi-select belongs to `CheckboxGroup`.
 - **`FieldSet` + `FieldLegend` group related checkboxes/radios.** Not a `div` with a heading.
 - **Validation: `data-invalid` on `Field`, `aria-invalid` on the control.** Disabled: `data-disabled` on `Field`, `disabled` on the control.
 
@@ -64,17 +61,15 @@ These rules are **always enforced**. Each links to a file with Incorrect/Correct
 - **Use `asChild` for custom triggers.** Polymorphism is `asChild` + Radix `Slot` — `<Button asChild><Link href="/x">Docs</Link></Button>`.
 - **`Button` HAS a real `loading` prop.** `<Button loading>Saving…</Button>` renders a Spinner and blocks interaction — don't compose your own.
 - **Use the right `Button` API.** `variant` (`primary` / `danger` / `success` / `neutral-solid` / …) + `appearance` (`solid` / `outline` / `ghost` / `soft`). There is no `variant="outline"`/`"destructive"`/`"secondary"`.
-- **Dialog / Sheet / Drawer need a Title.** `DialogTitle` etc. for accessibility (`className="sr-only"` if hidden).
-- **Use full Card composition.** `CardHeader` / `CardTitle` / `CardDescription` / `CardContent` / `CardFooter`.
 - **`Avatar` always needs `AvatarFallback`.**
-- **Prefer components over custom markup.** Callouts → `Alert`; empty states → `Empty`; dividers → `Separator`; loading → `Skeleton`; tags → `Badge`; toasts → `toast()` from `sonner`.
+- **Prefer components over custom markup.** Callouts → `InlineAlert`; toasts → `Toast`; dividers → `Separator`; tags → `Badge`; removable tags → `Chip`; loading → `Spinner`.
 
 ### Icons → [icons.md](./rules/icons.md)
 
 - **Icons in `Button` go through props.** `leadingIcon` / `trailingIcon` (and `iconOnly` for icon-only buttons) — no `data-icon`.
 - **No sizing classes on icons inside components.** The component sets icon size via CVA — no `size-4` / `w-4 h-4`.
 - **Pass icons as components, not string keys.** `icon={CheckIcon}`, never `icon="check"`.
-- **Match the project's `iconLibrary`.** Default `lucide` → `lucide-react`. After adding a component, swap any registry icon imports to the project's library.
+- **Import icons from `@create-ui/assets/icons`** (Remix `Ri*`, e.g. `RiSearchLine`). Registry components already ship these imports — never swap them. Brand / flag / payment / social marks come from `@create-ui/assets/{social,flags,payments,brands,…}`.
 
 ## Key Patterns
 
@@ -84,13 +79,13 @@ The most common idioms that differentiate correct Create UI code. For edge cases
 import { Button } from "@/components/ui/button"
 import { Field, FieldGroup, FieldLabel, FieldDescription } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
-import { ArrowRightIcon, SearchIcon } from "lucide-react"
+import { RiArrowRightLine, RiSearchLine } from "@create-ui/assets/icons"
 import Link from "next/link"
 
 // Button: appearance + icon props + loading. No variant="outline", no data-icon.
-<Button appearance="outline" leadingIcon={<SearchIcon />}>Search</Button>
+<Button appearance="outline" leadingIcon={<RiSearchLine />}>Search</Button>
 <Button loading>Saving…</Button>
-<Button asChild appearance="ghost" trailingIcon={<ArrowRightIcon />}>
+<Button asChild appearance="ghost" trailingIcon={<RiArrowRightLine />}>
   <Link href="/docs">Docs</Link>
 </Button>
 
@@ -112,22 +107,28 @@ import Link from "next/link"
 
 ## Component Selection
 
-| Need                       | Use                                                                                                                    |
-| -------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| Button / action            | `Button` (`variant` + `appearance`), `ButtonGroup`, `CloseButton`, `SocialLoginButton`                                 |
-| Form inputs                | `Input`, `Textarea`, `Select`, `NativeSelect`, `Combobox`, `Switch`, `Checkbox`, `Radio`, `RadioGroup`, `InputOTP`, `InputStepper`, `Slider`, `Calendar` |
-| Toggle between 2–7 options | `ToggleGroup` + `ToggleGroupItem`, or `SegmentedControl`                                                               |
-| Inputs with affordances    | `InputGroup` + `InputGroupAddon`, `PasswordStrength`                                                                   |
-| Data display               | `Table`, `Card`, `Item`, `Badge`, `StatusBadge`, `Chip`, `Avatar`, `CountryFlag`, `Kbd`                               |
-| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `TabMenu`, `Pagination`, `TextLink`                                |
-| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation), `Popover`              |
-| Feedback                   | `sonner` (toast), `Alert`, `AlertBanner`, `InlineAlert`, `Progress`, `Skeleton`, `Spinner`                            |
-| Command palette            | `Command` inside `Dialog`                                                                                              |
-| Charts                     | `Chart` (wraps Recharts)                                                                                               |
-| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`, `AspectRatio`, `Carousel`                 |
-| Empty states               | `Empty`                                                                                                                |
-| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                                               |
-| Tooltips / info            | `Tooltip`, `InfoTooltip`, `HoverCard`, `Popover`                                                                       |
+Every name below ships in `@createui` — and nothing else does. If a component isn't in this table (there is no card, table, tabs, sheet, drawer, skeleton, sidebar, dialog/modal, popover, or alert-banner component), build the layout from semantic-token markup and these primitives instead. The only modal surface is `CommandDialog` (part of `command`).
+
+| Need                       | Use                                                                                                    |
+| -------------------------- | ------------------------------------------------------------------------------------------------------ |
+| Button / action            | `Button` (`variant` + `appearance`), `ButtonGroup`, `CloseButton`, `SocialLoginButton`, `AppStoreBadge` |
+| Form layout                | `Field` + `FieldGroup` (+ `FieldSet` / `FieldLegend`), `Label`                                          |
+| Form inputs                | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio` / `RadioGroup`, `Switch`, `InputOTP`                 |
+| Grouped on/off controls    | `CheckboxGroup`, `SwitchGroup`                                                                          |
+| Formatted inputs           | `DateInput`, `PhoneInput`, `CreditCardInput`, `InputStepper`, `PasswordStrength`                        |
+| Toggle between 2–7 options | `SegmentedControl` + `SegmentedControlItem`                                                             |
+| Inputs with affordances    | `InputGroup` + `InputGroupAddon` / `InputGroupButton`                                                   |
+| Data display               | `Badge`, `StatusBadge` (dot), `Chip`, `Avatar`, `CountryFlag` / `CurrencyFlag` (both from the `country-flag` item), `Progress` |
+| Navigation                 | `Breadcrumb`, `Pagination`, `TabMenu`, `TextLink`                                                       |
+| Menus                      | `DropdownMenu`                                                                                          |
+| Command palette            | `Command` (inline) / `CommandDialog` (modal)                                                            |
+| Feedback                   | `Toast`, `InlineAlert` (inline callout), `Progress`, `Spinner`                                          |
+| Tooltips / info            | `Tooltip`, `InfoTooltip`                                                                                |
+| Layout                     | `Accordion`, `AspectRatio`, `ScrollArea`, `Separator`                                                   |
+
+> **Icons & assets** all come from `@create-ui/assets`: UI icons at `@create-ui/assets/icons` (Remix `Ri*`), plus `social` / `flags` / `payments` / `brands` / `badges` / `banks` / `crypto` marks (these back `CountryFlag`, `SocialLoginButton`, …). Never import from `lucide-react`. See [rules/icons.md](./rules/icons.md).
+
+> The registry also ships **hooks** (`use-mobile`, `use-credit-card-input`, `use-date-input`, `use-phone-input`) and **lib utilities** (`utils`, `country-flags`, `currency-flags`) — these appear in `search` results as `registry:hook` / `registry:lib` items and are installed automatically as dependencies of the components that need them.
 
 ## Key Fields (components.json)
 
@@ -137,21 +138,22 @@ import Link from "next/link"
 - **`rsc`** — when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top.
 - **`tsx`** — whether components are emitted as `.tsx` (default `true`).
 - **`tailwind.css`** — the global CSS file where tokens are defined. Edit this file; never create a new one.
-- **`iconLibrary`** — drives icon imports (default `lucide` → `lucide-react`). Never assume.
+- **`iconLibrary`** — Create UI's icon library, `createui`. Icons (and all marks) come from `@create-ui/assets`; UI icons are `@create-ui/assets/icons` (Remix `Ri*`). Never import from `lucide-react` or another package.
 - **`menuColor`** (`default` | `inverted`) / **`menuAccent`** (`subtle` | `bold`) — menu surface treatment.
-- **`registries`** — extra registries beyond `@createui`, e.g. `{ "@acme": "https://acme.com/r/{name}.json" }`.
+
+**`@createui` is the only registry.** There is no `registries` field to configure — never add one or point the project at another registry.
 
 See [cli.md — `info`](./cli.md) and [customization.md](./customization.md) for the full reference.
 
 ## Workflow
 
 1. **Get project context** — `npx @create-ui/cli info`.
-2. **Check installed components first** — before `add`, check the `components` list from `info` or list the `ui` alias directory. Don't import un-added components, and don't re-add installed ones.
+2. **Check installed components first** — before `add`, list the `ui` alias directory (e.g. `components/ui/`); `info` prints the config and aliases but not an installed-components list. Don't import un-added components, and don't re-add installed ones.
 3. **Find components** — `npx @create-ui/cli search @createui -q "<query>"`.
-4. **Inspect before adding** — `npx @create-ui/cli view @createui/<name>` to see an item's metadata and files; `npx @create-ui/cli diff <name>` to see what changed upstream for an installed one.
+4. **Inspect before adding** — `npx @create-ui/cli view <name>` to see an item's metadata and files; `npx @create-ui/cli diff <name>` to see what changed upstream for an installed one.
 5. **Add** — `npx @create-ui/cli add <name>`.
-6. **Review added files** — read them and verify composition (e.g. `SelectItem` inside `SelectGroup`), imports, and adherence to the Critical Rules. **Replace any icon imports with the project's `iconLibrary`** (e.g. registry `lucide-react` → the project's library), adjusting icon names accordingly.
-7. **Registry must be explicit** — if the user doesn't say which registry, ask. Don't default on their behalf.
+6. **Review added files** — read them and verify composition (e.g. `SelectItem` inside `SelectGroup`), imports, and adherence to the Critical Rules. Registry components import icons from `@create-ui/assets/icons` — keep them as-is; never rewrite them to `lucide-react` or another package.
+7. **Components come from `@createui`** — always. Never configure another registry or suggest one.
 
 ## Updating Components
 
@@ -169,18 +171,18 @@ To keep local edits while pulling upstream changes, use the `diff` command — *
 npx @create-ui/cli init
 npx @create-ui/cli init --theme indigo --neutral gray --font-variant v1
 
-# Scaffold a new project (or run with no name to build a custom design system in the browser).
+# Scaffold a new project (missing name/template/theme are prompted interactively).
 npx @create-ui/cli create my-app --template next
 npx @create-ui/cli create
 
-# Add components.
-npx @create-ui/cli add button card dialog
-npx @create-ui/cli add @createui/select
+# Add components (items are always bare names).
+npx @create-ui/cli add button select dropdown-menu
 npx @create-ui/cli add --all
 
-# Inspect the registry.
-npx @create-ui/cli search @createui -q "sidebar"
-npx @create-ui/cli view @createui/button
+# Inspect the registry (@createui is the registry argument for search/list only).
+npx @create-ui/cli search @createui -q "toast"
+npx @create-ui/cli search @createui -l 500   # full listing — the default limit is 100, the registry has more items
+npx @create-ui/cli view button
 npx @create-ui/cli diff button
 
 # Migrate (e.g. consolidate radix imports, or switch icon library).
@@ -196,13 +198,12 @@ npx @create-ui/cli mcp init --client claude
 
 ## Detailed References
 
-- [cli.md](./cli.md) — every command and flag (init, create, add, diff, view, search, migrate, info, build, mcp, registry).
+- [cli.md](./cli.md) — every command and flag (init, create, add, diff, view, search, migrate, info, mcp, skill).
 - [mcp.md](./mcp.md) — the MCP server, `mcp init` clients, and the available MCP tools.
 - [customization.md](./customization.md) — theming, the `--color-*` / semantic tokens, radius, and dark mode.
-- [contributing.md](./contributing.md) — working inside the monorepo: dev/test scripts, the registry build, authoring components.
 - [rules/styling.md](./rules/styling.md) — semantic tokens, `className` scope, spacing, `size-*`, `outline-*` focus, `cn()`.
-- [rules/forms.md](./rules/forms.md) — `FieldGroup`, `Field` size cascade, `InputGroup`, `ToggleGroup`, `FieldSet`, validation states.
-- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Separator, Skeleton, Badge, `Button` loading.
+- [rules/forms.md](./rules/forms.md) — `FieldGroup`, `Field` size cascade, `InputGroup`, `SegmentedControl`, `FieldSet`, validation states.
+- [rules/composition.md](./rules/composition.md) — Groups, overlays, `TabMenu`, `Avatar`, `InlineAlert`, `Toast`, `Separator`, `Badge`, `Button` loading.
 - [rules/icons.md](./rules/icons.md) — `leadingIcon` / `trailingIcon`, icon sizing, passing icons as components.
 
 ## Resources

package/dist/skills/createui/agents/openai.yml

@@ -1,5 +1,5 @@
 interface:
   display_name: "Create UI"
   short_description: "Manages Create UI components — adding, searching, updating, styling, and composing UI from the @createui registry."
-  icon_small: "./assets/createui-control-small.png"
+  icon_small: "./assets/createui-small.png"
   icon_large: "./assets/createui.png"

package/dist/skills/createui/cli.md

@@ -2,21 +2,17 @@
 
 Configuration is read from `components.json`.
 
-The CLI is published as **`@create-ui/cli`** and exposes the **`createui`** bin.
-
-- **In a user project (published):** `npx @create-ui/cli <command>` — or install it globally with `pnpm add -g @create-ui/cli` and then run `createui <command>`.
-- **Inside this monorepo (contributors):** `pnpm createui <command>`, which runs the local build against `http://localhost:4000/r` and requires `pnpm v4:dev` to be running. To test against a target app, use `pnpm createui add -c ~/path/to/app`.
-
-Examples below use `npx @create-ui/cli <command>`; substitute `pnpm createui <command>` when working in the monorepo.
+The CLI is published as **`@create-ui/cli`** and exposes the **`createui`** bin. Run it with `npx @create-ui/cli <command>` — or install it globally with `pnpm add -g @create-ui/cli` and then run `createui <command>`.
 
 > **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist.
 
 ## Contents
 
-- Commands: init, create, add, diff, view, search, migrate, info, build, mcp, registry
-- The three "build" things: `create` vs `build` vs `pnpm registry:build`
+- Commands: init, create, add, diff, view, search, migrate, info, mcp, skill
 - Templates: next, vite, start, next-monorepo
-- Registry & namespaces: builtin `@createui`, `REGISTRY_URL`, custom registries
+- Registry & namespaces: the built-in `@createui` (the only registry)
+
+(The CLI also has `build` / `registry:build` commands for registry authors publishing their own items — not needed for using Create UI in an app.)
 
 ---
 
@@ -58,7 +54,7 @@ Pick a theme with `--theme` and `--neutral`; these are swappable token sets laye
 npx @create-ui/cli create [name] [options]
 ```
 
-Scaffolds a brand-new project. With no arguments it prints "Build your own createui." and opens **https://createui.co/create** in the browser so you can build a custom design system, then choose a framework.
+Scaffolds a brand-new project. Anything not passed as a flag is prompted interactively: project name, template, then the theme choices (primary / neutral / font). `--preset` skips the theme prompts — bare `--preset` shows an interactive preset list, or pass a preset name/URL directly.
 
 | Flag                    | Short | Description                                   | Default |
 | ----------------------- | ----- | --------------------------------------------- | ------- |
@@ -77,7 +73,7 @@ Scaffolds a brand-new project. With no arguments it prints "Build your own creat
 npx @create-ui/cli add [components...] [options]
 ```
 
-Accepts bare names (`button`), namespaced names (`@createui/button`), full URLs, and local paths.
+Accepts bare names (`button`), full URLs, and local paths. There is no namespaced item form — `add @createui/button` does not resolve; always use the bare name.
 
 | Flag                  | Short | Description                            | Default |
 | --------------------- | ----- | -------------------------------------- | ------- |
@@ -96,9 +92,6 @@ Accepts bare names (`button`), namespaced names (`@createui/button`), full URLs,
 # Add by name.
 npx @create-ui/cli add button
 
-# Add a namespaced item.
-npx @create-ui/cli add @createui/select
-
 # Add from a URL or a local path.
 npx @create-ui/cli add https://createui.co/r/button.json
 ```
@@ -124,7 +117,7 @@ With no argument, lists the components that have updates available. With a compo
 npx @create-ui/cli view <items...> [options]
 ```
 
-Prints item metadata plus file contents (as JSON). Items are names or URLs, e.g. `@createui/button`.
+Prints item metadata plus file contents (as JSON). Items are bare names or URLs, e.g. `button`.
 
 | Flag          | Short | Description       | Default |
 | ------------- | ----- | ----------------- | ------- |
@@ -151,7 +144,7 @@ Searches one or more registries. Registry names must start with `@` (e.g. `@crea
 npx @create-ui/cli search @createui
 
 # Fuzzy search.
-npx @create-ui/cli search @createui -q dialog
+npx @create-ui/cli search @createui -q select
 ```
 
 ### `migrate` — Run a migration
@@ -162,7 +155,7 @@ npx @create-ui/cli migrate [migration] [options]
 
 Available migrations:
 
-- `icons` — migrate to a different icon library.
+- `icons` — migrate a project from a legacy icon library (lucide / radix) to Create UI's `@create-ui/assets/icons` (Remix `Ri*`).
 - `radix` — migrate to `radix-ui`, consolidating `@radix-ui/react-*` imports into the unified `radix-ui` package.
 
 | Flag          | Short | Description              | Default |
@@ -183,21 +176,6 @@ Prints project information plus the contents of `components.json`. Run this firs
 | ------------- | ----- | ----------------- | ------- |
 | `--cwd <cwd>` | `-c`  | Working directory | current |
 
-### `build` — Build components for a Create UI registry [EXPERIMENTAL]
-
-```bash
-npx @create-ui/cli build [registry] [options]
-```
-
-For users **publishing their own registry**: compiles a `registry.json` into individual JSON files for distribution. Default input `./registry.json`, default output `./public/r`.
-
-| Flag              | Short | Description       | Default      |
-| ----------------- | ----- | ----------------- | ------------ |
-| `--output <path>` | `-o`  | Output directory  | `./public/r` |
-| `--cwd <cwd>`     | `-c`  | Working directory | current      |
-
-This is distinct from the monorepo's `pnpm registry:build` — see the note below.
-
 ### `mcp` — MCP server and configuration commands
 
 ```bash
@@ -217,36 +195,23 @@ Running `createui mcp` starts the stdio MCP server. The `mcp init` subcommand wr
 
 See [mcp.md](./mcp.md) for the MCP server details, the available tools, and per-client config paths.
 
-### `registry` — Manage registries
-
-```bash
-npx @create-ui/cli registry add [registries...] [options]
-```
-
-The `registry add` subcommand adds registries to `components.json`. Pass a name (`@acme`) or a `name=url` pair where the URL contains `{name}`.
-
-| Flag          | Short | Description       | Default |
-| ------------- | ----- | ----------------- | ------- |
-| `--cwd <cwd>` | `-c`  | Working directory | current |
-| `--silent`    | `-s`  | Mute output       | `false` |
+### `skill` — Install the Create UI agent skill
 
 ```bash
-npx @create-ui/cli registry add @acme=https://acme.com/r/{name}.json
+npx @create-ui/cli skill
+npx @create-ui/cli skill --client claude --project
 ```
 
-> The legacy `registry:build` and `registry:mcp` commands still exist, but prefer `registry build` and `mcp`.
-
----
-
-## The three "build" things
+Installs this skill into the agent's skills directory (personal home directory by default; `--project` installs into the project).
 
-These are easy to confuse — they do different jobs:
-
-| Command                                 | What it does                                                                                  |
-| --------------------------------------- | --------------------------------------------------------------------------------------------- |
-| `createui create`                       | Scaffolds a new **project**. With no args, opens https://createui.co/create to build a custom design system. |
-| `createui build`                        | Compiles a **user's own** `registry.json` → `./public/r` so they can publish components.       |
-| `pnpm registry:build` (monorepo only)   | Rebuilds **this repo's** component registry. Different tool, contributors only — see [contributing.md](./contributing.md). |
+| Flag                | Short | Description                                                          | Default  |
+| ------------------- | ----- | -------------------------------------------------------------------- | -------- |
+| `--client <client>` |       | Agent to install for: `claude`, `gemini`, `codex`, `agents`          | `claude` |
+| `--project`         |       | Install into the project instead of the home directory               | `false`  |
+| `--path <path>`     | `-p`  | Install into an explicit skills directory (for other agents)         | —        |
+| `--cwd <cwd>`       | `-c`  | Working directory                                                    | current  |
+| `--force`           | `-f`  | Overwrite an existing skill installation                             | `false`  |
+| `--yes`             | `-y`  | Skip the overwrite confirmation prompt                               | `false`  |
 
 ---
 
@@ -265,45 +230,12 @@ The `init` `--template` option accepts:
 
 ## Registry & namespaces
 
-The built-in registry namespace is **`@createui`**, which resolves item names to:
+**`@createui` is the only registry.** It is built in — nothing to configure — and resolves item names to:
 
 ```
 https://createui.co/r/{name}.json
 ```
 
-So `@createui/button` resolves to `https://createui.co/r/button.json`.
-
-### Overriding the base registry URL
+So `add button` fetches `https://createui.co/r/button.json`. Items are always referenced by **bare name**; the `@createui` name itself is only used as the registry argument to `search` / `list`. Never prefix item names with it — `view @createui/button` resolves to the literal path `…/r/@createui/button.json` and 404s.
 
-The only registry environment variable is **`REGISTRY_URL`**. It defaults to `https://createui.co/r`; the `@createui` namespace appends `/{name}.json`. Override it to point the CLI at a different registry host:
-
-```bash
-REGISTRY_URL=https://staging.example.com/r npx @create-ui/cli add button
-```
-
-### Custom registries in `components.json`
-
-Configure additional registries under the `"registries"` key. Names must start with `@`, and every URL must contain `{name}`.
-
-```json
-{
-  "registries": {
-    "@acme": "https://acme.com/r/{name}.json",
-    "@private": {
-      "url": "https://registry.internal.example.com/r/{name}.json",
-      "headers": { "Authorization": "Bearer ${MY_TOKEN}" },
-      "params": { "team": "${TEAM_ID}" }
-    }
-  }
-}
-```
-
-- **String form** (`@acme`) is a bare templated URL.
-- **Object form** (`@private`) adds `headers` and/or `params`.
-- `${VAR}` placeholders in the URL, headers, and params are resolved from environment variables.
-
-Once configured, add items by namespace:
-
-```bash
-npx @create-ui/cli add @acme/marketing-hero
-```
+Never configure additional registries, add a `registries` field to `components.json`, or point the CLI at another registry host.

package/dist/skills/createui/customization.md

@@ -55,7 +55,7 @@ Create UI uses **semantic** token names. Backgrounds, borders, and text share a
 
 ### Status families
 
-Each of `error`, `success`, `warning`, `info` has a `-base` plus a `-weakest` … `-strongest` scale, e.g. `bg-error-base`, `text-error-base`, `outline-error-strongest`, `bg-success-base`, `bg-info-base`. **Prefer the semantic status tokens** in your own code. The shipped Button implements its danger/success variants with the raw `red-*` / `green-*` scales (e.g. `bg-red-600`, `bg-red-alpha-16`) — that is the implementation detail, not a pattern you need to copy.
+Each of `error`, `success`, `warning`, `info`, and `away` has a `-base` plus a `-weakest` … `-strongest` scale, e.g. `bg-error-base`, `text-error-base`, `outline-error-strongest`, `bg-success-base`, `bg-info-base`, `bg-away-base` (`away` backs the `variant="away"` of `Toast` / `InlineAlert` / `StatusBadge`). **Prefer the semantic status tokens** in your own code. The shipped Button implements its danger/success variants with the raw `red-*` / `green-*` scales (e.g. `bg-red-600`, `bg-red-alpha-16`) — that is the implementation detail, not a pattern you need to copy.
 
 ### Shadows
 
@@ -207,9 +207,9 @@ Use `className` for layout and spacing, not for re-coloring the variant:
 
 ```tsx
 import { cn } from "@/lib/utils"
-import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
 
-<Card className={cn("mx-auto max-w-md")}>...</Card>
+<Button className={cn("w-full")}>Continue</Button>
 ```
 
 ### 3. Add a CVA variant in the source
@@ -226,37 +226,54 @@ warning: "bg-warning-base text-static-white hover:bg-warning-strong",
 Compose Create UI primitives into higher-level components. Verify each primitive's props (`Button` has `variant="danger"`, not `variant="destructive"`):
 
 ```tsx
+import { RiLogoutBoxLine, RiSettingsLine, RiUserLine } from "@create-ui/assets/icons"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-
-export function ConfirmDialog({ title, description, onConfirm, children }) {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function UserMenu({ name, avatarSrc, onSignOut, children }) {
   return (
-    <Dialog>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button appearance="outline">Cancel</Button>
-          </DialogClose>
-          <Button variant="danger" onClick={onConfirm}>
-            Confirm
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          appearance="ghost"
+          variant="neutral-solid"
+          shape="pill"
+          iconOnly
+          aria-label="Open account menu"
+        >
+          <Avatar>
+            <AvatarImage src={avatarSrc} alt={name} />
+            <AvatarFallback>{name.slice(0, 2)}</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <RiUserLine />
+            Profile
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <RiSettingsLine />
+            Settings
+          </DropdownMenuItem>
+          {children}
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onSelect={onSignOut}>
+          <RiLogoutBoxLine />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 ```

package/dist/skills/createui/evals/evals.json

@@ -3,7 +3,7 @@
   "evals": [
     {
       "id": 1,
-      "prompt": "I'm building a Next.js app with Create UI (lucide icons). Create a settings form component with fields for: full name, email address, and notification preferences (email, SMS, push notifications as on/off toggles). Add validation states for required fields.",
+      "prompt": "I'm building a Next.js app with Create UI. Create a settings form component with fields for: full name, email address, and notification preferences (email, SMS, push notifications as on/off toggles). Add validation states for required fields.",
       "expected_output": "A React component using FieldGroup, Field, Switch, data-invalid/aria-invalid validation, gap-* spacing, and Create UI semantic tokens.",
       "files": [],
       "expectations": [
@@ -17,27 +17,28 @@
     },
     {
       "id": 2,
-      "prompt": "Create a dialog component for editing a user profile. It should have the user's avatar at the top, input fields for name and bio, and Save/Cancel buttons with appropriate icons. Using Create UI with lucide icons.",
-      "expected_output": "A React component with DialogTitle, Avatar+AvatarFallback, Button with leadingIcon/trailingIcon props, no icon sizing classes, asChild for custom triggers.",
+      "prompt": "Create an account menu component for the app header. The trigger is the user's avatar; the menu shows Profile, Billing, and Settings items with appropriate icons, then a separated Sign out item. Below the menu component, also add a Save changes button that shows a pending state while saving. Using Create UI.",
+      "expected_output": "A React component with DropdownMenu (trigger via asChild wrapping a Button + Avatar with AvatarFallback), DropdownMenuGroup/DropdownMenuSeparator structure, icons from @create-ui/assets/icons without sizing classes, and a Button using the loading prop.",
       "files": [],
       "expectations": [
-        "Includes DialogTitle for accessibility (visible or with an sr-only class)",
+        "Uses DropdownMenu with DropdownMenuTrigger asChild (Radix Slot) instead of hand-rolling a menu or using a popover (no popover component exists in Create UI)",
         "Avatar component includes AvatarFallback",
-        "Icons on buttons are passed via the leadingIcon/trailingIcon props (never a data-icon attribute, which does not exist in Create UI)",
+        "Menu items are wrapped in DropdownMenuGroup, with DropdownMenuSeparator before Sign out",
+        "Icons are imported from @create-ui/assets/icons (Remix Ri*), never from lucide-react or another icon package",
         "No sizing classes on icons inside components (no size-4, w-4, h-4, etc.) — the component sizes icons via CVA",
         "Uses the Button loading prop for the pending Save state instead of manually composing a Spinner",
-        "Uses asChild for custom triggers (Radix Slot)"
+        "Button icons (if any) are passed via the leadingIcon/trailingIcon props (never a data-icon attribute, which does not exist in Create UI)"
       ]
     },
     {
       "id": 3,
-      "prompt": "Create a dashboard component that shows 4 stat cards in a grid. Each card has a title, large number, a percentage-change badge, and a loading skeleton state. Using Create UI with lucide icons.",
-      "expected_output": "A React component with full Card composition, Skeleton for loading, a Badge/StatusBadge for the change, Create UI semantic tokens, and gap-* spacing.",
+      "prompt": "Create a dashboard stats section that shows 4 stat tiles in a grid. Each tile has a label, a large number, and a percentage-change indicator, plus a loading state while the data is being fetched. Using Create UI.",
+      "expected_output": "A React component with stat tiles built from semantic-token markup (bg-static/border-light surfaces, text-placeholder label, text-strongest number), a Badge for the percentage change, a Spinner for the loading state, and gap-* spacing.",
       "files": [],
       "expectations": [
-        "Uses full Card composition with CardHeader, CardTitle, CardContent (not dumping everything into CardContent)",
-        "Uses the Skeleton component for loading placeholders instead of custom animate-pulse divs",
-        "Uses a Badge or StatusBadge for the percentage change instead of custom styled spans",
+        "Builds the stat tiles from semantic-token markup (e.g. bg-static or bg-weakest surface, border-light, text-placeholder for the label, text-strongest for the number) — there is no Card component in Create UI",
+        "Uses the Spinner component for the loading state instead of a skeleton placeholder (no skeleton component exists in Create UI) or custom animate-pulse/animate-spin divs",
+        "Uses a Badge (e.g. variant=\"success\" / \"danger\") for the percentage change instead of custom styled spans",
         "Uses Create UI semantic tokens (e.g. text-body, text-strongest, text-success-base) instead of foreign tokens or raw colors like bg-green-500",
         "Uses gap-* instead of space-y-* or space-x-* for spacing",
         "Uses size-* when width and height are equal instead of separate w-* h-*"