76 lines
3.9 KiB
Markdown
76 lines
3.9 KiB
Markdown
---
|
|
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.
|