Agent Skills Hub

state-management

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

color-palette

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

webpack

Webpack 前端開發參考工具。提供配置指南、故障排除、性能優化技巧及最佳實踐，協助開發者高效管理前端構建專案。

rivetkit-client-react

RivetKit 官方 React 客戶端。提供 useActor 和 createRivetKit 等 Hook，協助開發連接 Rivet Actor 的即時 React 應用程式。

tailwind-design-system

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

frontend-design-review

評估、審核並構建具有高品質設計、符合無障礙標準及設計系統規範的生產級前端介面。

icon-set-generator

為網站和應用程式生成具備一致視覺風格、線條粗細與密度的專業 SVG 圖示集，打造獨特的品牌 UI 識別。

api-spec-analyzer

分析 OpenAPI 規範以產生 TypeScript 介面、API 服務模式及實作指南，協助前端開發人員進行後端整合。

testing-frontend

自動化前端組件測試、使用者互動模擬、API 模擬，以及設置 Vitest、React Testing Library 與 Vue Test Utils。

react-patterns

實現 React 19 模式：React Compiler、Server Actions、表單與新 hook（如 'use'）。指導在 Actions 與 TanStack Query 之間進行變更處理的決策。

interaction-design

設計並實作微互動、動態設計與轉場效果。用於提升 UI 精緻度、實現載入狀態，並創造直觀、令人愉悅的用戶反饋體驗。

web-component-design

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