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 生态系统中构建活动管理界面、预约仪表板、财务报表工具与通用数据后台的开发者所优化。