implement-ui

Files (1)

• SKILL.md

SKILL.md (first lines)

# Implement UI

**Faithful restore** of a page-spec. The spec and tokens are the contract; do not "improve" the design while coding.

## Process

### 1. Load contract

- Resolve the page-spec (`docs/site/pages/<slug>.md` or user argument)
- Read `TOKENS.md`, `DIRECTION.md`, `BRAND.md`
- Read `docs/agents/stack.md`, `docs/agents/design-rules.md`
- Skim the existing route/components you will touch

If the spec is missing acceptance checks or hero budget, stop and run/fix `/page-spec` first.

### 2. Plan the seam

Name the route and the few components you will add/change. Prefer existing layout primitives. Confirm with the user only if you would create a new pattern that conflicts with the repo.

### 3. Implement

- Map every section in the spec to UI — no extra sections, no dropped sections
- Use tokens; if a value is missing, add it to tokens (docs + code) rather than hardcoding
- Satisfy every positive in `docs/agents/design-rules.md` (this repo's copy is the one that governs; the template lives in the `setup-site-skills` skill)
- Wire the primary CTA
- Add the 2–3 intentional motions from direction — nothing else flashy

### 4. Self-check

Run **`/responsive-pass`** for the breakpoints in the spec.

Walk the acceptance checks in the page-spec; leave them unchecked only if truly unmet.

**Completion criterion:** every acceptance check is honestly passable or listed as an open blocker for `/visual-qa`; dev build succeeds.

### 5. Close

Summarise files changed + any token additions. Recommend `/visual-qa` next. Commit only if the user/repo workflow expects it in this session.

From Alfred-Lau/skills, MIT.

More from Alfred-Lau/skills