Design Taste Frontend

High-Agency Frontend Skill

Mission

Ship premium, non-generic frontend work that beats default LLM output quality while staying production-safe, performant, and maintainable.

Active Baseline Configuration

• DESIGN_VARIANCE: 8 (1 = Perfect Symmetry, 10 = Artsy Chaos)
• MOTION_INTENSITY: 6 (1 = Static, 10 = Cinematic)
• VISUAL_DENSITY: 4 (1 = Airy Gallery, 10 = Packed Cockpit)

Use these as defaults. If the user explicitly asks for a different style, adapt the dial values from their prompt without editing this file.

When To Use

Use this skill for React/Next.js UI generation, redesigns, and component work where visual quality, interaction quality, and anti-slop discipline matter.

Hard Non-Negotiables

1. Verify dependencies in package.json before importing third-party packages; if missing, print install command first. 2. Default to Server Components; isolate interactive/motion-heavy leaves in 'use client' components. 3. Never use emojis in code, markup, copy, labels, or alt text. 4. Never use h-screen for full-height heroes; use min-h-[100dvh]. 5. Never use complex flex percentage math for structural grids; use CSS Grid. 6. Tailwind version lock: match v3/v4 syntax to project version; respect v4 PostCSS constraints. 7. Use only @phosphor-icons/react or @radix-ui/react-icons (installed version), with consistent stroke width. 8. Ban AI-purple/neon-glow defaults; use one disciplined accent palette with neutral foundations. 9. Never animate top/left/width/height; animate transform and opacity only. 10. For magnetic/continuous motion, never use React useState loops; use Motion Values (framer-motion) outside render cycle. 11. Any perpetual/infinite animation must be isolated in a tiny client component and memoized. 12. Always include full interaction lifecycle states: loading skeletons, empty states, and inline error states. 13. Do not mix GSAP/ThreeJS and Framer Motion in the same component tree. 14. High-variance desktop layouts must collapse aggressively to clean single-column mobile layouts.

Compact Dial Definitions

• DESIGN_VARIANCE
• 1-3: predictable symmetry
• 4-7: controlled offsets/asymmetry
• 8-10: expressive asymmetry; force strict mobile fallback
• MOTION_INTENSITY
• 1-3: static, only hover/active
• 4-7: smooth CSS and staged reveals
• 8-10: advanced choreography with strict perf guardrails
• VISUAL_DENSITY
• 1-3: gallery spacing
• 4-7: standard app spacing
• 8-10: compact cockpit density; numbers in monospace

Signs of Taste in Web UI (General Heuristics)

Apply these as default quality targets unless the product context explicitly requires otherwise.

• Interaction latency target: visible UI responses should complete in ~100ms when technically feasible.
• Do not rely on product tours as the primary orientation mechanism.
• Keep routes/slugs short and human-readable; avoid exposing raw UIDs in primary user-facing URLs.
• Preserve persistent, resumable state across sessions where it improves continuity.
• Keep the visible palette restrained (generally <=3 primary colors, excluding semantic status states).
• Avoid visible scrollbars in polished primary surfaces while preserving accessible scrolling behavior.
• Keep core navigation depth within 3 steps for primary user goals.
• Ensure logo/brand surfaces can provide copyable SVG + basic brand kit access when relevant.
• Always include skeleton loading states for async surfaces.
• Support practical clipboard workflows (copy + paste) where users expect them.
• Use larger hit targets for buttons/inputs (touch and mouse-friendly).
• Cancellation should be honest and one-click when possible; avoid dark patterns.
• Include command palette support (Cmd/Ctrl + K) for app-like products when appropriate.
• Keep tooltips minimal; favor clear labels and inline context first.
• Keep microcopy in active voice; target short sentences (default <=7 words) for UI text.
• Prefer optical alignment over strict geometric centering when they conflict.
• Optimize content/layout for left-to-right reading flow by default.
• Include reassurance around loss-risk moments (deletes, cancels, unsaved changes, irreversible actions).

Routing

• Core layout, typography, color, architecture, and perf defaults: references/design-rules.md
• Motion engine, choreography, and implementation constraints: references/motion.md
• Banned patterns and anti-slop filters: references/anti-patterns.md
• Bento and dashboard implementation recipes: references/bento-recipes.md
• Final pre-flight QA gates: references/checklist.md
• Long-form inspiration catalog (non-critical idea bank): references/inspiration-patterns.md

Apply the hard non-negotiables first, then use the routed references by priority: Critical -> Defaults -> Optional.

Anti-Patterns

Critical

• Do not use emojis anywhere in generated UI/code/content.
• Do not use AI-purple defaults, neon glows, or oversaturated accent spam.
• Do not use pure black (#000000); use tuned dark neutrals.
• Do not use Inter as default premium/creative voice.
• Do not use serif in dashboard/software contexts.
• Do not ship generic "three equal cards" marketing rows by default.
• Do not output broken or random Unsplash links.
• Do not leave shadcn/ui as untouched defaults when used.

Defaults

• Avoid oversized screaming H1s; control hierarchy through rhythm, contrast, and weight.
• Avoid excessive gradient-text headlines.
• Avoid custom cursor effects that hurt accessibility/performance.
• Avoid generic filler copy and buzzword-heavy "AI marketing" language.
• Avoid fake-perfect numbers (e.g., 99.99%, 50%) when realism is expected.
• Avoid placeholder names/brands that read like template residue.
• Avoid generic avatar placeholders when realistic context is expected.
• Avoid awkward spacing drift; enforce clear mathematical rhythm in paddings/margins.

Optional

• Prefer differentiated hero structures over centered-title-over-image repetition.
• Favor memorable interaction signatures over superficial gradient gimmicks.
• Use stable image placeholders such as https://picsum.photos/seed/{seed}/800/600 when real assets are unavailable.

Bento Recipes

Critical

• For modern SaaS/dashboard feature sections, default to a Bento 2.0 composition instead of generic equal cards.
• Keep perpetual card animations lightweight, isolated, and memoized.
• Use layout-aware transitions (layout, layoutId) for card reordering/resizing behavior.

Defaults

• Baseline aesthetic:
• Background: #f9fafb
• Surface: white cards with light border (border-slate-200/50)
• Container radius: rounded-[2.5rem]
• Shadow: soft diffusion, wide and subtle
• Typography stack: Geist, Satoshi, or Cabinet Grotesk with tight tracking on headings.
• Place titles/descriptions outside/below cards when using gallery-style presentation.
• Suggested 5 archetypes:

1. Intelligent List: auto-sorting stack via shared layout ids. 2. Command Input: typewriter + processing shimmer state. 3. Live Status: breathing indicator + overshoot notification. 4. Wide Data Stream: seamless horizontal infinite carousel. 5. Contextual UI: staggered highlight + floating action toolbar.

Optional

• Common row patterns:
• 3-up asymmetric top row + 70/30 second row.
• Hybrid masonry + spotlight tiles for feature storytelling.
• Creative arsenal for non-generic interfaces:
• Navigation: dock magnification, magnetic buttons, gooey menus, dynamic-island morphs, radial actions.
• Layout: bento grids, masonry, chroma borders, split-scroll, curtain reveals.
• Cards: parallax tilt, spotlight borders, glass panels, holographic foil, swipe stacks, morphing modals.
• Scrolltelling: sticky stacks, horizontal scroll transforms, zoom parallax, SVG progress paths, liquid wipes.
• Media: coverflow, drag-to-pan grids, accordion sliders, hover image trails, controlled glitch states.
• Type: kinetic marquees, mask reveals, scramble effects, circular text paths, animated strokes.
• Micro-effects: shimmer skeletons, direction-aware hover fills, click ripples, SVG line-draw, mesh gradients.
• Add restrained ambient loops to keep the surface alive without reducing readability.

Pre-Flight Checklist

Critical (Must Pass)

• [ ] Dependency availability verified before imports; missing packages surfaced with install commands.
• [ ] Server/client boundary is correct ('use client' only where required).
• [ ] Full-height sections use min-h-[100dvh] (not h-screen).
• [ ] Mobile fallback is guaranteed for high-variance desktop layouts.
• [ ] Motion animates only transform/opacity.
• [ ] Infinite/perpetual motion is isolated and memoized.
• [ ] useEffect/imperative animations include cleanup.
• [ ] Loading, empty, and error states are present.
• [ ] Primary user journeys can be completed within 3 navigation steps.
• [ ] Cancellation is honest and one-click where feasible.

Defaults (Should Pass)

• [ ] Palette is restrained (generally <=3 primary colors) and avoids neon/AI-purple bias.
• [ ] Typography and spacing rhythm are deliberate and non-generic.
• [ ] Card usage is intentional; separators/negative space used when better.
• [ ] Icon library and stroke-width consistency are enforced.
• [ ] Interaction feedback feels near-instant (~100ms target where feasible).
• [ ] URL slugs are short/human-readable; raw UIDs are avoided in primary routes.
• [ ] State continuity is persistent/resumable where it materially helps users.
• [ ] Hit targets are comfortably large for mouse/touch interactions.
• [ ] Tooltips are minimal; labels/inline context do most of the work.
• [ ] Microcopy is active voice and concise (<=7 words where practical).
• [ ] Layout supports clear left-to-right scanning.
• [ ] Optical alignment choices are validated (not purely geometric centering).
• [ ] Async surfaces use skeleton loading states.
• [ ] App-like products include Cmd/Ctrl + K where appropriate.
• [ ] Clipboard workflows (copy/paste) are supported in expected places.
• [ ] Loss-risk moments include reassurance and clear recovery language.

Optional (Quality Boosters)

• [ ] Staggered entrance sequencing improves scanability.
• [ ] Tactile active states are implemented on primary actions.
• [ ] Hero/layout pattern avoids default centered-template look.
• [ ] Scrollbars are visually hidden in polished surfaces without harming accessibility.
• [ ] Brand surfaces expose copyable SVG logo/brand assets where relevant.

Design Rules

Critical

• Verify package availability in package.json before imports; output install command when missing.
• React/Next.js default architecture:
• Server Components first.
• Global providers/state only in client components.
• Motion/liquid-glass interactivity must be isolated in leaf 'use client' components.
• State scope discipline:
• Prefer local useState/useReducer for isolated UI state.
• Use global state only to avoid deep prop drilling.
• Tailwind version discipline:
• Match syntax to installed major version.
• In v4, do not use legacy tailwindcss PostCSS plugin; use supported v4 integration.
• Full-height stability: use min-h-[100dvh], not h-screen.
• Structural layout reliability: use grid for multi-column composition; avoid flex calc hacks.
• Core navigation should resolve primary user goals within 3 steps.
• Cancellation UX must be honest; one-click cancel where feasible (no dark patterns).
• Performance safety:
• Animate only transform and opacity.
• Apply grain/noise overlays only on fixed, pointer-event-none layers.
• Use z-index intentionally for real layering contexts, not arbitrary stacking.

Defaults

• Typography baseline:
• Display: text-4xl md:text-6xl tracking-tighter leading-none
• Body: text-base text-gray-600 leading-relaxed max-w-[65ch]
• Premium sans stack preference: Geist, Outfit, Cabinet Grotesk, Satoshi.
• Dashboard/software UI constraint: serif is disallowed.
• Color calibration:
• Keep the visible palette restrained (generally <=3 primary colors; semantic status tones excluded).
• Prefer one accent family by default; maximum two accent families when contrast hierarchy needs it.
• Keep saturation controlled (<80% target).
• Hold one coherent temperature across neutrals.
• Layout diversification:
• For DESIGN_VARIANCE > 4, avoid centered hero defaults.
• Prefer split-screen, asymmetric whitespace, and offset compositions.
• Responsive containers: prefer max-w-[1400px] mx-auto or max-w-7xl mx-auto.
• Icon policy: use only @phosphor-icons/react or @radix-ui/react-icons, and keep stroke width consistent globally.
• Forms:
• Labels above inputs.
• Optional helper text present in markup when needed.
• Errors below inputs.
• Use consistent vertical rhythm (gap-2 blocks).
• Hit targets: size buttons/inputs for touch and mouse comfort (target ~40px+ interactive bounds).
• Tooltips should be minimal; prefer clear labels and inline context first.
• Microcopy should be active voice; keep UI sentences short (default target: <=7 words where practical).
• Prefer optical alignment over strict geometric centering when they conflict.
• Optimize scanning for left-to-right reading flow.
• Keep user-facing route slugs short/human-readable; avoid exposing raw UIDs in primary navigation.
• For app-like products, provide command palette support (Cmd/Ctrl + K) when appropriate.
• Support practical clipboard workflows (copy/paste) in expected contexts.
• Include skeleton loading states for async surfaces.
• For destructive/loss-risk moments, include reassurance and clear recovery affordances.

Optional

• Use subtle tinted shadows that match background hue when elevation is meaningful.
• Hide scrollbars in polished primary surfaces only when accessibility/scroll behavior remains intact.
• Provide copyable SVG logo + lightweight brand kit access where product context needs it.
• For high-density interfaces, prefer separators (border-t, divide-y) and whitespace grouping over card overuse.
• For VISUAL_DENSITY > 7, run cockpit mode:
• Reduce padding and visual noise.
• Favor line-divided surfaces over boxed cards.
• Use monospace for numeric-heavy data.
• Keep major cards/containers on generous padding (p-8 or p-10) when density permits.

Inspiration Patterns (Long Catalog)

Non-critical creative catalog to restore broad idea coverage from the pre-refactor monolith. Use this for exploration after core guardrails are satisfied.

Navigation & Menus

• Mac-style dock magnification nav
• Magnetic CTA/button pull effect
• Gooey expanding action menu
• Dynamic-island style status capsule
• Contextual radial action menu
• Floating speed-dial action hub
• Mega-menu with staged reveal choreography

Layout & Structure

• Asymmetric split hero (text/media tension)
• Bento 2.0 uneven tile systems
• Masonry content rhythms
• Chroma/gradient border grid accents
• Opposing split-scroll panels
• Curtain reveal page transitions

Cards & Containers

• Parallax tilt cards (subtle, performance-safe)
• Cursor-reactive spotlight borders
• Refraction-grade glass panels
• Holographic foil surface accents
• Swipe-stack card interactions
• Morphing trigger-to-modal transitions

Scrolltelling Patterns

• Sticky stack reveals
• Vertical-to-horizontal gallery translation
• Timeline-sequenced narrative scroll
• Zoom parallax focal storytelling
• SVG path draw-on-scroll progress
• Liquid/wipe section transitions

Media & Gallery Systems

• 3D dome/perspective galleries
• Coverflow-like centered carousels
• Drag-to-pan infinite canvases
• Accordion image strips
• Hover image trails
• RGB glitch micro-bursts (sparing use)

Typography & Text Motion

• Kinetic marquee bands
• Text-mask video reveals
• Text scramble/decode effects
• Circular path typography
• Animated gradient stroke headings
• Cursor-reactive letter grids

Micro-Interactions

• Particle confirmation bursts
• Liquid pull-to-refresh analogs
• Shimmer skeleton loaders
• Direction-aware hover fills
• Coordinate-origin ripple feedback
• SVG line self-draw moments
• Mesh-gradient breathing backgrounds
• Depth-of-field blur layering

Dashboard / Data Interaction Concepts

• Auto-prioritizing intelligent list
• Typing command bar with processing state
• Live status chip with breathing pulse
• Seamless horizontal metric stream
• Contextual floating action rail

Mood-to-Pattern Mapping

• Confident / Executive: asymmetric hero, diffusion shadows, restrained motion, precise typography
• Futuristic / Tech: chroma grids, subtle neon accents, timeline reveals, dense data rhythm
• Creative / Expressive: collage asymmetry, kinetic text, richer motion choreography
• Calm / Editorial: high whitespace, restrained transitions, serif-sans contrast

Anti-Slop Reminder

Use this catalog to increase originality, not complexity theater.

• Keep one signature idea per section.
• Prioritize readability and speed over spectacle.
• Respect reduced-motion and mobile fallbacks.
• Keep transform/opacity-first animation discipline.

Motion

Critical

• Never drive magnetic hover or continuous animation loops with React useState.
• For Framer Motion, use useMotionValue and useTransform for cursor-reactive movement outside render cycle.
• Infinite/perpetual animations must be isolated in small client components and memoized.
• Parent/child staggerChildren orchestration must remain in one client component tree.
• Do not mix GSAP/ThreeJS and Framer Motion in the same component tree.
• If using imperative animation APIs (useEffect, GSAP, ThreeJS), always include strict teardown cleanup.
• Avoid direct window.addEventListener('scroll') choreography for high-intensity motion systems.

Defaults

• Motion behavior by MOTION_INTENSITY:
• 1-3: hover/active only, no autoplay.
• 4-7: smooth transitions, transform/opacity load-ins, light stagger.
• 8-10: advanced choreography (parallax/shared element transitions) with strict performance budgeting.
• Use spring transitions for tactile feel: type: "spring", stiffness: 100, damping: 20.
• Prefer Framer layout and layoutId for reflow, reorder, and shared transitions.
• Do not instantly mount heavy lists/grids; use staggered reveals (staggerChildren or indexed CSS delays).
• Use skeleton shimmer and waterfall reveals over abrupt list/grid mounts.

Optional

• "Liquid glass" refinement: combine blur with thin inner border and subtle inner highlight shadow.
• Add micro-physics (-translate-y-[1px], scale-[0.98]) on active presses for tactile confirmation.
• Add looped ambient motion (pulse/float/typewriter/carousel) where it improves scanability.
• GSAP/ThreeJS are valid for isolated full-page scrolltelling or canvas backgrounds only.