技能使像 Claude Code 这样的 AI 助手能够获得关于 shadcn/ui 的项目相关上下文。当安装后，你的 AI 助手将知道如何使用适合你项目的正确 API 和模式来查找、安装、组合和自定义组件。
🌐 Skills give AI assistants like Claude Code project-aware context about shadcn/ui. When installed, your AI assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.
例如，你可以让你的人工智能助手：
🌐 For example, you can ask your AI assistant to:
- 添加一个包含电子邮件和密码字段的登录表单。
- 创建一个包含更新个人资料信息表单的设置页面。
- 构建一个带侧边栏、统计卡片和数据表格的仪表板。
- 切换到 --preset [CODE]
- 你能添加一个来自@tailark的英雄吗？
该技能会读取你项目的 components.json，并向助手提供你的框架、别名、已安装的组件、图标库和基础库，以便它能够一次生成正确的代码。
🌐 The skill reads your project's components.json and provides the assistant with your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.
安装
🌐 Install
pnpm dlx skills add shadcn/ui
这会将 shadcn 技能安装到你的项目中。安装后，当你的 AI 助手使用 shadcn/ui 组件时，它会自动加载该技能。
🌐 This installs the shadcn skill into your project. Once installed, your AI assistant automatically loads it when working with shadcn/ui components.
在 skills.sh 上了解更多技能信息。
🌐 Learn more about skills at skills.sh.
包含内容
🌐 What's Included
该技能为你的 AI 助手提供以下知识：
🌐 The skill provides your AI assistant with the following knowledge:
项目背景
🌐 Project Context
在每次交互中，该技能都会运行 shadcn info --json 来获取你项目的配置：框架、Tailwind 版本、别名、基础库（radix 或 base）、图标库、已安装的组件以及已解析的文件路径。
🌐 On every interaction, the skill runs shadcn info --json to get your project's configuration: framework, Tailwind version, aliases, base library (radix or base), icon library, installed components, and resolved file paths.
命令行接口命令
🌐 CLI Commands
所有 CLI 命令的完整参考：init、add、search、view、docs、diff、info 和 build。包括标志、模拟运行模式、智能合并工作流、预设和模板。
🌐 Full reference for all CLI commands: init, add, search, view, docs, diff, info, and build. Includes flags, dry-run mode, smart merge workflows, presets, and templates.
主题和自定义
🌐 Theming and Customization
CSS 变量、OKLCH 颜色、夜间模式、自定义颜色、边框半径和组件变体的工作原理。包括针对 Tailwind v3 和 v4 的使用指南。
🌐 How CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants work. Includes guidance for both Tailwind v3 and v4.
注册表编写
🌐 Registry Authoring
如何构建和发布自定义组件注册表：registry.json 格式、项目类型、文件对象、依赖、CSS 变量、构建、托管和用户配置。
🌐 How to build and publish custom component registries: registry.json format, item types, file objects, dependencies, CSS variables, building, hosting, and user configuration.
MCP 服务器
🌐 MCP Server
shadcn MCP 服务器的设置和工具，该服务器允许 AI 助手从注册表中搜索、浏览和安装组件。
🌐 Setup and tools for the shadcn MCP server, which lets AI assistants search, browse, and install components from registries.
运作方式
🌐 How It Works
- 项目检测 — 当技能在你的项目中发现
components.json文件时，它会激活。 - 上下文注入 — 它运行
shadcn info --json来读取你的项目配置，并将结果注入助手的上下文中。 - 模式执行 — 助手遵循 shadcn/ui 的组合规则：在表单中使用
FieldGroup，在选项集、语义色彩中使用ToggleGroup，并使用正确的基于具体的 API。 - 组件发现 — 助手使用
shadcn docs、shadcn search或 MCP 工具在生成代码之前查找组件及其文档。
了解更多
🌐 Learn More