| name | routr-depth-frontend |
| description | Distinctive UI design when frontend-design is not installed. Use when: routr-frontend bootstrap fails, building UI without Anthropic frontend-design skill, or output looks like generic AI template. |
routr-depth-frontend
Fallback depth for routr-frontend. Load only when frontend-design is not installed.
Iron law
Design plan before code — self-critique against generic AI defaults.
Ground in the subject
Name: concrete subject, audience, page's single job. Pull distinctive choices from the subject's world — not default palettes.
Avoid default AI clusters (unless brief requires)
- Warm cream + terracotta + serif display
- Near-black + acid-green accent
- Newspaper columns + hairline rules everywhere
Design plan (required before code)
### Tokens
- Colors: [name #hex] × 4–6 with roles
- Display + body typefaces (paired deliberately)
- Layout concept (one sentence + wireframe if helpful)
### Signature
One memorable element tied to this brief
### Self-critique
[ ] Not interchangeable with generic SaaS template
Build rules
- Derive every color and font from plan
- Responsive mobile required
- Visible keyboard focus;
prefers-reduced-motion respected
- One orchestrated motion moment max — defer detail to
routr-motion
CSS discipline
Avoid competing selector specificities (.section vs .cta padding wars).
Install full skill
npx skills add anthropics/skills@frontend-design -g -y --copy
