shadcn-management

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn Component Management

Shadcn组件管理

Prerequisites

前置条件

Verify project setup:

shadcn___get_project_registries

If no components.json exists, instruct user:

npx shadcn@latest init

验证项目配置：

shadcn___get_project_registries

如果不存在components.json文件，请指导用户执行：

npx shadcn@latest init

Quick Add Workflow

快速添加流程

For simple component additions (e.g., "add a date picker"):

Search - Find component in registry:

shadcn___search_items_in_registries(registries, query)

View - Get implementation details:

shadcn___view_items_in_registries(items: ["@shadcn/component-name"])

Examples - Get usage demo:

shadcn___get_item_examples_from_registries(registries, query: "component-demo")

Install - Get add command:

shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])

Output - Provide installation command and example code

适用于简单组件添加场景（例如："添加日期选择器"）：

搜索 - 在组件库中查找目标组件：

shadcn___search_items_in_registries(registries, query)

查看 - 获取组件实现细节：

shadcn___view_items_in_registries(items: ["@shadcn/component-name"])

示例 - 获取组件使用演示：

shadcn___get_item_examples_from_registries(registries, query: "component-demo")

安装 - 获取组件添加命令：

shadcn___get_add_command_for_items(items: ["@shadcn/component-name"])

输出 - 提供安装命令及示例代码

Complex Build Workflow

复杂构建流程

For multi-component features (e.g., "build a login form"), see references/workflows.md.

When to use Complex Build:

Feature requires 3+ components
Need component hierarchy planning
Building complete sections (forms, dashboards, modals)

针对需要多组件的功能（例如："构建登录表单"），请参考references/workflows.md。

适用复杂构建的场景：

功能需要3个及以上组件
需要规划组件层级结构
构建完整的页面区块（表单、仪表盘、弹窗等）

Component Naming Patterns

组件命名规则

Common search queries:

Forms:
```
form
```
,
```
input
```
,
```
select
```
,
```
checkbox
```
,
```
radio-group
```
Layout:
```
card
```
,
```
dialog
```
,
```
sheet
```
,
```
drawer
```
,
```
tabs
```
Feedback:
```
alert
```
,
```
toast
```
,
```
skeleton
```
,
```
progress
```
Navigation:
```
button
```
,
```
dropdown-menu
```
,
```
navigation-menu
```

Example queries for demos:

form-demo

card-with-form

dialog-demo

常见搜索关键词：

表单类：
```
form
```
、
```
input
```
、
```
select
```
、
```
checkbox
```
、
```
radio-group
```
布局类：
```
card
```
、
```
dialog
```
、
```
sheet
```
、
```
drawer
```
、
```
tabs
```
反馈类：
```
alert
```
、
```
toast
```
、
```
skeleton
```
、
```
progress
```
导航类：
```
button
```
、
```
dropdown-menu
```
、
```
navigation-menu
```

演示示例的查询关键词：

form-demo

、

card-with-form

、

dialog-demo

After Implementation

实现后操作

Always run audit:

shadcn___get_audit_checklist

完成后务必执行审核：

shadcn___get_audit_checklist

Custom Styling & Theming

自定义样式与主题

Shadcn provides structural foundation with default styling. For custom aesthetics:

Invoke
frontend-design
skill when:

User wants unique/distinctive visual style beyond default shadcn theme
Need custom typography, color schemes, or motion effects
Building landing pages or marketing sites requiring creative design
User mentions "custom styling", "unique design", "not generic"

Workflow:

Use
```
shadcn-management
```
for component structure and composition
Invoke
```
frontend-design
```
for visual customization:
- Custom CSS variables in
```
globals.css
```
- Tailwind theme extensions in
```
tailwind.config.js
```
- Animation and micro-interaction enhancements
- Typography and color refinements

Customization targets:

```
@/app/globals.css
```
- CSS variables, custom fonts
```
tailwind.config.js
```
- theme colors, fonts, animations
Component-level className overrides

Shadcn提供带默认样式的结构基础。如需自定义视觉效果：

当以下情况时调用
frontend-design
技能：

用户想要超越shadcn默认主题的独特视觉风格
需要自定义排版、配色方案或动效
构建需要创意设计的落地页或营销站点
用户提及"自定义样式"、"独特设计"、"非通用风格"

流程：

使用
```
shadcn-management
```
处理组件结构与组合
调用
```
frontend-design
```
进行视觉定制：
- 在
```
globals.css
```
  中配置自定义CSS变量
- 在
```
tailwind.config.js
```
  中扩展Tailwind主题
- 增强动画与微交互效果
- 优化排版与配色

自定义目标文件：

```
@/app/globals.css
```
- CSS变量、自定义字体
```
tailwind.config.js
```
- 主题颜色、字体、动画
组件层级的className覆盖