BjornMelin 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.
| Situation or trigger | Open | Expert focus |
|---|---|---|
| Baseline/product UI: default or unclear brief; React/Next, Tailwind, RSC, component structure; "good UI," anti-slop, bias correction, bento, Framer-style motion, performance guardrails | references/design-taste-frontend.md | Default reference. Baseline dials, stack rules, anti-slop offsets, dependency checks |
| High-end marketing/showcase: landing page, portfolio, agency-$150k feel, cinematic micro-interaction, double-bezel, nav choreography; not a generic template | references/high-end-visual-design.md | Awwwards-tier art direction, vibe/layout archetypes, strict cheap-default bans |
| Minimalist/editorial/workspace: Notion, Linear, doc-like, warm monochrome, sparse accents, flat layer, bento, low shadow and no kitsch Chrome | references/minimalist-ui.md | Utilitarian minimalism, typographic structure, negative constraints |
| Scroll storytelling/GSAP: pin/stack/scrub, ScrollTrigger, AIDA page arc, bento with strong section rhythm, "elite" motion depth | references/gpt-taste.md | GSAP-first patterns, layout randomization discipline, section typography rules |
| Industrial/brutalist/dashboard: Swiss/mechanical, terminal/HUD, dense dashboards, declassified/blueprint, halftone or scanline texture; raw not glossy consumer UI | references/industrial-brutalist-ui.md | Brutalist archetypes, telemetry type, utilitarian color and grid |
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.