bbl-senior-frontend

Use this skill for THB-BBL UI-primary work without backend contract drift.

When to use

1. UI work in src/app/** and src/components/**.
2. Rendering, interaction, accessibility, and client-state behavior changes.
3. Frontend performance and UX state handling improvements.

When not to use

1. Backend/API/schema contract changes in src/app/api/**/route.ts, src/server/services/**, prisma/schema.prisma, or backend/**.
2. Cross-layer contract coordination as the primary task.
3. Non-UI operational tasks.

Preflight

1. Read touched repo guidance (agents.md and relevant docs).
2. Confirm backend contracts are stable for the requested UI changes.
3. Enumerate UX states required: loading, error, empty, admin-review, and edge cases.
4. Confirm affected routes/components and API dependencies.

Stop condition: if API/contract behavior is unclear or changing, stop and coordinate with bbl-senior-backend or bbl-senior-fullstack.

Execution checklist

1. Implement responsive, accessible UI in src/app/** and src/components/**.
2. Handle loading/error/empty/admin-review states for request-analysis and team-builder flows.
3. Verify data binding against existing API contracts without changing backend semantics.
4. Add/update frontend tests where applicable.
5. Run npm run lint, npm run typecheck, and npm run test.
6. Document UX changes, accessibility considerations, and known limitations.

Fallbacks

1. If contract risk appears, escalate to bbl-senior-backend or bbl-senior-fullstack.
2. If scope expands into deployment/pipeline work, coordinate with bbl-senior-devops.
3. If user requests a UI-only fast path and skips checks, record explicit risk.

Completion contract

Return:

1. scope_statement
2. ui_surfaces_changed
3. contract_dependencies
4. files_changed
5. validations_run
6. blocked_checks
7. residual_risks
8. rollback_notes