Agent Skills Hub

design

協作式 UI 設計、線框圖繪製與 Tailwind 優先的程式碼優化，打造獨特且高品質的介面，避免生成式 AI 的通用設計模式。

ui-design

一個專門用於生成單文件 HTML 使用者介面的工具，內建 Tailwind CSS，非常適合快速原型製作、UI 探索和設計靈感參考。

Building Frontend Dashboards

使用 TypeScript、shadcn/ui、TanStack Query 和 Supabase 建構響應式 React 儀表板。適用於製作 KPI 卡片、數據表格、Recharts 圖表及 event-studio 管理後台。

interface-design

為實用型應用程式提供介面設計指引，專注於儀表板、管理面板與數據密集型介面，採用以組件庫為先的開發模式。

frontend-design-pro

打造價值 $50,000 美元級別的專業前端介面，提供生產級程式碼、精選排版與高品質影像素材整合。

music-theory-visual-design

Harmonic Orbit 音樂理論應用程式的視覺設計與 UI 樣式指南，涵蓋字體、配色系統、間距、動畫及無障礙設計標準。

core-components

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

design-excellence

一套設計系統與反模式指南，讓 AI 生成的介面更具人工質感。透過管理色彩、排版、間距與動畫，為 Toh Framework 提供專業的視覺品質。

shadcn-vite-iconify-landing-page

使用 React、Vite、TypeScript、Tailwind 和 shadcn/ui 構建、審核並迭代高轉化率著陸頁。專注於轉換率優化 (CRO)、首屏結構以及使用 Iconify 圖標的高品質介面設計。

tamagui-best-practices

Tamagui 函式庫架構、設定、編譯器優化與元件模式的最佳實踐。

web-component-design

掌握 React、Vue 和 Svelte 的組件驅動開發。學習進階組合模式、CSS-in-JS 策略及用於可擴展 UI 設計系統的組件 API 設計。

design-system-patterns

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