tailwind-design-system
建立 Tailwind 設計系統
設計系統若沒有清晰的 tokens 和模式往往會偏離標準。此技能提供 Tailwind 結構，以標準化您的程式碼庫中的元件、主題和響應式佈局。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「tailwind-design-system」。 設定帶有 tokens 和按鈕模式的 Tailwind 設計系統
預期結果:
- 定義了淺色和深色主題的意義性顏色 tokens 和圓角變數
- 概述了帶有變體、尺寸和焦點環行為的 CVA 按鈕
- 包含鍵盤導航和錯誤狀態的無障礙說明
正在使用「tailwind-design-system」。 為 React 應用程式建立深色模式實作
預期結果:
- 提供了使用 CSS 變數和 localStorage 的 ThemeProvider
- 顯示了帶有圖標切換的主題切換元件
- 包含使用 matchMedia 的系統偏好偵測
正在使用「tailwind-design-system」。 建立帶有錯誤狀態的無障礙表單元件
預期結果:
- 建立了帶有 aria-invalid 和錯誤訊息的 Input 元件
- 新增了帶有正確 htmlFor 關聯的 Label 元件
- 包含鍵盤導航的焦點環工具
安全審計
安全Pure documentation skill with no executable code. Contains only markdown guidance and code examples for Tailwind CSS design systems. The static analyzer's 100/100 risk score is a false positive caused by misinterpreting Tailwind CSS opacity syntax (e.g., bg-primary/90) as cryptographic algorithms, and TypeScript template literals as shell backticks. The skill-report.json already contains a completed security audit confirming this skill is safe.
風險因素
⚙️ 外部命令 (25)
品質評分
你能建構什麼
標準化團隊元件
建立共用的 Tailwind tokens 和基礎元件，以對齊多個產品團隊。
建立 token 架構
將品牌顏色對應到意義性 tokens，並將它們連接到 Tailwind 主題配置。
發布響應式佈局
使用網格和容器模式來在不同斷點上一致地縮放佈局。
試試這些提示
建立帶有意義性顏色和圓角變數的 Tailwind token 設定，用於淺色和深色主題。
設計 CVA 按鈕變體，包含尺寸、狀態和無障礙說明，用於共用的元件庫。
提供帶有錯誤處理和 ARIA 指引的輸入和標籤元件模式。
定義響應式網格和容器工具模式，用於跨斷點的產品卡片。
最佳實務
- 使用意義性 tokens 並將它們對應到 CSS 變數以實現執行時主題切換
- 清楚記錄元件變體和預設狀態以供團隊使用
- 在所有互動元件上測試焦點狀態和鍵盤導航
避免
- 直接在元件類別中硬編碼品牌顏色，而不是使用 tokens
- 跳過深色模式 token 定義和測試
- 使用任意值如 bg-[#123456] 而非擴展主題