技能 tailwind-design-system
📦
创建一致的设计系统既复杂又耗时。此技能提供了使用 Tailwind CSS、设计令牌和内置可访问性构建可扩展组件库的经过验证的模式。
支持: Claude Codex Code(CC)
1
下载技能 ZIP
2
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
3
开启并开始使用
测试它
正在使用“tailwind-design-system”。 使用 Tailwind CSS 创建按钮
预期结果:
- 使用 CVA 变体创建 Button 组件
- 包括：default、destructive、outline、secondary、ghost、link 变体
- 尺寸选项：default、sm、lg、icon
- 可访问性功能：focus-visible 环、禁用状态
- 使用 TypeScript 接口的类型安全
正在使用“tailwind-design-system”。 为我的应用设置深色模式
预期结果:
- 带有系统偏好检测的 ThemeProvider 组件
- 在 globals.css 中配置的 CSS 变量
- 使用 darkMode: class 扩展的 Tailwind 配置
- 带有太阳/月亮图标的 ThemeToggle 组件
- 用于用户偏好的 localStorage 持久化
安全审计
安全v1 • 2/25/2026
Static analysis detected 78 potential issues, all confirmed as false positives. The 'backtick execution' patterns are Markdown code fences (```) for code samples. URLs are documentation references. localStorage usage is standard theme persistence. No executable code or security risks present.
2
已扫描文件
702
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude
质量评分
38
架构
100
可维护性
87
内容
50
社区
100
安全
91
规范符合性
你能构建什么
初创公司组件库
从头开始为新产品构建完整的组件库，包括具有统一样式的按钮、卡片、表单和对话框。
设计系统迁移
将现有的 CSS 或 styled-components 代码库迁移到 Tailwind CSS，使用适当的设计令牌结构和组件模式。
可访问表单实现
根据 WCAG 指南创建带有适当验证、错误状态和键盘导航的可访问表单组件。
试试这些提示
基础按钮组件
使用 Tailwind CSS 和 CVA 创建一个可复用的 Button 组件。包括 primary、secondary、outline 和 ghost 样式的变体。添加尺寸变体（sm、md、lg）和禁用状态。
设计令牌配置
生成带有语义化颜色令牌的 Tailwind CSS 配置文件。包括 primary、secondary、destructive、muted、accent、background、foreground 和 border 颜色。使用 CSS 变量同时支持浅色和深色模式。
复合卡片组件
使用复合组件模式构建 Card 组件。创建 Card、CardHeader、CardTitle、CardDescription、CardContent 和 CardFooter 子组件。使用 forwardRef 实现正确的 React 组合。
深色模式主题提供者
实现一个完整的深色模式解决方案，包含 ThemeProvider 组件。支持系统偏好检测、localStorage 持久化和手动切换。包括带有太阳/月亮图标的 ThemeToggle 按钮组件。
最佳实践
- 使用 CSS 变量实现运行时主题化和设计令牌
- 使用 CVA 组合变体以实现类型安全的组件 API
- 始终包含 focus-visible 状态以实现键盘可访问性
避免
- 使用任意值（如 h-[500px]）而不是扩展主题
- 直接在组件中硬编码颜色而不是使用语义化令牌
- 构建新组件时跳过深色模式样式
常见问题
什么是 CVA，为什么我应该使用它？
CVA (Class Variance Authority) 是一个用于创建类型安全组件变体的库。它允许你定义基础样式和变体选项，这些选项可以清晰地组合，并具有完整的 TypeScript 支持。
如何向我的设计系统添加自定义颜色？
在 tailwind.config.ts 中使用 CSS 变量扩展 Tailwind 主题。在 globals.css 文件中定义浅色和深色模式下的颜色，以实现完整的主题支持。
我可以将此技能与 vanilla CSS 或其他框架一起使用吗？
此技能专门专注于 Tailwind CSS。对于 vanilla CSS 或其他框架（如 styled-components），需要不同的模式和方法。
如何处理组件可访问性？
始终包含适当的 ARIA 属性、focus 状态和键盘导航。使用语义化 HTML 元素并确保正确的标题层次结构。使用屏幕阅读器进行测试。
什么是复合组件模式？
复合组件协同工作以创建灵活的 UI。示例包括带有 SelectTrigger、SelectValue、SelectContent 的 Select，或带有 CardHeader、CardTitle、CardContent 的 Card。这种模式实现了清晰的组合。
如何从 Bootstrap 或 Material UI 迁移？
首先设置与现有设计匹配的设计令牌。然后逐个迁移组件，从按钮和输入等基础元素开始。使用实现手册中的模式。