frontend-engineering

# Skill: frontend-engineering Load this skill when a task's primary output is HTML, CSS, or JS — a new page, component, slide deck, dashboard, email template, or any standalone web artifact. It carries the design pre-flight requirements (named aesthetic reference, seed token block, state matrix), the craft rules that govern EXECUTE, and the GATES verification commands. It is not needed for incidental HTML edits to an existing surface already covered by a grounded aesthetic reference. ## Output rendering Table — When presenting several items that share the same fields, render a Markdown table. Cap at ~5 columns; beyond that, switch to a per-item detail list. Right-align numeric columns. ## Mode selection Before starting, select the mode that matches the work: | Mode | When to use | Required outputs | |---|---|---| | **create** | Building a new surface or significant new component | Page/screen contract (proportional to risk), evidence manifest | | **retrofit** | Improving or extending an existing surface | Brownfield inspection, evidence manifest | | **audit** | Reviewing an existing surface without writing code | Audit report | | **verify** | Running the full gate suite on a completed surface | Evidence manifest | Proceed to the shared pre-flight (PLAN phase) regardless of mode. Mode-specific steps follow the shared pre-flight and the state matrix. --- ## PLAN phase — Shared Pre-flight (all modes) Complete all four steps before writing any code (create/retrofit) or ...