技能 tailwind-design-system
📦
tailwind-design-system
内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问
构建 Tailwind 设计系统
团队需要一致的 UI 模式，同时能够在不同产品和屏幕尺寸之间保持灵活性。此技能提供 Tailwind CSS token、组件、variant、深色模式和可访问性模式，用于构建可扩展的设计系统。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "tailwind-design-system" from https://skillstore.io/skills/wshobson-tailwind-design-system.md and its manifest at https://skillstore.io/api/skills/wshobson-tailwind-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“tailwind-design-system”。 为 SaaS 仪表板创建按钮系统。
预期结果:
- 用于 primary、secondary、outline、ghost 和 destructive 按钮的 variant map。
- 用于 default、small、large 和 icon-only 按钮的 size scale。
- 关于焦点环、禁用状态和语义化按钮使用的可访问性指导。
正在使用“tailwind-design-system”。 为现有 Tailwind 应用添加深色模式。
预期结果:
- 用于浅色和深色主题的 CSS variable token 结构。
- 用于解析系统偏好和用户选择的 provider pattern。
- 关于对比度、组件状态和持久化主题行为的测试说明。
正在使用“tailwind-design-system”。 让产品网格响应式且保持一致。
预期结果:
- 带有响应式 breakpoints 的可复用 Grid 和 Container 模式。
- 与设计系统对齐的 gap 和 max-width 选项。
- 用于产品卡片、仪表板和内容布局的使用指导。
安全审计
安全v7 • 2026/7/8 打开版本化报告
All static findings are false positives caused by Markdown fences, JSX template literals, Tailwind class examples, and passive documentation links. No prompt injection, data exfiltration intent, or executable command behavior was found in SKILL.md.
1
已扫描文件
667
分析行数
0
复核项
0
已忽略误报
风险因素
⚙️ 外部命令 (25)
SKILL.md:23-30 SKILL.md:30-34 SKILL.md:34-36 SKILL.md:36-40 SKILL.md:40-87 SKILL.md:87-89 SKILL.md:89-131 SKILL.md:131-137 SKILL.md:137-196 SKILL.md:196-200 SKILL.md:200-285 SKILL.md:285-289 SKILL.md:289-311 SKILL.md:311-316 SKILL.md:316-382 SKILL.md:382-386 SKILL.md:386-460 SKILL.md:460-464 SKILL.md:464-526 SKILL.md:526-530 SKILL.md:530-622 SKILL.md:622-626 SKILL.md:626-643 SKILL.md:643-650 SKILL.md:650
🌐 网络访问 (4)
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/wshobson-tailwind-design-system?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/wshobson-tailwind-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-tailwind-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/wshobson-tailwind-design-system.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学术引用 (APA · BibTeX · CFF)
APA 引用
wshobson. (2026). tailwind-design-system security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7BibTeX 引用
@techreport{wshobson-wshobson-tailwind-design-system-2026,
author = {wshobson},
title = {tailwind-design-system security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "tailwind-design-system security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-tailwind-design-system/audits/7"
identifiers:
- type: other
value: "skillstore:wshobson-tailwind-design-system:audit:7"
description: "Skillstore immutable audit report identifier"
比较变体
2 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
Skillstore 评分最高
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
71
社区
78
规范符合性
你能构建什么
创建组件库
构建具有类型化 variants、一致间距和可预测状态的可复用 Tailwind 组件。
标准化产品 UI
在代码库中用语义化 tokens 和共享布局模式替代一次性的 classes。
添加主题支持
使用 CSS variables 和 Tailwind classes 实现浅色模式、深色模式和系统主题行为。
试试这些提示
启动 token 系统
为我的应用创建一个 Tailwind 设计 token 计划。包括语义化颜色、间距指导、radius 值和深色模式 variables。
构建核心组件
使用 Tailwind CSS 和 CVA 设计 Button、Card、Input 和 Label 组件。包括 variants、sizes、焦点状态和可访问性说明。
重构现有 UI
审查这些 Tailwind 组件，并提出设计系统重构方案。优先考虑语义化 tokens、共享 variants 和减少 class 重复。
规划高级主题化
为浅色、深色和品牌主题创建可扩展的 Tailwind 主题化架构。包括 token 层级、组件契约和迁移步骤。
最佳实践
- 先使用语义化 tokens，再使用组件特定 tokens，以保持主题易于维护。
- 在一个位置定义 variants，使组件状态保持一致。
- 在浅色模式、深色模式、键盘导航和响应式布局中测试组件。
避免
- 不要在每个组件中直接硬编码品牌颜色。
- 当应该存在共享 token 时，不要依赖任意 Tailwind 值。
- 不要发布缺少可见焦点状态和可访问表单反馈的组件。
常见问题
这个技能会帮我安装 Tailwind CSS 吗？
不会。它提供设计系统指导和示例。你必须单独安装和配置项目依赖。
我可以将它与 Claude、Codex 和 Claude Code 一起使用吗？
可以。该技能以指导形式编写，可应用于 Claude、Codex 和 Claude Code 工作流。
它只适用于 React 项目吗？
大多数示例使用 React，但 token 和 Tailwind 架构也可以为其他前端框架提供参考。
它支持深色模式吗？
支持。它包含 CSS variable tokens、基于 class 的深色模式和一个 ThemeProvider 示例。
它包含可访问性指导吗？
包含。它涵盖焦点环、ARIA attributes、表单错误、禁用状态和键盘友好的组件模式。
它能替代完整的设计系统审查吗？
不能。它有助于组织实现，但团队仍然需要设计审查、对比度检查和产品特定验证。