[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-ff449016-0a56-4c63-89c9-9c6279a9a728":3,"$fBr-Iz5HBf_kIGy-N32RawNw5BtQuC293Bz_4aC4D3x8":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"ff449016-0a56-4c63-89c9-9c6279a9a728","shadcn","管理shadcn\u002Fui组件和项目，提供上下文、文档和构建现代设计系统的使用模式。","cat_life_career","mod_other","sickn33,other","---\nname: shadcn\ndescription: Manages shadcn\u002Fui components and projects, providing context, documentation, and usage patterns for building modern design systems.\nuser-invocable: false\nrisk: safe\nsource: https:\u002F\u002Fgithub.com\u002Fshadcn-ui\u002Fui\u002Ftree\u002Fmain\u002Fskills\u002Fshadcn\ndate_added: \"2026-03-07\"\n---\n\n# shadcn\u002Fui\n\nA framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.\n\n> **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.\n\n## When to Use\n- Use when adding new components from shadcn\u002Fui or community registries.\n- Use when styling, composing, or debugging existing shadcn\u002Fui components.\n- Use when initializing a new project or switching design system presets.\n- Use to retrieve component documentation, examples, and API references.\n\n## Current Project Context\n\n```json\n!`npx shadcn@latest info --json 2>\u002Fdev\u002Fnull || echo '{\"error\": \"No shadcn project found. Run shadcn init first.\"}'`\n```\n\nThe JSON above contains the project config and installed components. Use `npx shadcn@latest docs \u003Ccomponent>` to get documentation and example URLs for any component.\n\n## Principles\n\n1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.\n2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.\n3. **Use built-in variants before custom styles.** `variant=\"outline\"`, `size=\"sm\"`, etc.\n4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.\n\n## Critical Rules\n\nThese rules are **always enforced**. Each links to a file with Incorrect\u002FCorrect code pairs.\n\n### Styling & Tailwind → [styling.md](.\u002Frules\u002Fstyling.md)\n\n- **`className` for layout, not styling.** Never override component colors or typography.\n- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.\n- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.\n- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.\n- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).\n- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.\n- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.\n\n### Forms & Inputs → [forms.md](.\u002Frules\u002Fforms.md)\n\n- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.\n- **`InputGroup` uses `InputGroupInput`\u002F`InputGroupTextarea`.** Never raw `Input`\u002F`Textarea` inside `InputGroup`.\n- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**\n- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.\n- **`FieldSet` + `FieldLegend` for grouping related checkboxes\u002Fradios.** Don't use a `div` with a heading.\n- **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.\n\n### Component Structure → [composition.md](.\u002Frules\u002Fcomposition.md)\n\n- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.\n- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](.\u002Frules\u002Fbase-vs-radix.md)\n- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className=\"sr-only\"` if visually hidden.\n- **Use full Card composition.** `CardHeader`\u002F`CardTitle`\u002F`CardDescription`\u002F`CardContent`\u002F`CardFooter`. Don't dump everything in `CardContent`.\n- **Button has no `isPending`\u002F`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.\n- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.\n- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.\n\n### Use Components, Not Custom Markup → [composition.md](.\u002Frules\u002Fcomposition.md)\n\n- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.\n- **Callouts use `Alert`.** Don't build custom styled divs.\n- **Empty states use `Empty`.** Don't build custom empty state markup.\n- **Toast via `sonner`.** Use `toast()` from `sonner`.\n- **Use `Separator`** instead of `\u003Chr>` or `\u003Cdiv className=\"border-t\">`.\n- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.\n- **Use `Badge`** instead of custom styled spans.\n\n### Icons → [icons.md](.\u002Frules\u002Ficons.md)\n\n- **Icons in `Button` use `data-icon`.** `data-icon=\"inline-start\"` or `data-icon=\"inline-end\"` on the icon.\n- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.\n- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.\n\n### CLI\n\n- **Never decode or fetch preset codes manually.** Pass them directly to `npx shadcn@latest init --preset \u003Ccode>`.\n\n## Key Patterns\n\nThese are the most common patterns that differentiate correct shadcn\u002Fui code. For edge cases, see the linked rule files above.\n\n```tsx\n\u002F\u002F Form layout: FieldGroup + Field, not div + Label.\n\u003CFieldGroup>\n  \u003CField>\n    \u003CFieldLabel htmlFor=\"email\">Email\u003C\u002FFieldLabel>\n    \u003CInput id=\"email\" \u002F>\n  \u003C\u002FField>\n\u003C\u002FFieldGroup>\n\n\u002F\u002F Validation: data-invalid on Field, aria-invalid on the control.\n\u003CField data-invalid>\n  \u003CFieldLabel>Email\u003C\u002FFieldLabel>\n  \u003CInput aria-invalid \u002F>\n  \u003CFieldDescription>Invalid email.\u003C\u002FFieldDescription>\n\u003C\u002FField>\n\n\u002F\u002F Icons in buttons: data-icon, no sizing classes.\n\u003CButton>\n  \u003CSearchIcon data-icon=\"inline-start\" \u002F>\n  Search\n\u003C\u002FButton>\n\n\u002F\u002F Spacing: gap-*, not space-y-*.\n\u003Cdiv className=\"flex flex-col gap-4\">  \u002F\u002F correct\n\u003Cdiv className=\"space-y-4\">           \u002F\u002F wrong\n\n\u002F\u002F Equal dimensions: size-*, not w-* h-*.\n\u003CAvatar className=\"size-10\">   \u002F\u002F correct\n\u003CAvatar className=\"w-10 h-10\"> \u002F\u002F wrong\n\n\u002F\u002F Status colors: Badge variants or semantic tokens, not raw colors.\n\u003CBadge variant=\"secondary\">+20.1%\u003C\u002FBadge>    \u002F\u002F correct\n\u003Cspan className=\"text-emerald-600\">+20.1%\u003C\u002Fspan> \u002F\u002F wrong\n```\n\n## Component Selection\n\n| Need                       | Use                                                                                                 |\n| -------------------------- | --------------------------------------------------------------------------------------------------- |\n| Button\u002Faction              | `Button` with appropriate variant                                                                   |\n| Form inputs                | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |\n| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem`                                                                   |\n| Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |\n| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |\n| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |\n| Feedback                   | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner`                                        |\n| Command palette            | `Command` inside `Dialog`                                                                           |\n| Charts                     | `Chart` (wraps Recharts)                                                                            |\n| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |\n| Empty states               | `Empty`                                                                                             |\n| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                            |\n| Tooltips\u002Finfo              | `Tooltip`, `HoverCard`, `Popover`                                                                   |\n\n## Key Fields\n\nThe injected project context contains these key fields:\n\n- **`aliases`** → use the actual alias prefix for imports (e.g. `@\u002F`, `~\u002F`), never hardcode.\n- **`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.\n- **`tailwindVersion`** → `\"v4\"` uses `@theme inline` blocks; `\"v3\"` uses `tailwind.config.js`.\n- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.\n- **`style`** → component visual treatment (e.g. `nova`, `vega`).\n- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.\n- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler\u002Ficons-react` for `tabler`, etc. Never assume `lucide-react`.\n- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.\n- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).\n- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).\n\nSee [cli.md — `info` command](.\u002Fcli.md) for the full field reference.\n\n## Component Docs, Examples, and Usage\n\nRun `npx shadcn@latest docs \u003Ccomponent>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.\n\n```bash\nnpx shadcn@latest docs button dialog select\n```\n\n**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.\n\n## Workflow\n\n1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.\n2. **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.\n3. **Find components** — `npx shadcn@latest search`.\n4. **Get docs and examples** — run `npx shadcn@latest docs \u003Ccomponent>` 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`.\n5. **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).\n6. **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 `@\u002Fcomponents\u002Fui\u002F...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace\u002Fui\u002Fcomponents`) 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.\n7. **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.\n8. **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.\n9. **Switching presets** — Ask the user first: **reinstall**, **merge**, or **skip**?\n   - **Reinstall**: `npx shadcn@latest init --preset \u003Ccode> --force --reinstall`. Overwrites all components.\n   - **Merge**: `npx shadcn@latest init --preset \u003Ccode> --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.\n   - **Skip**: `npx shadcn@latest init --preset \u003Ccode> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.\n\n## Updating Components\n\nWhen 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.**\n\n1. Run `npx shadcn@latest add \u003Ccomponent> --dry-run` to see all files that would be affected.\n2. For each file, run `npx shadcn@latest add \u003Ccomponent> --diff \u003Cfile>` to see what changed upstream vs local.\n3. Decide per file based on the diff:\n   - No local changes → safe to overwrite.\n   - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.\n   - User says \"just update everything\" → use `--overwrite`, but confirm first.\n4. **Never use `--overwrite` without the user's explicit approval.**\n\n## Quick Reference\n\n```bash\n# Create a new project.\nnpx shadcn@latest init --name my-app --preset base-nova\nnpx shadcn@latest init --name my-app --preset a2r6bw --template vite\n\n# Create a monorepo project.\nnpx shadcn@latest init --name my-app --preset base-nova --monorepo\nnpx shadcn@latest init --name my-app --preset base-nova --template next --monorepo\n\n# Initialize existing project.\nnpx shadcn@latest init --preset base-nova\nnpx shadcn@latest init --defaults  # shortcut: --template=next --preset=base-nova\n\n# Add components.\nnpx shadcn@latest add button card dialog\nnpx shadcn@latest add @magicui\u002Fshimmer-button\nnpx shadcn@latest add --all\n\n# Preview changes before adding\u002Fupdating.\nnpx shadcn@latest add button --dry-run\nnpx shadcn@latest add button --diff button.tsx\nnpx shadcn@latest add @acme\u002Fform --view button.tsx\n\n# Search registries.\nnpx shadcn@latest search @shadcn -q \"sidebar\"\nnpx shadcn@latest search @tailark -q \"stats\"\n\n# Get component docs and example URLs.\nnpx shadcn@latest docs button dialog select\n\n# View registry item details (for items not yet installed).\nnpx shadcn@latest view @shadcn\u002Fbutton\n```\n\n**Named presets:** `base-nova`, `radix-nova`\n**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)\n**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https:\u002F\u002Fui.shadcn.com).\n\n## Detailed References\n\n- [rules\u002Fforms.md](.\u002Frules\u002Fforms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states\n- [rules\u002Fcomposition.md](.\u002Frules\u002Fcomposition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading\n- [rules\u002Ficons.md](.\u002Frules\u002Ficons.md) — data-icon, icon sizing, passing icons as objects\n- [rules\u002Fstyling.md](.\u002Frules\u002Fstyling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index\n- [rules\u002Fbase-vs-radix.md](.\u002Frules\u002Fbase-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion\n- [cli.md](.\u002Fcli.md) — Commands, flags, presets, templates\n- [customization.md](.\u002Fcustomization.md) — Theming, CSS variables, extending components\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,173,444,"2026-05-16 13:40:11",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"7d563da1-6446-4eaa-8f7b-eee837b2aea9","1.0.0","shadcn.zip",28354,"uploads\u002Fskills\u002Fff449016-0a56-4c63-89c9-9c6279a9a728\u002Fshadcn.zip","9a2998693990c5e983777b9a010f7cdec84d538d9651d61780ebc15a430a661f","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":16588},{\"path\":\"agents\u002Fopenai.yml\",\"isDirectory\":false,\"size\":238},{\"path\":\"assets\u002Fshadcn-small.png\",\"isDirectory\":false,\"size\":1049},{\"path\":\"assets\u002Fshadcn.png\",\"isDirectory\":false,\"size\":3852},{\"path\":\"cli.md\",\"isDirectory\":false,\"size\":14974},{\"path\":\"customization.md\",\"isDirectory\":false,\"size\":5969},{\"path\":\"evals\u002Fevals.json\",\"isDirectory\":false,\"size\":3118},{\"path\":\"mcp.md\",\"isDirectory\":false,\"size\":2385},{\"path\":\"rules\u002Fbase-vs-radix.md\",\"isDirectory\":false,\"size\":6954},{\"path\":\"rules\u002Fcomposition.md\",\"isDirectory\":false,\"size\":4268},{\"path\":\"rules\u002Fforms.md\",\"isDirectory\":false,\"size\":4857},{\"path\":\"rules\u002Ficons.md\",\"isDirectory\":false,\"size\":1958},{\"path\":\"rules\u002Fstyling.md\",\"isDirectory\":false,\"size\":3795}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]