Building Frontend Dashboards

This skill serves as an expert assistant for building, managing, and maintaining high-quality React dashboards specifically tailored for the event-studio project architecture. It provides a standardized workflow that integrates React 18, Vite, and TypeScript to ensure type safety and performance throughout the frontend lifecycle. By leveraging the project's specific conventions, such as storing components in src/components/ui/ and hooks in features/[feature]/hooks/, this skill helps developers maintain a consistent codebase while rapidly implementing complex data-driven views.

• Expert-level integration of TanStack Query for robust server-state management, caching, and background data fetching in Supabase-backed applications.

• Implementation support for professional data visualizations using Recharts, including line charts, bar charts, and pie charts tailored for analytics dashboards.

• Built-in patterns for creating complex data grids, including paginated tables, row actions, status badges, and filterable UI components based on shadcn/ui primitives.

• Automated checklist-driven development process, guiding users from requirement gathering and hook creation to routing and state testing.

• Pre-defined layout templates for various dashboard types such as sidebar-driven navigation, tabbed analytics views, and responsive mobile-first administrative interfaces.

• When invoking this skill, provide context on the specific data source (e.g., Supabase events or bookings table) and the desired visual representation (e.g., metric cards, trend charts).

• Follow the recommended project structure by placing all custom data-fetching logic inside the features folder to ensure modularity.

• Utilize the provided reference for reusable UI components like MetricCard, DataTable, and EmptyState to accelerate development and ensure design consistency.

• Always remember to validate RLS policies when querying Supabase data to ensure security standards are met.

• The skill is optimized for developers needing to build event management interfaces, booking dashboards, financial reporting tools, and general data-heavy admin panels within the event-studio ecosystem.