关于 tailwind-design-system
用于使用 Tailwind CSS 构建生产级设计系统的技能，面向组件库与产品界面开发。涵盖设计令牌、组件变体、响应式模式、无障碍设计和主题设置。
主要功能
- 01构建设计令牌与主题
- 02设计组件变体
- 03创建响应式组件模式
- 04纳入无障碍实践
- 05设置深色模式与配色方案
适用场景
- 01使用 Tailwind CSS 创建组件库
- 02统一代码库中的界面模式
- 03迁移或扩展 Tailwind CSS
- 04为界面设置主题与深色模式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/tailwind-design-system确认已加载。
附带文件resources/implementation-playbook.md
详细介绍
Tailwind 设计系统
使用 Tailwind CSS 构建可用于生产环境的设计系统，包括设计令牌、组件变体、响应式模式和无障碍功能。
使用此技能的场景
- 使用 Tailwind 创建组件库
- 实现设计令牌和主题
- 构建响应式且无障碍的组件
- 在代码库中统一 UI 模式
- 迁移到 Tailwind CSS 或扩展其功能
- 设置深色模式和配色方案
不要使用此技能的场景
- 任务与 Tailwind 设计系统无关
- 需要此范围之外的其他领域知识或工具
说明
- 明确目标、约束和所需输入。
- 应用相关最佳实践并验证结果。
- 提供可执行的步骤和验证方法。
- 如果需要详细示例，请打开
resources/implementation-playbook.md。
资源
resources/implementation-playbook.md：提供详细模式和示例。
评论
支持 Markdown