From 73e4d026bb39aafa62596f77a8fceea3c67a62dc Mon Sep 17 00:00:00 2001 From: Harivansh Rathi Date: Wed, 1 Apr 2026 18:04:36 +0000 Subject: [PATCH] shadcn skill --- .agents/skills/shadcn/SKILL.md | 242 ++++++++++++++ .agents/skills/shadcn/agents/openai.yml | 5 + .agents/skills/shadcn/assets/shadcn-small.png | Bin 0 -> 1049 bytes .agents/skills/shadcn/assets/shadcn.png | Bin 0 -> 3852 bytes .agents/skills/shadcn/cli.md | 257 +++++++++++++++ .agents/skills/shadcn/customization.md | 202 ++++++++++++ .agents/skills/shadcn/evals/evals.json | 47 +++ .agents/skills/shadcn/mcp.md | 94 ++++++ .agents/skills/shadcn/rules/base-vs-radix.md | 306 ++++++++++++++++++ .agents/skills/shadcn/rules/composition.md | 195 +++++++++++ .agents/skills/shadcn/rules/forms.md | 192 +++++++++++ .agents/skills/shadcn/rules/icons.md | 101 ++++++ .agents/skills/shadcn/rules/styling.md | 162 ++++++++++ skills-lock.json | 10 + 14 files changed, 1813 insertions(+) create mode 100644 .agents/skills/shadcn/SKILL.md create mode 100644 .agents/skills/shadcn/agents/openai.yml create mode 100644 .agents/skills/shadcn/assets/shadcn-small.png create mode 100644 .agents/skills/shadcn/assets/shadcn.png create mode 100644 .agents/skills/shadcn/cli.md create mode 100644 .agents/skills/shadcn/customization.md create mode 100644 .agents/skills/shadcn/evals/evals.json create mode 100644 .agents/skills/shadcn/mcp.md create mode 100644 .agents/skills/shadcn/rules/base-vs-radix.md create mode 100644 .agents/skills/shadcn/rules/composition.md create mode 100644 .agents/skills/shadcn/rules/forms.md create mode 100644 .agents/skills/shadcn/rules/icons.md create mode 100644 .agents/skills/shadcn/rules/styling.md create mode 100644 skills-lock.json diff --git a/.agents/skills/shadcn/SKILL.md b/.agents/skills/shadcn/SKILL.md new file mode 100644 index 0000000..39d1e48 --- /dev/null +++ b/.agents/skills/shadcn/SKILL.md @@ -0,0 +1,242 @@ +--- +name: shadcn +description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". +user-invocable: false +allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *) +--- + +# shadcn/ui + +A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. + +> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +## Current Project Context + +```json +!`npx shadcn@latest info --json` +``` + +The JSON above contains the project config and installed components. Use `npx shadcn@latest docs ` to get documentation and example URLs for any component. + +## Principles + +1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too. +2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. +3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc. +4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`. + +## Critical Rules + +These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs. + +### Styling & Tailwind → [styling.md](./rules/styling.md) + +- **`className` for layout, not styling.** Never override component colors or typography. +- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`. +- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`. +- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`. +- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`). +- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries. +- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking. + +### Forms & Inputs → [forms.md](./rules/forms.md) + +- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout. +- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`. +- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.** +- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state. +- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading. +- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control. + +### Component Structure → [composition.md](./rules/composition.md) + +- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`. +- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md) +- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden. +- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`. +- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`. +- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`. +- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load. + +### Use Components, Not Custom Markup → [composition.md](./rules/composition.md) + +- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`. +- **Callouts use `Alert`.** Don't build custom styled divs. +- **Empty states use `Empty`.** Don't build custom empty state markup. +- **Toast via `sonner`.** Use `toast()` from `sonner`. +- **Use `Separator`** instead of `
` or `
`. +- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs. +- **Use `Badge`** instead of custom styled spans. + +### Icons → [icons.md](./rules/icons.md) + +- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon. +- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`. +- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup. + +### CLI + +- **Never decode or fetch preset codes manually.** Pass them directly to `npx shadcn@latest init --preset `. + +## Key Patterns + +These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above. + +```tsx +// Form layout: FieldGroup + Field, not div + Label. + + + Email + + + + +// Validation: data-invalid on Field, aria-invalid on the control. + + Email + + Invalid email. + + +// Icons in buttons: data-icon, no sizing classes. + + +// Spacing: gap-*, not space-y-*. +
// correct +
// wrong + +// Equal dimensions: size-*, not w-* h-*. + // correct + // wrong + +// Status colors: Badge variants or semantic tokens, not raw colors. ++20.1% // correct ++20.1% // wrong +``` + +## Component Selection + +| Need | Use | +| -------------------------- | --------------------------------------------------------------------------------------------------- | +| Button/action | `Button` with appropriate variant | +| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` | +| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` | +| Data display | `Table`, `Card`, `Badge`, `Avatar` | +| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` | +| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) | +| Feedback | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner` | +| Command palette | `Command` inside `Dialog` | +| Charts | `Chart` (wraps Recharts) | +| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` | +| Empty states | `Empty` | +| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` | +| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` | + +## Key Fields + +The injected project context contains these key fields: + +- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode. +- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive. +- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`. +- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one. +- **`style`** → component visual treatment (e.g. `nova`, `vega`). +- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props. +- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`. +- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc. +- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA). +- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`). + +See [cli.md — `info` command](./cli.md) for the full field reference. + +## Component Docs, Examples, and Usage + +Run `npx shadcn@latest docs ` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content. + +```bash +npx shadcn@latest docs button dialog select +``` + +**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing. + +## Workflow + +1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh. +2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed. +3. **Find components** — `npx shadcn@latest search`. +4. **Get docs and examples** — run `npx shadcn@latest docs ` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`. +5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below). +6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project. +7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on. +8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user. +9. **Switching presets** — Ask the user first: **reinstall**, **merge**, or **skip**? + - **Reinstall**: `npx shadcn@latest init --preset --force --reinstall`. Overwrites all components. + - **Merge**: `npx shadcn@latest init --preset --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually. + - **Skip**: `npx shadcn@latest init --preset --force --no-reinstall`. Only updates config and CSS, leaves components as-is. + - **Important**: Always run preset commands inside the user's project directory. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base ` explicitly — preset codes do not encode the base. + +## Updating Components + +When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.** + +1. Run `npx shadcn@latest add --dry-run` to see all files that would be affected. +2. For each file, run `npx shadcn@latest add --diff ` to see what changed upstream vs local. +3. Decide per file based on the diff: + - No local changes → safe to overwrite. + - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications. + - User says "just update everything" → use `--overwrite`, but confirm first. +4. **Never use `--overwrite` without the user's explicit approval.** + +## Quick Reference + +```bash +# Create a new project. +npx shadcn@latest init --name my-app --preset base-nova +npx shadcn@latest init --name my-app --preset a2r6bw --template vite + +# Create a monorepo project. +npx shadcn@latest init --name my-app --preset base-nova --monorepo +npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo + +# Initialize existing project. +npx shadcn@latest init --preset base-nova +npx shadcn@latest init --defaults # shortcut: --template=next --preset=base-nova + +# Add components. +npx shadcn@latest add button card dialog +npx shadcn@latest add @magicui/shimmer-button +npx shadcn@latest add --all + +# Preview changes before adding/updating. +npx shadcn@latest add button --dry-run +npx shadcn@latest add button --diff button.tsx +npx shadcn@latest add @acme/form --view button.tsx + +# Search registries. +npx shadcn@latest search @shadcn -q "sidebar" +npx shadcn@latest search @tailark -q "stats" + +# Get component docs and example URLs. +npx shadcn@latest docs button dialog select + +# View registry item details (for items not yet installed). +npx shadcn@latest view @shadcn/button +``` + +**Named presets:** `base-nova`, `radix-nova` +**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo) +**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https://ui.shadcn.com). + +## Detailed References + +- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states +- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading +- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects +- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index +- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion +- [cli.md](./cli.md) — Commands, flags, presets, templates +- [customization.md](./customization.md) — Theming, CSS variables, extending components diff --git a/.agents/skills/shadcn/agents/openai.yml b/.agents/skills/shadcn/agents/openai.yml new file mode 100644 index 0000000..ab636da --- /dev/null +++ b/.agents/skills/shadcn/agents/openai.yml @@ -0,0 +1,5 @@ +interface: + display_name: "shadcn/ui" + short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI." + icon_small: "./assets/shadcn-small.png" + icon_large: "./assets/shadcn.png" diff --git a/.agents/skills/shadcn/assets/shadcn-small.png b/.agents/skills/shadcn/assets/shadcn-small.png new file mode 100644 index 0000000000000000000000000000000000000000..547154b97f2298335159c23eec1dac0d147a1246 GIT binary patch literal 1049 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7SkfJR9T^xl_H+M9WMyDr zP)PO&@?~JCQe$9fXklRZ#lXPO@PdJ%)PRBERRRNp)eHs(@q#(K0&N%=7+O*zJkxxA z8MGJ}7&sVM8HE^_85kHC85kKD7^N6MrZF-wFnBRa!`VTM8c;P%3=Hj=3@l*v3=B~W z5a0pjLulp&j8N5#3=9jH;Hm`{FeBI?jmPt4J~A*ca29w(7Bet#3xhBt!>lsd^Q;1t47vHWgMCxdpkYC5Z|ZxjA{oRu#5NU=>z*#a19; zeI*63l9Fs&r3l{u1?T*tR0T6V13d#JJ1zwU1)HLjG^-#NH>mcalr&qVjFOT9D}DX) z@^Za$W4-*MbbUihOG|wNBYh(y-J+B<-Qvo;lEez#ykcdDAuw}XQj3#|G7CyF^Yauy z<|ZcPmzLNnDS<3ffB}d*OES|CHsuvVy_KAws}GXVH`FuGhno#D9wchzUzC}eSCR-a z-_FnmtP({GYLAUR$Z{mdKzs@o4RUd_ zb;v=WN6NOMljVy-Q&Xo?({c`}{Vspb-(9?@u4B1E(@!SFy}@%=-fX$+uv~rax>xh+ zD&{@!?X8hsDW&x6&ZL_;YTZW{y(+Q#AiQ{g58JiFjOXN6M?2h@c6#aNuT{2&PVp>d z38`wH+i!fX53 zx?M^y_Omn}bdbGd5?X5^vqXdIVDbL@SKAaOpFARHp{%U#xyWqE-x@p78oT*(@7LH} z-@G?1Huv7liQj+kWsYAT&hA!nqQGLwTC)Qutj(2;-(Jj6=|AqQH=Vmts7>*lDdXy1 zYvbIehs*|YajG0m@l4+=PaB1ANV~;io_qP_mUAq^Z5+Gr`bA&uIkY8l_uV|bQsaqL z*LEe^I2KsVU7~Y3Z1ulxnd2LqYVWtNvpL-KGfdfv3L6 zn$Nh%AeYSM`7LUV@BhQc cIhgwE8BD4xt6i`E`V30(p00i_>zopr0BcoQSpWb4 literal 0 HcmV?d00001 diff --git a/.agents/skills/shadcn/assets/shadcn.png b/.agents/skills/shadcn/assets/shadcn.png new file mode 100644 index 0000000000000000000000000000000000000000..b7b6814acc25073e5f48099b1fd3f70c47bfb1c3 GIT binary patch literal 3852 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 **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag. + +## Contents + +- Commands: init, add (dry-run, smart merge), search, view, docs, info, build +- Templates: next, vite, start, react-router, astro +- Presets: named, code, URL formats and fields +- Switching presets + +--- + +## Commands + +### `init` — Initialize or create a project + +```bash +npx shadcn@latest init [components...] [options] +``` + +Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step. + +| Flag | Short | Description | Default | +| ----------------------- | ----- | --------------------------------------------------------- | ------- | +| `--template