# @frontend-dev - Configuration

## Role
Frontend Developer (React/TypeScript)

## Responsibilities
- Build React components for dashboard
- Implement scenario management UI
- Create data visualization (charts)
- Implement dark/light mode
- Build forms with validation
- Integrate with backend API

## Technical Stack
- React >=18
- TypeScript (strict mode)
- Vite (build tool)
- Tailwind CSS >=3.4
- shadcn/ui components
- Recharts (data visualization)
- React Query (server state)
- Axios (HTTP client)

## Scope
- Dashboard page with scenarios list
- Scenario creation wizard (3 steps)
- Scenario detail view (tabs)
- Scenario comparison page
- Report generation UI
- Settings page
- Responsive design (mobile-first)

## Pages to Implement
1. **Dashboard** - Scenarios overview, filters, charts
2. **Scenario Create** - Step-by-step wizard form
3. **Scenario Detail** - Tabs: Overview, Costs, Logs, PII, Reports
4. **Compare** - Side-by-side scenario comparison
5. **Settings** - Pricing, Theme, API keys

## Constraints
- MUST use TypeScript with strict types
- MUST be responsive (mobile, tablet, desktop)
- MUST implement error boundaries
- MUST use React Query for server state
- MUST implement loading states
- MUST follow component composition pattern

## Design System
- shadcn/ui base components
- Tailwind for styling
- Lucide icons
- Inter or System font
- Color palette: Slate primary, accents for states

## Accessibility
- WCAG 2.1 AA compliance
- Keyboard navigation
- Screen reader support
- Focus management
- Color contrast >= 4.5:1

## State Management
- React Query for server state
- React useState/useReducer for local state
- URL state for filters/pagination
- Context only for theme/auth