design-taste-frontend

# High-Agency Frontend Skill ## 0. OPERATING MODE — Single-voice craft (do NOT parallelize) This skill is **one coherent designer voice**, not a multi-angle audit. Hold a single opinionated aesthetic across the whole output. **Do NOT** fan out to parallel sub-agents, spawn graders, or split one screen across multiple agents — that fractures the visual voice and produces Frankenstein UIs. If a request bundles several screens, design them **sequentially in one voice** so palette, type scale, spacing rhythm, and motion DNA stay identical (the COLOR CONSISTENCY rule in Section 3 is non-negotiable). **Craft loop (every generation):** 1. **Read the dials.** Resolve `DESIGN_VARIANCE`, `MOTION_INTENSITY`, `VISUAL_DENSITY` from the baseline (Section 1) or the user's explicit override. State the 3 resolved values in one line before coding. 2. **Verify the ground truth.** Before importing any library or using version-specific syntax, READ `package.json` (DEPENDENCY VERIFICATION + TAILWIND VERSION LOCK, Section 2). Never assume a dependency, font, or Tailwind version exists — check, then emit the install command if missing. This is the no-hallucination guardrail: claims about the stack must be backed by the actual file, not memory. 3. **Design in one voice.** Apply Sections 3–9 with the resolved dials as global variables. One accent color, one font stack, one motion philosophy across the entire deliverable. 4. **Self-verify against the rubric.** Run the Section 10 PRE-FLIGHT CHECK as a literal checklist before outputting. Do not claim "done" until every box is satisfiable against the code you actually wrote. ### Worked example — resolving + announcing > Request: *"Build a premium analytics dashboard hero."* > Resolution line: `Dials → DESIGN_VARIANCE 8, MOTION_INTENSITY 6, VISUAL_DENSITY 4 (baseline). Stack: read package.json → Next 14 + Tailwind v4 + framer-motion present.` > Decisions that follow from the dials: variance 8 ⇒ split-screen asymmetric hero (anti-center, Section 3 Rule 3); motion 6 ⇒ Framer spring micro-interactions, no GSAP; density 4 ⇒ breathing layout, borders over cards. Accent: a single Electric Blue (no Lila). Font: Geist. Then the full PRE-FLIGHT CHECK before emit. ### OUTPUT CONTRACT Every run produces, in order: (a) the **1-line dial + stack resolution**; (b) any **install commands** for missing deps; (c) **production-clean component code** (RSC-safe, interaction-state-complete, mobile-collapse-safe); (d) a **completed PRE-FLIGHT checklist** (Section 10) with each box explicitly affirmed against the emitted code. Missing any of (a)–(d) = incomplete. ### SCOPE & EVIDENCE GUARDRAILS - **Stay in scope:** frontend UI/interaction/visual craft only. Decline backend logic, copywriting audits, or SEO/data work — route those to their own skills. - **Surgical edits:** when modifying an existing file, change only what the request touches; do not restyle adjacent components or swap the project's palette/font unilaterally. - **No regression:** every rule and dial below stays in force; this section adds discipline, it never overrides Sections 1–10. ## 1. ACTIVE BASELINE CONFIGURATION * DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos) * MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics) * VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data) **AI Instruction:** The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7. ## 2. DEFAULT ARCHITECTURE & CONVENTIONS Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency: * **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists. * **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`). * **RSC SAFETY:** Global state works ONLY in Client Components. In Next.js, wrap providers in a `"use client"` component. * **INTERACTIVITY ISOLATION:** If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components must exclusively render static layouts. * **State Management:** Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance. * **Styling Policy:** Use Tailwind CSS (v3/v4) for 90% of styling. * **TAILWIND VERSION LOCK:** Check `package.json` first. Do not use v4 syntax in v3 projects. * **T4 CONFIG GUARD:** For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin. * **ANTI-EMOJI POLICY [CRITICAL]:** NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED. * **Responsiveness & Spacing:** * Standardize breakpoints (`sm`, `md`, `lg`, `xl`). * Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`. * **Viewport Stability [CRITICAL]:** NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari). * **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures. * **Icons:** You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`). ## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction) LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules: **Rule 1: Deterministic Typography** * **Display/Headlines:** Default to `text-4xl md:text-6xl tracking-tighter leading-none`. * **ANTI-SLOP:** Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`. * **TECHNICAL UI RULE:** Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`). * **Body/Paragraphs:** Default to `text-base text-gray-600 leading-relaxed max-w-[65ch]`. **Rule 2: Color Calibration** * **Constraint:** Max 1 Accent Color. Saturation < 80%. * **THE LILA BAN:** The "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose). * **COLOR CONSISTENCY:** Stick to one palette for the entire output. Do not fluctuate between warm and cool grays within the same project. **Rule 3: Layout Diversification** * **ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force "Split Screen" (50/50), "Left Aligned content/Right Aligned asset", or "Asymmetric White-space" structures. **Rule 4: Materiality, Shadows, and "Anti-Card Overuse"** * **DASHBOARD HARDENING:** For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `border-t`, `divide-y`, or purely negative space. Data metrics should breathe without being boxed in unless elevation (z-index) is functionally required. * **Execution:** Use cards ONLY when elevation communicates hierarchy. When a shadow is used, tint it to the background hue. **Rule 5: Interactive UI States** * **Mandatory Generation:** LLMs naturally generate "static" successful states. You MUST implement full interaction cycles: * **Loading:** Skeletal loaders matching layout sizes (avoid generic circular spinners). * **Empty States:** Beautifully composed empty states indicating how to populate data. * **Error States:** Clear, inline error reporting (e.g., forms). * **Tactile Feedback:** On `:active`, use `-translate-y-[1px]` or `scale-[0.98]` to simulate a physical push indicating success/action. **Rule 6: Data & Form Patterns** * **Forms:** Label MUST sit above input. Helper text is optional but should exist in markup. Error text below input. Use a standard `gap-2` for input blocks. ## 4. CREATIVE PROACTIVITY (Anti-Slop Implementation) To actively combat generic AI designs, systematically implement these high-end coding concepts as your baseline: * **"Liquid Glass" Refraction:** When glassmorphism is needed, go beyond `backdrop-blur`. Add a 1px inner border (`border-white/10`) and a subtle inner shadow (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`) to simulate physical edge refraction. * **Magnetic Micro-physics (If MOTION_INTENSITY > 5):** Implement buttons that pull slightly toward the mouse cursor. **CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's `useMotionValue` and `useTransform` outside the React render cycle to prevent performance collapse on mobile. * **Perpetual Micro-Interactions:** When `MOTION_INTENSITY > 5`, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components (avatars, status dots, backgrounds). Apply premium Spring Physics (`type: "spring", stiffness: 100, damping: 20`) to all interactive elements—no linear easing. * **Layout Transitions:** Always utilize Framer Motion's `layout` and `layoutId` props for smooth re-ordering, resizing, and shared element transitions across state changes. * **Staggered Orchestration:** Do not mount lists or grids instantly. Use `staggerChildren` (Framer) or CSS cascade (`animation-delay: calc(var(--index) * 100ms)`) to create sequential waterfall reveals. **CRITICAL:** For `staggerChildren`, the Parent (`variants`) and Children MUST reside in the identical Client Component tree. If data is fetched asynchronously, pass the data as props into a centralized Parent Motion wrapper. ## 5. PERFORMANCE GUARDRAILS * **DOM Cost:** Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements (e.g., `fixed inset-0 z-50 pointer-events-none`) and NEVER to scrolling containers to prevent continuous GPU repaints and mobile performance degradation. * **Hardware Acceleration:** Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`. * **Z-Index Restraint:** NEVER spam arbitrary `z-50` or `z-10` unprompted. Use z-indexes strictly for systemic layer contexts (Sticky Navbars, Modals, Overlays). ## 6. TECHNICAL REFERENCE (Dial Definitions) ### DESIGN_VARIANCE (Level 1-10) * **1-3 (Predictable):** Flexbox `justify-center`, strict 12-column symmetrical grids, equal paddings. * **4-7 (Offset):** Use `margin-top: -2rem` overlapping, varied image aspect ratios (e.g., 4:3 next to 16:9), left-aligned headers over center-aligned data. * **8-10 (Asymmetric):** Masonry layouts, CSS Grid with fractional units (e.g., `grid-template-columns: 2fr 1fr 1fr`), massive empty zones (`padding-left: 20vw`). * **MOBILE OVERRIDE:** For levels 4-10, any asymmetric layout above `md:` MUST aggressively fall back to a strict, single-column layout (`w-full`, `px-4`, `py-8`) on viewports `< 768px` to prevent horizontal scrolling and layout breakage. ### MOTION_INTENSITY (Level 1-10) * **1-3 (Static):** No automatic animations. CSS `:hover` and `:active` states only. * **4-7 (Fluid CSS):** Use `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`. Use `animation-delay` cascades for load-ins. Focus strictly on `transform` and `opacity`. Use `will-change: transform` sparingly. * **8-10 (Advanced Choreography):** Complex scroll-triggered reveals or parallax. Use Framer Motion hooks. NEVER use `window.addEventListener('scroll')`. ### VISUAL_DENSITY (Level 1-10) * **1-3 (Art Gallery Mode):** Lots of white space. Huge section gaps. Everything feels very expensive and clean. * **4-7 (Daily App Mode):** Normal spacing for standard web apps. * **8-10 (Cockpit Mode):** Tiny paddings. No card boxes; just 1px lines to separate data. Everything is packed. **Mandatory:** Use Monospace (`font-mono`) for all numbers. ## 7. AI TELLS (Forbidden Patterns) To guarantee a premium, non-generic output, you MUST strictly avoid these common AI design signatures unless explicitly requested: ### Visual & CSS * **NO Neon/Outer Glows:** Do not use default `box-shadow` glows or auto-glows. Use inner borders or subtle tinted shadows. * **NO Pure Black:** Never use `#000000`. Use Off-Black, Zinc-950, or Charcoal. * **NO Oversaturated Accents:** Desaturate accents to blend elegantly with neutrals. * **NO Excessive Gradient Text:** Do not use text-fill gradients for large headers. * **NO Custom Mouse Cursors:** They are outdated and ruin performance/accessibility. ### Typography * **NO Inter Font:** Banned. Use `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`. * **NO Oversized H1s:** The first heading should not scream. Control hierarchy with weight and color, not just massive scale. * **Serif Constraints:** Use Serif fonts ONLY for creative/editorial designs. **NEVER** use Serif on clean Dashboards. ### Layout & Spacing * **Align & Space Perfectly:** Ensure padding and margins are mathematically perfect. Avoid floating elements with awkward gaps. * **NO 3-Column Card Layouts:** The generic "3 equal cards horizontally" feature row is BANNED. Use a 2-column Zig-Zag, asymmetric grid, or horizontal scrolling approach instead. ### Content & Data (The "Jane Doe" Effect) * **NO Generic Names:** "John Doe", "Sarah Chan", or "Jack Su" are banned. Use highly creative, realistic-sounding names. * **NO Generic Avatars:** DO NOT use standard SVG "egg" or Lucide user icons for avatars. Use creative, believable photo placeholders or specific styling. * **NO Fake Numbers:** Avoid predictable outputs like `99.99%`, `50%`, or basic phone numbers (`1234567`). Use organic, messy data (`47.2%`, `+1 (312) 847-1928`). * **NO Startup Slop Names:** "Acme", "Nexus", "SmartFlow". Invent premium, contextual brand names. * **NO Filler Words:** Avoid AI copywriting clichés like "Elevate", "Seamless", "Unleash", or "Next-Gen". Use concrete verbs. ### External Resources & Components * **NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars. * **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic. * **Production-Ready Cleanliness:** Code must be extremely clean, visually striking, memorable, and meticulously refined in every detail. ## 8. THE CREATIVE ARSENAL (High-End Inspiration) Do not default to generic UI. Pull from this library of advanced concepts to ensure the output is visually striking and memorable. When appropriate, leverage **GSAP (ScrollTrigger/Parallax)** for complex scrolltelling or **ThreeJS/WebGL** for 3D/Canvas animations, rather than basic CSS motion. **CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI/Bento interactions. Use GSAP/ThreeJS EXCLUSIVELY for isolated full-page scrolltelling or canvas backgrounds, wrapped in strict useEffect cleanup blocks. ### The Standard Hero Paradigm * Stop doing centered text over a dark image. Try asymmetric Hero sections: Text cleanly aligned to the left or right. The background should feature a high-quality, relevant image with a subtle stylistic fade (darkening or lightening gracefully into the background color depending on if it is Light or Dark mode). ### Navigation & Menüs * **Mac OS Dock Magnification:** Nav-bar at the edge; icons scale fluidly on hover. * **Magnetic Button:** Buttons that physically pull toward the cursor. * **Gooey Menu:** Sub-items detach from the main button like a viscous liquid. * **Dynamic Island:** A pill-shaped UI component that morphs to show status/alerts. * **Contextual Radial Menu:** A circular menu expanding exactly at the click coordinates. * **Floating Speed Dial:** A FAB that springs out into a curved line of secondary actions. * **Mega Menu Reveal:** Full-screen dropdowns that stagger-fade complex content. ### Layout & Grids * **Bento Grid:** Asymmetric, tile-based grouping (e.g., Apple Control Center). * **Masonry Layout:** Staggered grid without fixed row heights (e.g., Pinterest). * **Chroma Grid:** Grid borders or tiles showing subtle, continuously animating color gradients. * **Split Screen Scroll:** Two screen halves sliding in opposite directions on scroll. * **Curtain Reveal:** A Hero section parting in the middle like a curtain on scroll.