메뉴
Use when adding, updating, debugging, styling, or composing shadcn/ui components, forms, dialogs, menus, charts, sidebars, themes, registries, or any project with a components.json file.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/jakenuts/agent-native-diagrams --skill shadcn-ui명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
Create and iterate on shareable visual diagrams (architecture maps, flowcharts, state machines, class/domain models, mindmaps, dependency maps) via the Agent Vision MCP server. Use when the user asks for a diagram, visualization, or "draw this out" during a conversation.
How to create and run agent actions. Actions are the single source of truth for app operations — the agent calls them as tools and frontend code calls them through client hooks. Use when creating a new action, adding an API integration, or wiring up frontend data fetching.
The four-area checklist every new feature must complete. Use when adding any feature, integration, or capability to ensure the agent and UI stay in parity.
| name | shadcn-ui |
| description | Use when adding, updating, debugging, styling, or composing shadcn/ui components, forms, dialogs, menus, charts, sidebars, themes, registries, or any project with a components.json file. |
| scope | dev |
| source | https://ui.shadcn.com/docs/skills |
| metadata | {"internal":true} |
This skill keeps shadcn/ui work project-aware. Components are source files in the app, so always inspect the local project before adding, importing, or rewriting them.
components.json.pnpm dlx shadcn@latest info --json when you need current project context: framework, Tailwind version, aliases, icon library, installed components, and resolved paths.components.json or shadcn info; do not assume @/components/ui if the project says otherwise.app/components/ui/ or the resolved ui path before importing a component.pnpm dlx shadcn@latest docs <component> and read the returned docs or examples before coding.pnpm dlx shadcn@latest add <component> from the app root.pnpm dlx shadcn@latest add <component> --dry-run and --diff to inspect the change.Alert for callouts, Badge for small status labels, Separator for dividers, Skeleton for placeholders, Table for tabular data, and Card for framed content.CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.SelectItem in SelectGroup, DropdownMenuItem in DropdownMenuGroup, CommandItem in CommandGroup, and equivalent menu groups.TabsTrigger belongs inside TabsList.Avatar always needs AvatarFallback.disabled, Spinner, and clear text.Field, FieldGroup, FieldSet, or InputGroup are installed or worth adding, use them for form layout, grouped fields, and input add-ons.InputGroup and InputGroupAddon when available.ToggleGroup for small option sets, RadioGroup for one-of-many choices, Checkbox for multi-select, Switch for settings toggles, Select or Combobox for predefined choices, and Slider or numeric input for numeric values.aria-invalid, and connect descriptions/errors to controls.bg-background, text-foreground, text-muted-foreground, bg-primary, border-border, text-destructive) instead of raw colors for reusable app UI.className mostly for layout and spacing; avoid overriding component colors and typography unless the component is intentionally being extended.gap-* instead of space-x-* / space-y-*.size-* when width and height are equal.truncate for single-line clipping.cn() for conditional classes.z-index to overlay primitives unless you are fixing a verified stacking bug.@theme inline.shadcn's built-in component animations are the right level of polish — keep them. The goal is a snappy, clean UI, not a motionless one. Match shadcn's motion vocabulary; don't strip it and don't pile on decorative custom animation.
data-[state=open]:animate-in, data-[state=closed]:animate-out, fade-in/out, zoom-in/out, slide-in-from-*, accordion height, the tailwindcss-animate utilities — these ship for a reason. Leave them as-is.ease-out, opacity/transform only, gated on data-[state=...]. Examples that are good and welcome:
data-[state=delayed-open] / data-[state=closed], mirroring Radix's own content animation.rotate on expand, a subtle opacity/color hover on an icon button, skeleton shimmer, a progress/height transition on a collapsible.duration-700 hero fade-ins, parallax, bouncing/spring entrances on ordinary content, animated gradients, staggered cascades on long lists, anything that delays the user seeing or acting on content. If an animation makes the UI feel slower, cut it.@tabler/icons-react. Do not add lucide-react because a registry example used it.Check the project context before using trigger composition APIs:
asChild for custom triggers.render and sometimes nativeButton={false}.Do not wrap triggers in extra divs just to place a Button or Link inside them.