ab4c537c16
Add specialized agent configurations for mockupAWS development: - @spec-architect: Software architect and specification lead - @db-engineer: PostgreSQL schema and Alembic migrations - @backend-dev: FastAPI development and services - @frontend-dev: React dashboard and UI components - @devops-engineer: Docker and CI/CD setup - @qa-engineer: Testing strategy and E2E tests Update prompt-zero.md with complete team and project structure. Add prompt-team-standup.md for team kickoff and coordination. Each agent has detailed configuration with: - Role and responsibilities - Technical stack - Scope and constraints - Output requirements - Communication style
67 lines
1.7 KiB
Markdown
67 lines
1.7 KiB
Markdown
# @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
|