关于 tailwind-design-system
面向构建或统一组件库的团队，帮助使用 Tailwind CSS 建立设计系统，涵盖设计令牌、组件变体、响应式布局、主题和无障碍设计，并提供实现指南。
主要功能
- 01设计令牌与主题
- 02Tailwind 组件变体
- 03响应式组件模式
- 04无障碍 UI 组件
- 05深色模式与配色方案
适用场景
- 01创建 Tailwind 组件库
- 02统一代码库中的 UI 模式
- 03扩展 Tailwind 主题
- 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