메뉴
Efficiently add, configure, and use shadcn/ui components. Use this skill when the user wants to add UI components, fix styling, or needs the list of available shadcn components.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Guide for working with AGENTS.md — the open standard for AI coding agent configuration. Use when creating, updating, or optimizing AGENTS.md files, or when onboarding a project to multi-agent workflows.
Better Auth integration expert for TypeScript authentication — server config, client setup, database adapters, OAuth providers, plugins (2FA, organizations), session management, and security hardening. Use when adding auth to a project, configuring Better Auth, implementing login/signup flows, setting up OAuth, enabling 2FA, or securing auth endpoints.
Domain-Driven Design with Clean Architecture — framework-agnostic patterns for entities, value objects, aggregates, use cases, and the dependency rule. Use PROACTIVELY when designing domain models, implementing bounded contexts, structuring layered architectures, separating business logic from infrastructure, or applying DDD tactical patterns in any language or framework.
Workflow orchestration for backend projects (API routes, services, models). Structured phases — Plan, Code, Review, Test — with memory-bank integration for session continuity.
Workflow orchestration for CLI projects (commander, yargs, oclif). Structured phases — Plan, Code, Review, Test — with memory-bank integration for session continuity.
Workflow orchestration for frontend projects (React, Vue, Svelte, components, CSS). Structured phases — Plan, Design, Code, Review, Test — with memory-bank integration for session continuity.
| name | shadcn-ui |
| description | Efficiently add, configure, and use shadcn/ui components. Use this skill when the user wants to add UI components, fix styling, or needs the list of available shadcn components. |
This skill enables Claude to manage shadcn/ui components using the official CLI and best practices.
npx shadcn@latest initnpx shadcn@latest add [component-name]npx shadcn@latest add (shows interactive list)When a user asks for a UI element, use npx shadcn@latest add for any of the following:
components.json or tsconfig.json to ensure components are imported from the correct alias (default is @/components/ui/...).Form, remind the user it integrates with react-hook-form and zod.lucide-react by default for component icons.npx shadcn@latest add <name>, then implement the component in the requested file.npx shadcn@latest add button card dialog.npx shadcn@latest add <name> --overwrite.