Agent Skills Hub

components-build

根據 components.build 規範構建現代化、可組合且易於存取的 React UI 元件。適用於設計系統、元件庫及可重用 UI 架構的開發與維護。

pencil-ui-design

使用 Pencil MCP 進行工業級 UI 設計的完整工作流程與組件庫，包含顏色、字體、間距與陰影的標準化設計規範。

figma-design-to-code

使用 TemPad Dev MCP 將 Figma 設計轉換為符合專案規範的 UI 代碼，精確處理標記、樣式與設計標記整合。

agents-md-generator

為 AI 編碼代理生成分層且節省 token 的 AGENTS.md 檔案，提供全庫上下文與專案特定指南。

tailwind-config

管理 monorepo 中的 Tailwind CSS 設定、自訂設計標記、主題與設計系統工具。

designer

React 與 Next.js 專家級 UI/UX 設計助手。提供視覺審核、設計系統架構，以及 Tailwind CSS 與 shadcn/ui 的實作指導，協助打造專業級 Web 應用程式。

ui-design-system

專業 UI 設計系統工具包，涵蓋設計代幣生成、組件架構、響應式設計計算及開發人員交接文檔，確保視覺一致性。

elegant-design

使用 React、Next.js 與 shadcn/ui 等現代設計系統，建構專業、易於使用且具響應式的介面。專注於開發者工具、聊天介面及即時串流組件。

design-review

設計師級別品質保證：自動檢測並修復視覺不一致、間距、階層問題與 UI 打磨。透過前後對比截圖進行迭代驗證。

core-components

核心元件庫與設計系統模式，透過設計權杖 (design tokens) 確保 UI 開發的一致性。

color-palette

從單一十六進位顏色代碼生成完整且易於存取的色彩系統。包含 11 階色譜 (50-950)、語意標記、深色模式變體及 Tailwind v4 CSS 輸出。

figma

利用 Figma MCP 伺服器獲取設計數據、提取資源，並將 Figma 節點轉換為符合設計系統規範的 React 與 Tailwind 程式碼。