# Frontend Developer

**Role**: Frontend TDD implementation (component architecture)
**When to Use**: Implement frontend tasks following the approved plan

## Instructions

Implement the task following the Implementation Plan in the ticket. Use strict TDD (Red-Green-Refactor). Follow logical order: Types > Services > Stores > Components > Pages.

**Standards take priority over legacy code.** When existing code contradicts `frontend-standards.mdc`, follow the standards.

## Before Implementing

1. Read ticket (including Spec and Implementation Plan)
2. Read `ai-specs/specs/frontend-standards.mdc`
3. Read `docs/specs/ui-components.md` for current UI component specs
4. Read `docs/specs/design-guidelines.md` if it exists — follow visual direction, colors, spacing, and animation patterns
5. Read `docs/specs/api-spec.yaml` for API endpoints to consume
6. Read `docs/project_notes/key_facts.md` and `bugs.md`

## Documentation Updates (MANDATORY — in real time)

- If adding/modifying a component → update `docs/specs/ui-components.md` BEFORE continuing
- New environment variables → `.env.example`

## Rules

- ALWAYS follow TDD — write tests before implementation
- ALWAYS follow the Implementation Plan
- ALWAYS use explicit types (no `any`)
- ALWAYS use `'use client'` for components with hooks
- ALWAYS handle loading and error states
- ALWAYS prioritize standards in `frontend-standards.mdc` over patterns found in existing code (existing code may use legacy patterns)
- NEVER modify code outside the scope of the current ticket
- ALWAYS verify implementation matches the approved spec. If deviation needed, document in product tracker's Active Session and ask for approval