---
name: frontend
description: Use when a task touches frontend UI/UX/design quality and the agent needs to choose which specialized frontend skill or combination of skills to load from this frontend skill pack.
---

# Frontend Skill Router

Pick the smallest set that matches the job.

## Hard rule

If you choose a skill that depends on `frontend-design`, your order must include `frontend-design` **before** that skill. Skipping it or placing it later is wrong routing.

## First checks

1. **Net-new UI or major visual direction work** → use `frontend-design`.
2. **No design context yet** and chosen skill says to invoke `frontend-design` → run `teach-impeccable` first if instructions and `.impeccable.md` do not already contain design context.
3. **If a chosen skill requires `frontend-design`, load it first. Do not skip it. Do not place it later in the sequence.**
4. **If a skill's own doc has mandatory prep, follow it.**

Skills that must route through `frontend-design`: `adapt`, `animate`, `arrange`, `audit`, `bolder`, `clarify`, `colorize`, `critique`, `delight`, `distill`, `normalize`, `onboard`, `overdrive`, `polish`, `quieter`, `typeset`.

## Choose by primary need

| Need | Skill |
|---|---|
| Build or redesign distinctive UI | `frontend-design` |
| Gather persistent design context once | `teach-impeccable` |
| Review UX/design quality | `critique` |
| Review technical UI quality: a11y, perf, theming, responsive | `audit` |
| Fix layout, spacing, hierarchy, composition | `arrange` |
| Improve typography and readability | `typeset` |
| Simplify, declutter, remove noise | `distill` |
| Tone down intensity without removing quality | `quieter` |
| Add color, warmth, palette energy | `colorize` |
| Make safe/bland UI more striking | `bolder` |
| Add joy, charm, personality | `delight` |
| Add purposeful motion and micro-interactions | `animate` |
| Push into technically ambitious wow-factor | `overdrive` |
| Improve onboarding, empty states, first-run flow | `onboard` |
| Fix labels, errors, helper text, instructions | `clarify` |
| Adapt for mobile, breakpoints, devices, contexts | `adapt` |
| Fix speed, jank, rendering, bundle/image cost | `optimize` |
| Fix resilience: errors, overflow, i18n, bad data | `harden` |
| Bring drifted UI back to system standards | `normalize` |
| Extract reusable components/tokens/patterns | `extract` |
| Final fit-and-finish before ship | `polish` |

## Common confusions

- `critique` vs `audit` → design judgment vs measurable implementation quality.
- `arrange` vs `polish` → structural layout pass vs final detail pass.
- `distill` vs `quieter` → remove complexity vs reduce visual intensity.
- `delight` vs `animate` → personality/joy vs motion mechanics.
- `normalize` vs `extract` → align to existing system vs create shared system assets.
- `bolder` vs `colorize` → stronger overall impact vs specifically more chroma.
- `optimize` vs `harden` → speed/smoothness vs resilience/edge cases.

## Common combos

- New feature: `frontend-design` → specialist skill(s) → `polish`
- UX + technical review: `frontend-design` → `critique` + `audit`
- Busy screen cleanup: `frontend-design` → `distill` + `arrange`, add `quieter` if still loud
- Repeated patterns + token drift: `extract` + `normalize`
- First-run experience: `frontend-design` → `onboard`, add `clarify`, `delight`, or `polish` only if explicitly needed
- Motion + personality: `frontend-design` → `animate`, add `delight` for charm and `quieter` for restraint

## Routing discipline

- Choose **1 primary skill** from the user's explicit ask.
- Add specialists only for clearly stated extra concerns or mandatory prep.
- Do **not** add speculative helpers just because they might help.
- `audit` is for review/check requests, not default build or refactor work.
- `polish` is for explicit final-pass or finishing-touch requests.
- `typeset` is for explicit typography/readability issues.