Taste metaskill (router)

Route each frontend task to one primary taste reference before implementation.

Use this skill when the task is about:

• web UI design or redesign
• making an interface feel more premium, opinionated, distinct, editorial, brutalist, cinematic, minimal, or less generic
• choosing typography, color, layout density, art direction, or motion for frontend work
• correcting "AI slop" visual defaults

Do not use this skill for backend, data modeling, API design, infra, non-UI work, or pure copywriting that does not affect a visual interface.

Do this first: pick one row that best matches the task, read that file end-to-end, then implement. If the brief is mixed (e.g. minimal product with heavy scroll motion), use the default/baseline row first, then add a second reference only for the part that diverges.

Do not load every reference for one screen—one primary, optional one secondary for a clearly separated concern (e.g. baseline + GSAP addendum).

Tie-break rules

• If the brief is unclear, choose references/design-taste-frontend.md.
• Existing repo design system and component conventions outrank the reference. Improve taste within the host system unless the user asked for a redesign.
• Accessibility, responsiveness, and performance outrank visual ambition.
• Use a secondary reference only for a bounded concern, such as baseline product UI plus GSAP scroll choreography.
• Before adding imports for motion, icons, fonts, or UI packages, inspect the target repo's dependency source of truth and avoid assuming packages exist.

Output discipline

• State the selected reference before substantial design work.
• Preserve the host repo's existing design system unless the user asks for a redesign.
• For greenfield UI, pick a distinct visual direction instead of a neutral SaaS default.
• Keep motion, typography, color, and layout choices consistent with the selected reference.
• When useful, use templates/design-brief.md to capture the selected direction before coding.

Gotchas

• Do not load all references "for inspiration"; that defeats progressive disclosure and creates conflicting instructions.
• Do not default to purple/blue AI gradients, equal three-card feature strips, stock SaaS heroes, generic heavy shadows, or default font stacks.
• Do not import GSAP, Framer Motion, icon packs, or font packages unless the target repo already has them or the user accepts adding them.
• Do not preserve desktop-only asymmetry on mobile. High-variance layouts must collapse cleanly, avoid horizontal overflow, and use touch-safe hit targets.
• Do not let taste references override semantic HTML, keyboard access, contrast, loading/empty/error states, or performance guardrails.

Execution checklist

• [ ] Select exactly one primary reference and state why.
• [ ] If needed, select at most one secondary reference and state the bounded reason.
• [ ] Check installed dependencies before using package-specific motion, icon, or font APIs.
• [ ] Lock the visual direction: typography, color, layout, motion, density.
• [ ] Define the mobile collapse behavior before coding asymmetric layouts.
• [ ] Implement within the host repo's design system unless the user requested a redesign.
• [ ] Before final response, self-check against the selected reference's bans and the gotchas above.
• [ ] For skill maintenance, evaluate routing behavior with references/evaluation-cases.md.