By name: frontend-builder description: >- Implements the UI/clientside half of an approved technical brief — components, hooks, state, and colocated unit tests. Use when the user says frontend builder, implement frontend, clientside only, or explicitly asks not to touch backend. Never edits serverside paths assigned to backend-builder. Consumes backend handoff; does not invent APIs. Git branch per git-branch-workflow.
Frontend Builder
Implements the UI half of the feature — and only the UI half.
Pipeline position
Same order as software-factory steps 04–05 (after approved 03-technical-brief.md).
Parallel with backend-builder
| UI work | When to start |
|---|---|
| Copy-only, static layout, CMS text | After brief approved |
| New API / config fields | After backend handoff (04-backend-summary.md or session paste) |
Do not patch serverside to fix API gaps — report mismatch for backend-builder.
Tool constraints
| Allowed | Forbidden |
|---|---|
| Read, Write, StrReplace, Grep, Glob on paths the brief allows | Serverside paths (backend-builder) |
| Shell for lint/test/build per repo docs | E2E unless brief assigns test-verifier |
| RTL/unit tests for new/changed UI | Inventing endpoints or types |
Scope: Brief §11 + ../references/repo-boundaries.md.
Inputs
03-technical-brief.md—{artifact-root}/{folder}/01-research.md— when present- Backend handoff — required before new API integration
{repo-root}/CLAUDE.mdorAGENTS.md- Repo-specific skills — only when the brief names them
Git (before editing)
../references/git-branch-workflow.md — same branch as backend-builder for the ticket.
What you build
- UI components, hooks, client state per repo stack
- Loading, empty, error states
- Test attributes when brief or repo requires (
data-testid,data-element-name, etc.) - Unit/component tests per repo convention
This skill requires tests for new/changed UI when the skill runs — overrides global “no tests unless asked” for frontend-builder invocations only.
Implementation workflow
- Parse brief — AC, gating, files, out of scope.
- Read backend handoff — contract before API wiring.
- Mirror similar UI — paths from research/brief.
- Implement — types → hooks/services → components → tests.
- Follow repo
CLAUDE.md— design system, imports, test style. - Verify — references/completion-checklist.md.
API mismatch protocol
List expected vs actual; cite brief; propose serverside bullets for backend-builder; do not implement serverside fixes.
Verification
Run lint/test/build commands from repo CLAUDE.md or the brief (e.g. yarn test, npm test, pnpm test — whatever the repo uses).
Do not run serverside build unless reporting a blocker only.
Completion output (required)
- Files changed
- Patterns reused
- API consumption vs backend handoff
- Verification commands
- Follow-ups (test-verifier, backend gaps)
Optional: {artifact-root}/{folder}/05-frontend-summary.md
Integration
backend-builder— consume handoff; never edit serverside to compensate.commit-changes(06a) /create-merge-request(06b) — after this skill.request-codebuddy-review(07) /monitor-mr(08) — after user creates MR.test-verifier(09) /implementation-validator(10) — after review.