关于 specsfy-specialist-tailwind-css
面向界面开发者的 Tailwind CSS 技能，涵盖从响应式设计约束到无障碍检查和生产构建验证的工作流程。
主要功能
- 01实现移动优先的响应式布局
- 02复用语义化设计令牌
- 03管理变体与动态类名
- 04考虑主题和动态效果偏好
- 05验证浏览器、缩放及极端内容
适用场景
- 01实现响应式 Tailwind 组件
- 02检查无障碍和交互状态
- 03排查缺失的生成 CSS
- 04验证高缩放及窄屏布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/specsfy-specialist-tailwind-css确认已加载。
附带文件agents/openai.yamlreferences/standards.md
详细介绍
Tailwind CSS
流程
- 确认版本、集成方式、令牌来源和现有组件。
- 将布局和状态转换为响应式约束。
- 优先复用语义令牌，而非任意值。
- 采用移动优先的方式实现交互状态和用户偏好。
- 仅在存在语义单元时提取组件，而非单纯因为视觉重复。
- 检查冲突、动态类和生成的 CSS。
- 验证浏览器、主题、缩放和极端尺寸。
模式
- 将颜色、间距、圆角和排版定义为带有意图名称的令牌。
- 使用变体表示状态；不要将行为隐藏在不透明的拼接中。
- 避免将
@apply作为通用组件的替代方案。 - 确保构建过程能够检测到动态构造的类。
- 有意识地处理深色模式、减少动态效果、高对比度和强制颜色。
- 优先采用流式布局；当组件依赖容器时，优先使用容器查询。
- 不要在缺乏新增令牌依据的情况下增加任意值。
验证
- 执行生产构建并检查缺失的样式。
- 检查视口、容器、200/400% 缩放、主题和长内容。
- 检查悬停、可见焦点、禁用、加载、错误和选中状态。
- 检查对比度和减少动态效果的偏好。
请阅读 references/standards.md，了解令牌、 响应式设计、变体、无障碍和迁移。
评论
支持 Markdown