| name | routr-frontend |
| description | Build or redesign UI (pages, components, design system). Use when: new screen, landing page, layout, Tailwind, shadcn, 'make it look good', redesign, hero section, dashboard UI. Not for: animating existing UI (→ routr-motion); a visual bug from broken logic (→ routr-debug). |
routr-frontend
Goal: distinctive, accessible UI that fits the product — not generic AI slop.
When to activate
- New page, screen, component, or landing page
- UI redesign or "make it look better"
- Design system, tokens, Tailwind, shadcn work
Do not activate
- Motion-only polish on existing UI →
routr-motion
- Logic bug in UI →
routr-debug
- Mobile Expo/RN →
routr-mobile
- Marketing copy only →
routr-marketing
Iron law
No code before a written design plan that passes self-critique.
0. Bootstrap
Install missing from routr-catalog/references/skill-registry.md.
| Order | Skill | Tier |
|---|
| 1 | frontend-design | required |
| 2 | web-design-guidelines | recommended |
| 3 | ui-ux-pro-max | recommended |
| 4 | vercel-react-best-practices | recommended |
| 5 | tailwind-design-system | optional |
| 6 | shadcn | optional — if project uses shadcn |
| 7 | symdex-code-search | recommended |
| 8 | lean-ctx | recommended |
| 9 | find-docs | optional |
If frontend-design missing → read routr-depth-frontend OR references/fallback.md.
Skip: caveman during design exploration.
1. Discover (medium freedom)
2. Design plan (low freedom)
Follow workflow.md:
- Subject, audience, single job of the page
- Token system: 4–6 colors, type pairing, layout concept, one signature element
- Self-critique: default AI template? Revise if yes.
- Motion intent: 1–2 orchestrated moments max → defer to
routr-motion
3. Build (medium freedom)
shadcn + tailwind-design-system for primitives- Implement plan exactly — no drift to generic palette
- Responsive mobile;
prefers-reduced-motion
find-docs before unfamiliar library APIs
4. Verify (low freedom)
Output format
See design brief template in workflow.md.
Handoff
- Motion weak →
routr-motion
- Bug →
routr-debug
- Ship →
routr-ship
References
Anti-patterns
- Code before design plan
- Default cream/terracotta or acid-green-on-black without brief justification
- Animating everything
