본문으로 건너뛰기
cccskills
무료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 散落到业务代码里。

流程

  1. 识别现状:确认 Tailwind 版本、配置位置、暗色模式策略、组件库、CSS 变量、设计 token 和 class 合并工具。
  2. 建立 token 边界:颜色、间距、圆角、阴影、字体、z-index 和断点优先从项目 token 或 theme.extend 派生。
  3. 设计组件变体:按钮、输入框、卡片、弹窗、表格等基础组件用集中 variant API 表达尺寸、语义、状态和密度。
  4. 控制 class 复杂度:重复组合沉淀为组件、slot、variant 或局部 helper;不要把长 class 字符串复制到多个页面。
  5. 处理主题和暗色模式:明确 class、data-theme 或 CSS 变量方案,避免首次渲染闪烁和对比度回归。
  6. 接入响应式:移动优先组织 utility;复杂布局交给响应式布局工作流,不要只靠堆叠断点前缀碰运气。
  7. 验证样式结果:检查 hover、active、focus-visible、disabled、loading、selected、invalid、dark 和不同断点。

约束

  • 不把 Tailwind class 当作设计系统本身;真正的系统是 token、组件 API、状态矩阵和使用约束。
  • 不为单个页面随意扩展全局 token;新增 token 必须有语义名称和复用场景。
  • 不使用拼接的动态 class 破坏构建扫描;必要时使用 safelist、映射表或 variant 工具。
  • 不在组件外部覆盖基础组件内部结构来实现变体。
  • 不让暗色模式只靠反色;状态色、边框、阴影、图表和图片都要重新检查。

预期输出

输出 Tailwind token 映射、主题配置边界、组件 variant 设计、class 复用策略、暗色模式和响应式验证结果。完成后样式应能被项目组件复用、可搜索、可测试,并与设计系统规则一致。

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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일 업데이트

用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归;中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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일 업데이트

用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践,并通过原创的项目内重设计转化为当前项目能力,而不是复制原实现。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

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일 업데이트

bovinphang의 스킬 모두 보기

이 스킬의 문제 신고