技能 tailwind-design-system
📦
tailwind-design-system
內容修訂 r1 安全 ⚙️ 外部命令🌐 網路存取
建置 Tailwind 設計系統
團隊需要一致的 UI 模式，同時能在不同產品與螢幕尺寸之間保持彈性。此技能提供 Tailwind CSS 權杖、元件、變體、深色模式與無障礙模式，用於可擴展的設計系統。
支援: 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 按鈕的變體對應表。
- default、small、large 與 icon-only 按鈕的尺寸級距。
- 焦點環、停用狀態與語意化按鈕使用方式的無障礙指引。
正在使用「tailwind-design-system」。 將深色模式新增至既有 Tailwind 應用程式。
預期結果:
- 適用於淺色與深色主題的 CSS 變數權杖結構。
- 用於解析系統偏好與使用者選擇的 provider 模式。
- 關於對比、元件狀態與持久化主題行為的測試注意事項。
正在使用「tailwind-design-system」。 讓產品網格具備響應式且保持一致。
預期結果:
- 具有響應式中斷點的可重複使用 Grid 與 Container 模式。
- 符合設計系統的間距與 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
規範符合度
你可以打造什麼
建立元件庫
使用具型別的變體、一致的間距與可預期的狀態，建置可重複使用的 Tailwind 元件。
標準化產品 UI
在整個程式碼庫中，以語意化權杖與共用版面模式取代一次性的 class。
新增主題支援
使用 CSS 變數與 Tailwind class 實作淺色模式、深色模式與系統主題行為。
試試這些提示
開始建立權杖系統
為我的應用程式建立 Tailwind 設計權杖計畫。包含語意化色彩、間距指引、圓角值與深色模式變數。
建置核心元件
使用 Tailwind CSS 和 CVA 設計 Button、Card、Input 和 Label 元件。包含變體、尺寸、焦點狀態與無障礙注意事項。
重構既有 UI
檢視這些 Tailwind 元件並提出設計系統重構方案。優先考量語意化權杖、共用變體，以及減少 class 重複。
規劃進階主題化
為淺色、深色與品牌主題建立可擴展的 Tailwind 主題化架構。包含權杖階層、元件契約與遷移步驟。
最佳實務
- 先使用語意化權杖，再使用元件專屬權杖，以保持主題可維護。
- 在單一位置定義變體，讓元件狀態保持一致。
- 在淺色模式、深色模式、鍵盤導覽與響應式版面中測試元件。
避免
- 不要在每個元件中直接硬編碼品牌色彩。
- 當應有共用權杖時，不要依賴任意 Tailwind 值。
- 不要發布缺少可見焦點狀態與無障礙表單回饋的元件。
常見問題
這個技能會幫我安裝 Tailwind CSS 嗎？
不會。它提供設計系統指引與範例。你必須另外安裝並設定專案相依套件。
我可以將它用於 Claude、Codex 和 Claude Code 嗎？
可以。此技能以指引形式撰寫，可套用於 Claude、Codex 和 Claude Code 工作流程。
它只適用於 React 專案嗎？
大多數範例使用 React，但權杖與 Tailwind 架構也可供其他前端框架參考。
它支援深色模式嗎？
支援。它包含 CSS 變數權杖、基於 class 的深色模式，以及 ThemeProvider 範例。
它包含無障礙指引嗎？
包含。它涵蓋焦點環、ARIA 屬性、表單錯誤、停用狀態，以及適合鍵盤操作的元件模式。
它能取代完整的設計系統稽核嗎？
不能。它有助於規劃實作結構，但團隊仍需要設計審查、對比檢查與產品專屬驗證。