Building Frontend Dashboards

此技能作為開發者的專家助手，專門用於構建、管理與維護 event-studio 專案架構下的高品質 React 儀表板。它提供標準化的工作流程，整合 React 18、Vite 與 TypeScript，確保前端開發過程中的型別安全與效能。透過遵循專案特定規範，例如將元件存放在 src/components/ui/ 以及 Hooks 存放在 features/[feature]/hooks/，此技能協助開發者保持程式碼庫的一致性，同時快速實現複雜的數據驅動介面。

• 深度整合 TanStack Query，為基於 Supabase 的應用程式提供強大的伺服器狀態管理、快取處理與背景數據抓取。

• 支援使用 Recharts 實作專業的數據視覺化，包含適合分析儀表板的折線圖、長條圖與圓餅圖。

• 內建複雜數據表格的實作模式，包含分頁表格、行操作、狀態標籤與基於 shadcn/ui 原型元件的過濾介面。

• 提供檢查清單驅動的開發流程，引導使用者完成從需求分析、Hook 建立到路由設置與狀態測試的完整開發週期。

• 涵蓋多種儀表板佈局範本，例如側邊欄導航、頁籤式分析視圖以及行動優先的響應式管理後台介面。

• 使用此技能時，請提供具體的數據來源情境（如 Supabase 的活動或預約資料表）以及期望的視覺呈現方式（如 KPI 卡片、趨勢圖）。

• 請遵循推薦的專案結構，將所有自訂的數據抓取邏輯放置於 features 資料夾中，以確保模組化。

• 利用提供的可重用 UI 元件參考，例如 MetricCard、DataTable 與 EmptyState，以加速開發並確保設計一致性。

• 務必在查詢 Supabase 資料時驗證 RLS 政策，以確保符合安全性標準。

• 此技能專為需要在 event-studio 生態系統中構建活動管理介面、預約儀表板、財務報表工具與通用數據後台的開發者所優化。