메뉴
Build UI with shadcn/ui — find, install, compose, and customize components using the correct CLI and patterns. Use when adding or styling frontend components, building forms/dashboards, theming, or working with components.json and the shadcn registry/MCP.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Optimize React/Next.js runtime performance — eliminate waterfalls, shrink bundles, cut unnecessary re-renders, and speed up rendering. Use when writing, reviewing, or refactoring components for speed, or chasing slow renders, large bundles, janky interactions, or high TTFB/LCP/INP.
Build agent-friendly web apps with the W3C Web Model Context API (WebMCP). Use when exposing frontend features as structured tools for in-browser AI agents, adding document.modelContext tools to React/Next.js apps, designing tool schemas for dashboards or admin UIs, or making existing UI automatable without DOM scraping.
Write clear, fast, deterministic Go tests including mandatory repo integration tests (x/testkit) and app unit tests. Use when adding or fixing Go tests, implementing internal/repo or internal/app, designing table-driven tests, writing benchmarks, using testify, or improving coverage in this workspace.
Design distinctive, production-grade frontend interfaces that don't read as templated AI defaults. Use when bootstrapping a frontend app, building or restyling a landing page, marketing site, hero, brand-forward product surface, or any UI where visual identity matters — choosing palette, typography, layout, motion, and copy. Required before running create-next-app or writing UI.
Review code (your own or others') for correctness, design, and risk before it merges. Use when reviewing a diff or pull request, doing a self-review before opening a PR, or giving structured, prioritized feedback.
Architect a scalable, themeable design-token system — primitive → semantic → component layers, CSS variables, a 4px spacing/type scale, and dark mode. Use when setting up or refactoring a project's tokens, naming color/spacing/radius values, wiring tokens into Tailwind/shadcn, enabling theme switching, or killing hard-coded hex/px scattered through components.
| name | shadcn |
| description | Build UI with shadcn/ui — find, install, compose, and customize components using the correct CLI and patterns. Use when adding or styling frontend components, building forms/dashboards, theming, or working with components.json and the shadcn registry/MCP. |
shadcn/ui components are copied into your project (not a dependency) and composed from primitives. Always discover the real component API before generating code — don't guess prop names.
The official skill reads your project and injects accurate context. Install it and enable the shadcn MCP so the assistant uses real component data:
npx skills add shadcn/ui # installs the official shadcn skill
When present, it activates on a components.json and runs shadcn info --json
to learn your framework, Tailwind version, aliases, base library (radix or
base), icon library, and installed components. Prefer this over memory.
Use the CLI (npx shadcn@latest …) — never hand-copy component source:
npx shadcn@latest init # set up components.json + base styles
npx shadcn@latest search <query> # find components in the registry
npx shadcn@latest view <name> # inspect a component's files/API
npx shadcn@latest docs <name> # read its documentation
npx shadcn@latest add <name> # install a component (and its deps)
npx shadcn@latest info --json # current project configuration
npx shadcn@latest diff # see upstream changes to installed components
Discover with search/view/docs (or the MCP tools) before writing code,
so you use the correct, version-specific API on the first try.
Field/FieldGroup (and the form primitives) for layout and
labelling, not ad-hoc divs.ToggleGroup/RadioGroup rather than hand-rolled buttons.radix vs base) — they differ; check first.bg-background, text-foreground, border, ring) — avoid hard-coded hex..dark class / theme tokens, not duplicated styles.For the deeper patterns — next-themes dark-mode setup, the v3-HSL vs
v4-OKLCH/@theme token plumbing, multi-theme, and adding cva variants — read
references/theming.md. For the token architecture behind it, see the
design-tokens skill.
Radix primitives give you keyboard nav, focus traps, and ARIA wiring for free —
compose them rather than hand-rolling that logic. You still owe labels for
icon-only triggers, wired-up form errors, an intact focus ring, and live
regions for your own async updates. See references/accessibility.md for the
per-component breakdown; ux-quality covers the general (non-shadcn) rules.
Open these for depth (progressive disclosure — they don't load until needed):
references/theming.md — dark mode (next-themes), the v3/v4 token systems,
color customization, multi-theme, and cva variant customization.references/accessibility.md — what each Radix primitive handles vs. the
gaps you must fill (labels, form errors, focus ring, live regions).view/docs/MCP before coding.add (deps resolved), not pasted by hand.