菜单
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.