Agent Skills Hub

frontend-design

構建具有獨特風格、生產級品質的前端介面與網頁元件，強調高美學品質，並避免通用的人工智慧設計模式。

cloudscape-codegen

生成符合 Cloudscape Design System 的 React + TypeScript UI 程式碼，包含輔助功能、響應式佈局及完善的狀態處理。

css-modules

基於 Lightning CSS 或 PostCSS 的 CSS Modules 元件封裝策略，包含 TypeScript 整合與 Vite 設定。

vibe-orchestrator

Lovable 風格 AI 開發工作流程控制器。透過調度專門的子代理，即時生成優質、多頁面且具備動畫效果的應用程式。無需冗長提示，直接啟動開發。

state-management

前端狀態管理指南，涵蓋 Zustand/Pinia 全域儲存、TanStack Query 伺服器狀態以及 URL 狀態處理。

tailwind-config

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

tailwind-design-system

利用 Tailwind CSS v4 建構可擴展的設計系統，包含 CSS 優先配置、設計標記、元件變體與響應式模式。

web-frameworks

全端網頁開發套件，整合 Next.js (SSR/RSC/App Router)、Turborepo 單體庫管理及 RemixIcon 圖示庫。專為現代 React 開發、高效能構建與可擴展架構設計。

design-system-patterns

掌握設計系統架構：實作設計標記 (design tokens)、多品牌主題、組件庫以及自動化設計轉程式碼流程，建立可擴展的 UI 基礎。

react-typescript

包含 React 19 與 TypeScript 的生產級開發模式，涵蓋 Hooks、狀態管理、TanStack Query、Zod 表單驗證及效能優化工作流程。

figma-design-to-code

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

ui-design-system

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