用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归；中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。
日本語の概要は準備中です。原文の説明を表示しています。
bovinphang/frontend-craft222026年9月26日 更新
無料GitHub で公開
fec-tailwind-design-system
用于设计、实现或审查 Tailwind CSS 设计系统、Token 映射、主题扩展、工具类治理、组件变体、暗色模式、响应式工具、safelist 或可维护的 class 组合；中文触发词包括 Tailwind、设计 Token、组件变体、暗色模式、class 管理。
含まれるファイル（2）
- SKILL.md2.5 KB
- references/tailwind-system-patterns.md2.9 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Tailwind 设计系统
适用于用 Tailwind CSS 承载产品设计系统、组件变体和主题规则的前端任务。需要具体配置、variant、class 组织和迁移细节时加载 references/tailwind-system-patterns.md。
用途
让 Tailwind 项目中的 token、主题、组件变体和响应式样式可维护，而不是把一次性 utility class 散落到业务代码里。
流程
- 识别现状：确认 Tailwind 版本、配置位置、暗色模式策略、组件库、CSS 变量、设计 token 和 class 合并工具。
- 建立 token 边界：颜色、间距、圆角、阴影、字体、z-index 和断点优先从项目 token 或
theme.extend派生。 - 设计组件变体：按钮、输入框、卡片、弹窗、表格等基础组件用集中 variant API 表达尺寸、语义、状态和密度。
- 控制 class 复杂度：重复组合沉淀为组件、slot、variant 或局部 helper；不要把长 class 字符串复制到多个页面。
- 处理主题和暗色模式：明确
class、data-theme或 CSS 变量方案，避免首次渲染闪烁和对比度回归。 - 接入响应式：移动优先组织 utility；复杂布局交给响应式布局工作流，不要只靠堆叠断点前缀碰运气。
- 验证样式结果：检查 hover、active、focus-visible、disabled、loading、selected、invalid、dark 和不同断点。
约束
- 不把 Tailwind class 当作设计系统本身；真正的系统是 token、组件 API、状态矩阵和使用约束。
- 不为单个页面随意扩展全局 token；新增 token 必须有语义名称和复用场景。
- 不使用拼接的动态 class 破坏构建扫描；必要时使用 safelist、映射表或 variant 工具。
- 不在组件外部覆盖基础组件内部结构来实现变体。
- 不让暗色模式只靠反色；状态色、边框、阴影、图表和图片都要重新检查。
预期输出
输出 Tailwind token 映射、主题配置边界、组件 variant 设计、class 复用策略、暗色模式和响应式验证结果。完成后样式应能被项目组件复用、可搜索、可测试，并与设计系统规则一致。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.
日本語の概要は準備中です。原文の説明を表示しています。
bovinphang/frontend-craft222026年9月26日 更新
用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践，并通过原创的项目内重设计转化为当前项目能力，而不是复制原实现。
日本語の概要は準備中です。原文の説明を表示しています。
bovinphang/frontend-craft222026年9月26日 更新
Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.
日本語の概要は準備中です。原文の説明を表示しています。
bovinphang/frontend-craft222026年9月26日 更新
Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.
日本語の概要は準備中です。原文の説明を表示しています。
bovinphang/frontend-craft222026年9月26日 更新
用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略；中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。
日本語の概要は準備中です。原文の説明を表示しています。
bovinphang/frontend-craft222026年9月26日 更新