tailwind-design-system
建置 Tailwind 設計系統
團隊經常難以在不同產品之間維持 Tailwind 介面的一致性。此技能提供可重複使用的 token、元件、版面配置、主題與無障礙模式。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の 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.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「tailwind-design-system」を使用しています。 為 SaaS dashboard 規劃 Tailwind token system。
期待される結果:
- 針對 background、foreground、primary、secondary、muted、accent、border 與 ring states 的語意化色彩群組。
- 映射相同 token 名稱的 dark mode variables。
- 用於維持一致元件密度的 radius 與 spacing 指引。
「tailwind-design-system」を使用しています。 標準化重複的 buttons 與 cards。
期待される結果:
- 依 purpose、variant、size 與 state 分組的 component inventory。
- 共享 variant naming 與 default states 的建議。
- 針對 focus rings、disabled states 與 readable contrast 的無障礙檢查。
「tailwind-design-system」を使用しています。 改善既有產品中的 responsive layouts。
期待される結果:
- 符合常見 page types 的 container sizes。
- 適用於二、三、四與六欄版面的 grid rules。
- 針對 spacing、wrapping 與 mobile readability 的審查筆記。
セキュリティ監査
安全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.
リスク要因
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。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 スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
設計系統基礎
為新的產品介面規劃語意化 token、dark mode 變數與可重複使用的 Tailwind 慣例。
元件庫標準化
將重複的 Tailwind 標記轉換為具型別且可重複使用的元件，並維持一致的 variants 與狀態。
響應式 UI 整理
透過容器、網格、間距與無障礙模式，改善既有畫面之間的版面一致性。
これらのプロンプトを試す
使用 Tailwind design system skill，為我的 app 提出語意化色彩、間距、radius 與 dark mode tokens。
使用 Tailwind design system skill，為 React TypeScript component library 設計 button、input、card 與 label variants。
使用 Tailwind design system skill，為 dashboard、marketing 與 form pages 定義 responsive container 與 grid patterns。
使用 Tailwind design system skill，稽核我目前的 Tailwind components，並為 tokens、variants、themes 與 accessibility 建立遷移計畫。
ベストプラクティス
- 先使用語意化 tokens，再使用元件特定的 Tailwind classes。
- 保持 component variants 具型別、集中管理且有文件記錄。
- 一併驗證 focus states、ARIA behavior、contrast 與 dark mode。
回避
- 在每個元件內硬編碼品牌色彩。
- 為常見版面選擇加入 arbitrary values。
- 未依專案慣例調整就複製範例元件。
よくある質問
這個技能會建立完整的設計系統嗎？
它可以搭配 Claude、Codex 與 Claude Code 使用嗎？
它假設使用哪些 frameworks？
它包含無障礙指引嗎？
它能協助 dark mode 嗎？
它會自動修改我的程式碼嗎？
開発者情報
作成者
sickn33ライセンス
MIT
Skillstore リビジョン
r2
バージョンに関する注意
作者はバージョンを宣言していません。
参照
ae6ba0f1a47f0b4427a656b2202f2ff34bfea6be
メンテナンスの新しさ
2026/9/9
利用状況
20 ダウンロード · 126 閲覧
ファイル構成