Frontend UI Engineering

Decide how to structure a UI unit before writing it, so the choices your audits would otherwise catch late (accessibility, i18n, bundle cost, missing states) are made up front. This is the frontend counterpart to codebase-design: treat a component as a deep module — a lot of behaviour behind a small prop surface.

It is a knowledge/decision skill, not a code generator. It resolves the design questions, then hands the actual implementation to tdd/build and verification to the audit skills. Framework-agnostic; examples in React.

Boundaries:

• vs tdd / build — they implement; this decides the UI shape and hands off.
• vs codebase-design — that is generic module depth; this applies the lens to components (prop surface = public API).
• vs prototype — that explores throwaway directions; this is for code that stays.
• vs a11y-audit / i18n / perf-audit / visual-validate — they verify after; this builds it right up front. It references their standards, never re-copies their checklists.

Workflow

Phase 1 — Classify the work

Name the unit and pick the emphasis: