技能 tailwind-design-system
📦
tailwind-design-system
内容修订 r2 安全 ⚙️ 外部命令
构建 Tailwind 设计系统
团队通常很难在多个产品中保持 Tailwind 界面一致。此技能提供可复用的令牌、组件、布局、主题和可访问性模式。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "tailwind-design-system" from https://skillstore.io/skills/sickn33-tailwind-design-system.md and its manifest at https://skillstore.io/api/skills/sickn33-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 仪表板规划 Tailwind 令牌系统。
预期结果:
- 用于 background、foreground、primary、secondary、muted、accent、border 和 ring 状态的语义化颜色组。
- 映射相同令牌名称的深色模式变量。
- 用于保持组件密度一致的圆角和间距指导。
正在使用“tailwind-design-system”。 标准化重复的按钮和卡片。
预期结果:
- 按用途、变体、尺寸和状态分组的组件清单。
- 关于共享变体命名和默认状态的建议。
- 针对焦点环、禁用状态和可读对比度的可访问性检查。
正在使用“tailwind-design-system”。 改进现有产品中的响应式布局。
预期结果:
- 与常见页面类型匹配的容器尺寸。
- 适用于两列、三列、四列和六列布局的网格规则。
- 关于间距、换行和移动端可读性的审查备注。
安全审计
安全v5 • 2026/9/6 打开版本化报告
All nine static findings are false positives caused by TypeScript syntax, Markdown backticks, and ordinary design-system examples. No executable shell behavior, system reconnaissance, prompt injection, exfiltration intent, or other semantic security risk was found.
2
已扫描文件
708
分析行数
0
复核项
0
已忽略误报
风险因素
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/sickn33-tailwind-design-system/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/sickn33-tailwind-design-system?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/sickn33-tailwind-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-tailwind-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/sickn33-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 引用
sickn33. (2026). tailwind-design-system security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-tailwind-design-system/audits/5BibTeX 引用
@techreport{sickn33-sickn33-tailwind-design-system-2026,
author = {sickn33},
title = {tailwind-design-system security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/sickn33-tailwind-design-system/audits/5},
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 5)"
version: "unspecified"
type: report
authors:
- name: "sickn33"
date-released: "2026-09-06"
url: "https://skillstore.io/skills/sickn33-tailwind-design-system/audits/5"
identifiers:
- type: other
value: "skillstore:sickn33-tailwind-design-system:audit:5"
description: "Skillstore immutable audit report identifier"
比较变体
2 个可安装变体每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。
为什么此变体排名第一
Skillstore 评分最高
Skillstore 评分
评分依据 证据置信度: 高 55
架构
85
可维护性
87
内容
69
社区
83
规范符合性
你能构建什么
设计系统基础
为新的产品界面规划语义化令牌、深色模式变量和可复用的 Tailwind 约定。
组件库标准化
将重复的 Tailwind 标记转换为带有一致变体和状态的类型化可复用组件。
响应式 UI 清理
通过容器、网格、间距和可访问性模式提升现有页面之间的布局一致性。
试试这些提示
映射设计令牌
使用 Tailwind 设计系统技能，为我的应用提出语义化颜色、间距、圆角和深色模式令牌。
创建组件变体
使用 Tailwind 设计系统技能，为 React TypeScript 组件库设计 button、input、card 和 label 变体。
标准化响应式布局
使用 Tailwind 设计系统技能，为 dashboard、marketing 和 form 页面定义响应式容器和网格模式。
重构现有 UI 系统
使用 Tailwind 设计系统技能，审计我当前的 Tailwind 组件，并为令牌、变体、主题和可访问性创建迁移计划。
最佳实践
- 优先使用语义化令牌，再使用组件特定的 Tailwind 类。
- 保持组件变体类型化、集中管理并有文档说明。
- 同时验证焦点状态、ARIA 行为、对比度和深色模式。
避免
- 在每个组件中硬编码品牌颜色。
- 为常见布局选择添加任意值。
- 不适配项目约定就直接复制示例组件。
常见问题
此技能会创建完整的设计系统吗？
它提供模式、示例和实现指导。你仍需要选择最终令牌、组件和审查标准。
它可以与 Claude、Codex 和 Claude Code 配合使用吗？
可以。报告列出了对 Claude、Codex 和 Claude Code 的支持。
它假设使用哪些框架？
示例侧重于 React、TypeScript、Tailwind CSS、CVA、Radix patterns 和常见工具辅助函数。
它包含可访问性指导吗？
包含。它涵盖焦点环、ARIA 错误消息、标签、禁用状态和键盘友好的组件结构。
它能帮助处理深色模式吗？
可以。它包含 CSS 变量主题、主题 provider 模式和主题切换模式。
它会自动修改我的代码吗？
不会。它是一项用于指导实现和审查的教学型技能。
开发者详情
作者
sickn33许可证
MIT
Skillstore 修订
r2
版本提示
作者未声明版本。
引用
ae6ba0f1a47f0b4427a656b2202f2ff34bfea6be
维护新鲜度
2026/9/6
使用量
19 次下载 · 126 次浏览
文件结构