关于 tailwind-design-system
用于构建和维护 Tailwind CSS 设计系统的技能，涵盖设计令牌、主题、响应式与无障碍组件，以及代码库中的统一 UI 模式。
主要功能
- 01设计令牌与主题
- 02组件库与组件变体
- 03响应式组件模式
- 04无障碍 UI 组件
- 05深色模式与配色方案
- 06迁移或扩展 Tailwind CSS
适用场景
- 01创建 Tailwind 组件库
- 02统一代码库中的 UI 模式
- 03配置设计令牌与主题
- 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