build-frontend

Implement and verify the complete accessible frontend journey against the agreed backend contract.

SKILL.md

GitHub
<!-- Generated by mstack from Misbah's Build Like This workflow. Regenerate instead of editing. -->

build-frontend

Run Phase 8 with the frontend-delivery skill. The frontend-engineer leads and delegates product-design/accessibility, independent journey testing, and performance lanes.

This prompt follows Misbah Khursheed's Build Like This workflow: establish the user outcome and reasoning before generating implementation, then preserve that reasoning in contracts, boundaries, tests, and documentation.

Project identity and sources of truth

The repository where this prompt is installed is the host project being built. Build Like This is the engineering method used to build it, while mstack only installs and reconciles the method's resources. Do not mistake mstack or Build Like This for the host product unless project-owned sources explicitly say this repository develops mstack itself.

Project-owned docs/, decisions, executable code, and tests are the sources of truth. .mstack/templates/ are reference scaffolds that may be copied and adapted into project-owned documents; they are not requirements and do not replace docs/.

Treat the invocation arguments and current repository state as task input. Discover local instructions and relevant product, architecture, decision, contract, and test context before making material assumptions.

Method

  1. Confirm the approved journey, content, full state model, accessibility target, backend contract, browser/device support, and acceptance criteria.
  2. Model ownership of server, form, URL, and local presentation state before component boundaries; use a faithful typed mock only when backend integration is unavailable.
  3. Implement semantic, responsive, keyboard-accessible behavior for loading, empty, success, validation, denial, degraded, failure, and recovery states.
  4. Integrate faithfully with server contracts and surface discrepancies; do not duplicate authorization or durable business rules as client truth.
  5. Verify focus, screen-reader semantics, contrast, reduced motion, slow/offline/dependency behavior, critical browsers, and performance budgets.
  6. Run relevant formatter, strict types, lint, component/integration/end-to-end tests, and production build; record release assumptions and limitations.

Deliverables

  • Working complete frontend journey with accessible semantics, deliberate state ownership, and faithful contract integration.
  • Focused component/integration/end-to-end/accessibility/performance verification with exact results.
  • Contract discrepancies, browser/device caveats, rollout implications, and residual-risk handoff.

Constraints

  • Do not invent backend payloads or make client code authoritative for permissions, pricing, or critical state.
  • Do not ship only the happy path or inaccessible custom controls where semantic platform behavior exists.
  • Do not use motion unless it aids comprehension and respects reduced-motion behavior.

Delegation and parallel safety

  • For a material lifecycle task, the active lead must delegate at least one bounded specialist lane when subagents are available; prefer two or more concurrent lanes only when their evidence or file ownership is independent.
  • The active lead owns acceptance criteria and final integration. Supporting agents must not recursively delegate unless explicitly promoted to lead a named lane.
  • Give each delegate distinct inputs, outputs, and ownership. Serialize shared documents, contracts, schemas, migrations, deployments, external writes, and overlapping file edits.
  • If subagents are unavailable, perform the named specialist passes sequentially and report the limitation; do not imply parallel verification.
  • Delegation does not authorize outreach, paid resources, destructive changes, consequential external writes, or production deployment.

Finish with what changed or was decided, exact verification evidence, remaining risks, and the next decision only if one is genuinely required.

User arguments: $ARGUMENTS