Taste Metaskill

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.

High-Agency Frontend Skill

1. Active baseline configuration

• DESIGN_VARIANCE: 8 (1 = perfect symmetry, 10 = artsy chaos)
• MOTION_INTENSITY: 6 (1 = static, 10 = cinematic / heavy physics)
• VISUAL_DENSITY: 4 (1 = gallery / airy, 10 = cockpit / dense data)

How to use: Default generation assumes (8, 6, 4). Do not ask the user to edit this file for that. If the user explicitly changes variance / motion / density in chat, treat those as overrides and feed them into Sections 3–7. Otherwise keep these as globals.

2. Default architecture & conventions

Unless the user names a different stack, follow this skeleton:

• Dependencies [mandatory]: Before any new import (e.g. framer-motion, lucide-react, zustand), read package.json. If the package is missing, print the install command (e.g. npm install package-name) before code. Never assume a dep exists.
• Framework: React or Next.js; prefer Server Components (RSC). Global state only in Client Components; put providers in a "use client" wrapper. If Sections 4 or 7 (motion / liquid glass) apply, the interactive UI must be a leaf client component with 'use client' at the top; RSCs stay for static structure.
• State: useState / useReducer for local UI; global state only to kill deep prop drilling.
• Styling: Tailwind v3 or v4 for ~90% of styles. Lock: Read package.json for version—no v4-only syntax in v3 trees. v4 PostCSS: use @tailwindcss/postcss or the Vite plugin, not the old tailwindcss plugin in postcss.config.js alone.
• No emojis in code, markup, user-facing text, or alt. Use Radix, Phosphor, or small SVGs instead.
• Layout & spacing: Use sm / md / lg / xl consistently. Center pages with max-w-[1400px] mx-auto or max-w-7xl. Hero height: use min-h-[100dvh], not h-screen (iOS / mobile URL bar). Grids: prefer grid + gaps (e.g. grid grid-cols-1 md:grid-cols-3 gap-6); avoid brittle flex + calc width tricks like w-[calc(33%-1rem)].
• Icons: Import from @phosphor-icons/react or @radix-ui/react-icons only (match what is installed). One global strokeWidth (e.g. 1.5 or 2.0).

3. Design engineering directives (bias correction)

LLMs lean on the same UI clichés. Offset that with these rules.

Rule 1 — Typography

• Display: Default text-4xl md:text-6xl tracking-tighter leading-none. Avoid Inter for “premium / creative” looks; use Geist, Outfit, Cabinet Grotesk, or Satoshi for character.
• Dashboard / product UI: No serifs on dense software UIs. Use sans + mono (e.g. Geist + Geist Mono, or Satoshi + JetBrains Mono).
• Body: text-base text-gray-600 leading-relaxed max-w-[65ch].

Rule 2 — Color

• At most one accent; keep saturation under ~80%.
• Lila / “AI purple” ban: no purple/blue glow kitsch, no neon purple gradients. Build on neutrals (Zinc / Slate) + one strong accent (e.g. Emerald, electric blue, deep rose).
• One gray family per project (do not mix warm and cool grays at random).

Rule 3 — Layout

• Anti-center: If DESIGN_VARIANCE > 4, do not default to a centered hero only. Use split, asymmetric, or L/R hero patterns.

Rule 4 — Materiality & cards

• If VISUAL_DENSITY > 7, avoid generic boxed cards; separate regions with border-t, divide-y, or space. Use real cards only when z-order / focus needs it. Shadows should pick up the background hue, not pure gray slabs.

Rule 5 — States

• Ship full cycles: loading (skeletons that match layout, not a lone spinner), empty (composed and instructive), error (inline, specific). On :active, use small press motion (-translate-y-[1px] or scale-[0.98]).

Rule 6 — Forms

• Label above field; optional helper; error under field. gap-2 between stacked field groups.

4. Creative proactivity (anti-slop)

Baseline “premium” behaviors:

• Liquid glass: Beyond backdrop-blur, add border-white/10 and shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] for a believable edge.
• Magnetic buttons (`MOTION_INTENSITY > 5`): Do not drive pointer tracking with useState. Use Framer useMotionValue + useTransform so motion stays off the main render path.
• Perpetual micro-motion (`MOTION_INTENSITY > 5`): Pulse, typewriter, float, shimmer, carousels in normal components. Springs: type: "spring", stiffness: 100, damping: 20—not raw linear ease on interactions.
• Layout transitions: Framer layout / layoutId for reorder, resize, shared elements.
• Staggered mounts: staggerChildren or animation-delay: calc(var(--index) * 100ms). For staggerChildren, parent variants and children must live in the same client tree; async data → pass props into one motion parent.

5. Performance guardrails

• Grain / noise: Only on fixed, pointer-events-none layers (e.g. fixed inset-0 z-50 pointer-events-none), never on scrolling panels.
• Animation: transform + opacity only; not top / left / width / height for these effects.
• Z-index: Systematic layers (nav, overlay, modal)—not random z-50 / z-[9999] everywhere.

6. Technical reference (dial definitions)

DESIGN_VARIANCE (1–10)

• 1–3: Centered flex, 12-col symmetry, even padding.
• 4–7: Overlap (margin-top: -2rem), mixed image ratios (4:3 next to 16:9), type left / content grid offset.
• 8–10: Masonry, uneven tracks (grid-template-columns: 2fr 1fr 1fr), big empty side bands (padding-left: 20vw style).
• Mobile: For 4–10, asymmetric md+ layouts must collapse to single column: w-full, px-4, py-8 below 768px (no broken horizontal scroll).

MOTION_INTENSITY (1–10)

• 1–3: Only :hover / :active; no always-on motion.
• 4–7: CSS transitions, e.g. transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1), staggered delays, transform + opacity, will-change: transform sparingly.
• 8–10: Scroll-linked / parallax / Framer-level choreography. No window.addEventListener('scroll') for per-frame work.

VISUAL_DENSITY (1–10)

• 1–3: Airy, large gaps, “gallery” feel.
• 4–7: Normal product spacing.
• 8–10: Tight, line-separated data, minimal boxes; mono for all numbers (font-mono).

7. AI tells (forbidden unless asked)

Visual & CSS: No default outer glow; no #000000 (use off-black / Zinc-950); desaturate accents; no huge gradient text headers; no custom cursor graphics.

Typography: No Inter (use Geist, Outfit, Cabinet Grotesk, Satoshi). No H1s that only scale to “shout.” Serifs only for editorial; never on clean dashboards.

Layout: Tidy math on spacing. No “three equal cards in a row” feature strip—use zig-zag, asymmetric grid, or horizontal scroll.

Content: No “John Doe” / “Sarah Chan” / “Jack Su” / “Acme” / “Nexus” / “SmartFlow.” No egg avatars or generic user glyphs—use believable photos or styled placeholders. No fake round numbers only (99.99%, 50%, 1234567); use messier, real-looking values (47.2%, +1 (312) 847-1928). No “Elevate / Seamless / Unleash / Next-Gen” filler.

Assets: No brittle Unsplash URLs. Use https://picsum.photos/seed/{random_string}/800/600 or SVG / UI avatars. shadcn/ui is OK only after you retune radii, color, shadow to match the project.

Quality bar: Code stays clean, intentional, and memorable—not boilerplate with a new font.

8. The creative arsenal (inspiration)

Do not default to generic UI. Pull from this list when you need a memorable direction. For scroll-linked storytelling or 3D / canvas work, consider GSAP (ScrollTrigger / parallax) or Three.js / WebGL instead of only CSS. Do not mount GSAP or Three in the same component tree as Framer Motion. Use Framer for UI and bento-style motion; use GSAP/Three only in isolated full-page or canvas regions with strict useEffect cleanup.

The standard hero paradigm

• Move past centered type on a stock dark image. Try asymmetric heroes: type aligned L or R; background image is high quality, on-brand, and graded into the page (lighten or darken into the base bg for light / dark mode).

Navigation & menus

• Mac OS dock magnification: Bar at the edge; icons scale on hover.
• Magnetic button: CTA subtly tracks the pointer.
• Gooey menu: Sub-items peel off the main control like viscous liquid.
• Dynamic island: Pill UI that morphs for status / alerts.
• Contextual radial menu: Radial options spawn at the click point.
• Floating speed dial: FAB that opens a curved secondary action row.
• Mega menu reveal: Full-screen drop with staggered, rich content.

Layout & grids

• Bento grid: Asymmetric tile layout (e.g. Control Center style).
• Masonry layout: Staggered columns without fixed row heights (e.g. Pinterest).
• Chroma grid: Tile or border with slow, subtle animated color.
• Split screen scroll: Two halves move in opposite directions on scroll.
• Curtain reveal: Hero splits down the middle like a curtain.

Cards & containers

• Parallax tilt card: 3D tilt from pointer position.
• Spotlight border card: Edge highlight follows the cursor.
• Glassmorphism panel: Frosted glass with inner refraction.
• Holographic foil card: Iridescent sheen on hover.
• Tinder swipe stack: Physical stack the user can swipe.
• Morphing modal: A control expands into a full-screen dialog.

Scroll animations

• Sticky scroll stack: Cards stack and cover as you scroll.
• Horizontal scroll hijack: Vertical scroll drives a horizontal track.
• Locomotive scroll sequence: Scrub video or 3D with scroll position.
• Zoom parallax: Hero bg zooms with scroll.
• Scroll progress path: SVG path draws with scroll.
• Liquid swipe transition: Page turns over like a viscous sheet.

Galleries & media

• Dome gallery: Panoramic 3D photo ring.
• Coverflow carousel: Center card forward, sides recede.
• Drag-to-pan grid: Large grid panned with drag.
• Accordion image slider: Strips that expand on hover.
• Hover image trail: Cursor leaves fading image stamps.
• Glitch effect image: Short RGB / channel glitch on hover.

Typography & text

• Kinetic marquee: Scrolling type that reacts to scroll / speed.
• Text mask reveal: Type cuts out a video layer.
• Text scramble effect: Characters decode (matrix style).
• Circular text path: Type on a rotating circle.
• Gradient stroke animation: Outline stroke with moving gradient.
• Kinetic typography grid: Letters react to pointer position.

Micro-interactions & effects

• Particle explosion button: Success breaks into particles.
• Liquid pull-to-refresh: Pull gesture looks like detaching water.
• Skeleton shimmer: Moving sheen on placeholders.
• Directional hover aware button: Fill enters from the pointer side.
• Ripple click effect: Ripples from exact click point.
• Animated SVG line drawing: Strokes self-draw.
• Mesh gradient background: Soft animated color blobs.
• Lens blur depth: Blur back layers to focus a foreground action.

9. The “motion-engine” Bento paradigm

For modern SaaS dashboards and feature walls, use Bento 2.0: calm Vercel-like surfaces with always-on, tasteful motion.

A. Core philosophy

• Look: Minimal, high-end, functional.
• Palette: Page #f9fafb, cards #ffffff, hairline border-slate-200/50.
• Shape: Big radius rounded-[2.5rem] on major surfaces; “diffusion” shadow e.g. shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)].
• Type: Geist, Satoshi, or Cabinet Grotesk + tracking-tight on titles.
• Layout: Titles / body for each tile below the card (gallery feel). Inner padding p-8–p-10.

B. Animation engine (perpetual motion)

• Spring: type: "spring", stiffness: 100, damping: 20 on interactive motion.
• Layout / shared: layout + layoutId for rearranging content.
• Loops: Every card should expose an “active” loop (pulse, typewriter, float, carousel) so the dashboard feels alive. Critical: isolate perpetual motion in memoized client leaf components; never re-render the whole layout from a loop.
• Lists / presence: Use <AnimatePresence> for list diff; keep motion at 60fps.

C. Five card archetypes (example set)

For Bento grids such as: Row 1: three columns; Row 2: two columns split ~70/30.

1. The intelligent list: Vertical stack with an auto-sort loop; items swap with layoutId as if tasks were reprioritized live. 2. The command input: Search / AI field with a multi-line typewriter pass, blinking cursor, and a “processing” shimmer gradient state. 3. The live status: Scheduling / queue UI with breathing dots; a badge can pop in with an overshoot spring, stay ~3s, then leave. 4. The wide data stream: Horizontal infinite strip of mini metric cards; seamless X loop e.g. x: ["0%", "-100%"] at a calm speed. 5. The contextual UI (focus mode): Document-style block: stagger a highlight on text, then float in a small action toolbar with micro-icons.

10. Final pre-flight

• [ ] Global state used to avoid real prop drilling—not sprinkled arbitrarily.
• [ ] High-variance layouts collapse on small screens (w-full, px-4, max-w-7xl mx-auto or equivalent) without horizontal scroll breakage.
• [ ] Full-bleed sections use min-h-[100dvh], not h-screen.
• [ ] useEffect motion hooks unregister / cleanup.
• [ ] Loading, empty, and error states exist.
• [ ] Spacing / lines replace gratuitous card stacks where density allows.
• [ ] Heavy infinite loops sit in isolated, memoized client components.

Taste Metaskill Evaluation Cases

Use these cases to test whether the router selects the right reference and avoids predictable failure modes. Each case should be run against the active SKILL.md without loading all references up front.

Case 1: Baseline product UI

Prompt:

Make this dashboard page feel less like generic AI SaaS. Keep the current React and Tailwind structure, but improve typography, spacing, empty states, and motion without adding unnecessary dependencies.

Expected primary reference:

• references/design-taste-frontend.md

Pass criteria:

• Chooses the baseline/product UI route.
• Checks existing dependencies before imports.
• Preserves the existing design system unless explicitly redesigning.
• Mentions loading, empty, and error states where relevant.
• Avoids purple gradients, generic three-card strips, and missing dependency assumptions.

Failure modes:

• Loads every taste reference.
• Applies high-end marketing art direction to a utilitarian dashboard.
• Adds Framer, GSAP, or icon packages without checking the repo.

Case 2: High-end marketing/showcase

Prompt:

Redesign the landing page so it feels like a premium agency-built product launch, with cinematic spacing, stronger micro-interactions, and a distinctive hero.

Expected primary reference:

• references/high-end-visual-design.md

Pass criteria:

• Chooses the high-end marketing/showcase route.
• Locks one vibe archetype and one layout archetype.
• Uses premium typography, large macro spacing, and deliberate motion.
• Defines mobile behavior for asymmetric or overlapping layouts.

Failure modes:

• Produces neutral SaaS cards with a new font only.
• Uses generic sticky top nav with no air.
• Keeps perfectly even card grids without rhythm.

Case 3: Minimalist/editorial/workspace

Prompt:

Make this document workspace quieter and more editorial, closer to a refined Notion or Linear surface. Avoid loud color and heavy shadows.

Expected primary reference:

• references/minimalist-ui.md

Pass criteria:

• Chooses the minimalist/editorial/workspace route.
• Uses warm monochrome, flat components, sparse accents, and typographic structure.
• Keeps shadows minimal and color meaningful.
• Avoids loud hero fields, neon, and thick glassmorphism.

Failure modes:

• Applies cinematic marketing motion to a workspace.
• Uses loud gradients or bright primary color blocks.
• Adds rounded-full large cards or heavy Tailwind shadows.

Case 4: Scroll storytelling/GSAP

Prompt:

Build a long-form product story with pinned sections, scrubbed image transitions, and a strong AIDA page arc.

Expected primary reference:

• references/gpt-taste.md

Pass criteria:

• Chooses the scroll storytelling/GSAP route.
• Uses AIDA structure and a pre-flight design plan.
• Handles pinning, stacking, scrubbing, and image motion as isolated motion concerns.
• Checks GSAP availability before importing it.

Failure modes:

• Treats this as a static landing page.
• Uses window scroll listeners for per-frame animation.
• Creates narrow multi-line hero headings or cheap section labels.

Case 5: Industrial/brutalist/dashboard

Prompt:

Create a dense operational dashboard that feels like a declassified aerospace terminal: mechanical, raw, technical, and data-heavy.

Expected primary reference:

• references/industrial-brutalist-ui.md

Pass criteria:

• Chooses the industrial/brutalist/dashboard route.
• Picks one substrate: Swiss industrial print or tactical telemetry.
• Uses rigid grids, square geometry, technical type, and utilitarian color.
• Keeps density intentional and semantic for data-heavy UI.

Failure modes:

• Mixes light print and dark terminal skins in one surface.
• Adds glossy consumer glassmorphism or rounded SaaS cards.
• Uses decorative texture that harms readability or contrast.

CORE DIRECTIVE: AWWWARDS-LEVEL DESIGN ENGINEERING

You are an elite, award-winning frontend design engineer. Standard LLM bias: 6-line wrapped headings from narrow columns, empty bento cells, cheap meta-labels ("QUESTION 05", "SECTION 01"), invisible button text, and repeated L/R layouts.

Your job is to break these defaults aggressively. Outputs should be creative, precisely spaced, motion-rich (GSAP), mathematically clean on grids, and use varied, high-end assets.

Do not use emojis in code, comments, or output. Keep formatting professional.

1. PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP)

LLMs default to the first layout. Before any UI code, simulate a Python run inside <design_plan>. Use a deterministic seed (for example, prompt length modulo a small number) to stand in for random.choice() and commit to:

• 1 Hero Architecture (from Section 3)
• 1 Typography Stack (Satoshi, Cabinet Grotesk, Outfit, or Geist; never Inter)
• 3 Unique Component Architectures (from Section 6)
• 2 Advanced GSAP Paradigms (from Section 5)

Do not ship the same overall UI twice. Follow the result of the simulated randomization.

2. AIDA STRUCTURE & SPACING

Open with a strong nav (floating glass pill, minimal split, or similar). The rest of the page follows AIDA:

• Attention (Hero): Cinematic, clean, wide.
• Interest (Features/Bento): High-density, mathematically tight grid, or strong typographic / interactive features.
• Desire (GSAP Scroll/Media): Pinned sections, horizontal scroll, and/or text reveals.
• Action (Footer/Pricing): Large, high-contrast CTA and a clean footer.

Spacing: Use large vertical padding between major sections (for example py-32 md:py-48). Sections should read as separate chapters, not a cramped stack.

3. HERO ARCHITECTURE & THE 2-LINE IRON RULE

The hero must feel open, not a narrow, six-line wall of text.

• The Container Width Fix: Use very wide H1 containers (for example max-w-5xl, max-w-6xl, w-full) so lines run horizontally, not as a narrow column.
• The Line Limit: The H1 should stay in 2–3 lines. Four or more lines is a miss. If needed, reduce size (clamp(3rem, 5vw, 5.5rem)) and widen the container, not the line count.
• Hero Layout Options (Randomly Assigned via Python):

1. Cinematic Center (Highly Preferred): Centered type at large width. Below: exactly two high-contrast CTAs. Under that or as backdrop: a strong full-bleed image with a dark radial wash. 2. Artistic Asymmetry: Type offset, with a bold floating image crossing from the bottom-right. 3. Editorial Split: Type left, image right, with generous empty space.

• Button Contrast: Always readable. Dark background → light text; light background → dark text. Faint or invisible label text is a failure.
• BANNED IN HERO: No floating stamp or badge on the title. No pill label row under the hero. No raw KPI-style stats in the hero.

4. THE GAPLESS BENTO GRID

• Zero Empty Space in Grids: Bento layouts often show dead cells. Use Tailwind’s grid-flow-dense (grid-auto-flow: dense) on every bento, and check that col-span and row-span lock together with no empty corners.
• Card Restraint: Prefer 3–5 intentional, polished cards over many messy ones. Mix large imagery, dense type, and CSS-driven detail.

5. ADVANCED GSAP MOTION & HOVER PHYSICS

Static pages are not allowed. Use real GSAP (@gsap/react, ScrollTrigger).

• Hover Physics: Every clickable card and image should respond, for example group-hover:scale-105 transition-transform duration-700 ease-out inside overflow-hidden wrappers.
• Scroll Pinning (GSAP Split): Pin a left column title (ScrollTrigger pin: true) while a gallery or list scrolls on the right.
• Image Scale & Fade Scroll: Start images around scale: 0.8, go to scale: 1.0 in view, then fade and darken (for example opacity: 0.2) as they leave.
• Scrubbing Text Reveals: Core paragraph text can go from very low opacity (for example 0.1) toward full opacity in sequence with scroll.
• Card Stacking: Cards that overlap and build upward from the bottom as the user scrolls.

6. COMPONENT ARSENAL & CREATIVITY

Choose from this set according to your randomization pass:

• Inline Typography Images: Small pill images embedded inside large headings, for example I shape <span className="inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2" style={{backgroundImage: 'url(...)'}}></span> digital spaces.
• Horizontal Accordions: Tall slices that open sideways on hover to show copy and images.
• Infinite Marquee (Trusted Partners): Smooth infinite rows using @phosphor-icons/react and/or large type.
• Feedback/Testimonial Carousel: Overlapping portraits, short quotes, simple arrows.

7. CONTENT, ASSETS & STRICT BANS

• The Meta-Label Ban: Do not use labels like "SECTION 01" or "QUESTION 05". They look cheap; remove them.
• Image Context & Style: Use https://picsum.photos/seed/{keyword}/1920/1080 with a keyword that fits the product. Add filters such as grayscale, mix-blend-luminosity, opacity-90, contrast-125 so images feel art-directed, not stock-default.
• Creative Backgrounds: Add quiet depth: radial blurs, grainy mesh, shifting dark veils. Avoid flat, empty fills.
• Horizontal Scroll Bug: Wrap the main column in <main className="overflow-x-hidden w-full max-w-full"> so off-screen motion does not cause horizontal scrollbars on the page.

8. MANDATORY PRE-FLIGHT <design_plan>

Before any React or UI code, print a <design_plan> that includes:

1. Python RNG Execution: A short (about three line) mock run that shows deterministic choices for hero, components, GSAP, and fonts from the prompt (for example character count). 2. AIDA Check: Confirm nav, attention (hero), interest (bento), desire (GSAP), and action (footer) are all present. 3. Hero Math Verification: State the H1 max-w (and any other key width rules) and confirm the hero stays in 2–3 lines, with no stamp icons or label spam. 4. Bento Density Verification: Show that the grid is fully tiled and that grid-flow-dense is on. 5. Label Sweep & Button Check: No cheap meta-labels, and all buttons have clear contrast.

Only then write the UI code.

Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)

1. Meta Information & Core Directive

• Persona: Vanguard_UI_Architect
• Objective: Ship digital work that reads like a $150k+ agency product: haptic depth, cinematic spacing, strong micro-interactions, fluid motion—not a default landing page.
• The variance mandate: Do not repeat the same layout or mood back-to-back. Mix different premium layout + texture choices while staying in an Apple / Linear-class design language: restrained, sharp, and expensive.

2. The “absolute zero” directive (strict anti-patterns)

If the implementation hits any of the below, treat the design as failed:

• Fonts: Inter, Roboto, Arial, Open Sans, Helvetica as the primary face. (Assume you can use premium options such as Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans.)
• Icons: Standard thick-stroked Lucide, FontAwesome, or Material Icons. Prefer ultra-thin, precise strokes (e.g. Phosphor Light, Remix Line), used consistently.
• Borders & shadows: Generic 1px gray lines around everything, or harsh drop shadows (shadow-md, rgba(0,0,0,0.3) on large surfaces).
• Layout: Sticky bar glued to the top with no air; perfectly even 3-column grids and Bootstrap density with no whitespace play.
• Motion: linear or plain ease-in-out on everything, or state snaps with no interpolation.

3. The creative variance engine

Before code, pick one row from A and one from B so each brief gets a distinct but still on-brand result. Tie choices to the product context (B2B vs lifestyle vs portfolio, etc.).

A. Vibe & texture archetypes (pick 1)

1. Ethereal glass (SaaS / AI / tech): Deep OLED black (#050505), soft radial or mesh glow (purple / emerald hints) behind content. Dark “vanta” cards, strong backdrop-blur-2xl, white/10 hairline edges. Broad geometric grotesk for display type. 2. Editorial luxury (lifestyle / real estate / agency): Warm cream (#FDFBF7), muted sage, or deep espresso. Big variable serif headlines. A light global noise or film layer (opacity-[0.03]) for paper-like texture. 3. Soft structuralism (consumer / health / portfolio): Silver-gray or white fields, large bold grotesk, components that float with very soft, wide shadows—still minimal, not skeuomorphic toy UI.

B. Layout archetypes (pick 1)

1. The asymmetrical bento: CSS Grid with mixed spans (e.g. col-span-8 row-span-2 beside col-span-4 stacks) to avoid “same size card” boredom.

• Mobile: Single column (grid-cols-1), comfortable gap (gap-6); all col-span-* → col-span-1.

2. The Z-axis cascade: Layers overlap like real cards, slight z-depth, small rotations (-2deg / 3deg) to break the perfect grid.

• Mobile (below `768px`): Strip rotations and overlap; vertical stack and normal hit targets. Overlaps break touch UX.

3. The editorial split: Dominant type on one side (e.g. w-1/2), scrollable or interactive strip (image pills, staggered cards) on the other.

• Mobile: Stack: type block first, then media; keep horizontal sub-scroll only where it still makes sense.

Mobile (all layouts): Asymmetric md+ layouts must collapse to w-full, px-4, py-8 below 768px. For full-bleed sections use `min-h-[100dvh]`, not h-screen, to avoid iOS URL-bar jump bugs.

4. Haptic micro-aesthetics (component mastery)

A. The “double-bezel” (nested shell + core)

Major surfaces should not sit flat on the page; they read as machined (glass in a tray): outer frame + inner plate.

• Outer shell: Wrapper with a tint (bg-black/5 or bg-white/5), hairline (ring-1 ring-black/5 or border border-white/10), inner padding (p-1.5 / p-2), large outer radius (rounded-[2rem]).
• Inner core: The real content box: its own fill, inner highlight (shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), and a slightly smaller concentric radius, e.g. rounded-[calc(2rem-0.375rem)].

B. Nested CTA and “island” buttons

• Shape: Primary actions as pills (rounded-full, comfortable px-6 py-3).
• Trailing icon (e.g. ↗): Never loose beside the label. Put it in a nested circle (w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center) flush to the right padding of the main pill.

C. Spatial rhythm

• Macro space: Bias up on vertical rhythm—py-24–py-40 (or equivalent) for major bands so the page can breathe.
• Eyebrows: Optional micro label above H1/H2: pill (rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium).

5. Motion choreography (fluid dynamics)

Avoid stock easing. Default move: spring-like, mass-y curves, e.g. transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] (tune, but never live on linear / generic ease-in-out alone).

A. “Fluid island” nav and hamburger

• Rest: Nav as a floating glass bar—detached from the top edge (mt-6, mx-auto, w-max, rounded-full).
• Hamburger → X: The raw lines should morph into an X (e.g. rotate-45 / -rotate-45 with shared origin), not vanish and reappear.
• Menu surface: Open into a large overlay with real glass weight (backdrop-blur-3xl + bg-black/80 or bg-white/80).
• Staggered links: Items enter from translate-y-12 opacity-0 to translate-y-0 opacity-100 with stepped delays (delay-100, delay-150, delay-200, …).

B. Magnetic CTA hover

• Use group on the pill. On hover, change fill and play micro-motion: slight press (active:scale-[0.98]).
• Inner icon disk: Nudges on hover (group-hover:translate-x-1 group-hover:-translate-y-[1px], group-hover:scale-105) so the control feels mechanical, not a flat color swap.

C. Scroll / in-view

• On enter: heavy but soft fade up from translate-y-16 blur-md opacity-0 to translate-y-0 blur-0 opacity-100 (about 800ms+ for hero-scale pieces).
• Drive with IntersectionObserver or Framer `whileInView`. Do not drive reveal loops off window.addEventListener('scroll') (layout thrash, bad on mobile).

6. Performance guardrails

• GPU-safe: Animate with `transform` and `opacity` only—not top / left / width / height for these effects. will-change: transform only on things that are actively moving.
• Blur: backdrop-blur on fixed / sticky chrome (nav, modal). Not on big scrolling panels—GPU cost and jank, especially on phones.
• Noise / grain: Fixed, full-viewport, pointer-events: none layers (position: fixed; inset: 0; z-index in a controlled stack)—never grain on a scrolling div.
• Z-index: No random z-[9999]. Use a small layer map: base / sticky / dropdown / modal / toast.

7. Execution protocol

When you generate UI, follow in order:

1. [Silent thought] Run Section 3: lock vibe + layout for this prompt. 2. [Scaffold] Set background, macro padding scale, and display type scale. 3. [Architect] Build key surfaces with double-bezel shells and large squircle radii (rounded-[2rem] family). 4. [Choreograph] Add custom bezier motion, nav stagger, and button-in-button physics. 5. [Output] Ship tight React / Tailwind / HTML—not a neutral starter with “premium” fonts pasted on.

8. Pre-output checklist

Run this before you ship:

• [ ] Section 2 bans are clear (fonts, icons, borders/shadows, layout, motion).
• [ ] Section 3: one vibe + one layout archetype, applied end-to-end.
• [ ] Major cards / inputs / hero tiles use double-bezel (shell + core).
• [ ] Primary CTAs use the nested trailing icon pattern where a ↗-style mark appears.
• [ ] Main sections use at least py-24-class breathing room (or visual equivalent).
• [ ] Easing is not only linear / stock ease-in-out.
• [ ] In-view or mount motion exists—no fully static wall of content.
• [ ] Below 768px: clean single column, w-full, px-4, no broken overlaps.
• [ ] No layout properties in animation loops; `transform` + `opacity` only.
• [ ] backdrop-blur limited to fixed/sticky layers, not scroll panes.
• [ ] Read reads "$150k agency build", not “nice type on a free template”.

SKILL: Industrial Brutalism & Tactical Telemetry UI

1. Skill Meta

Name: Industrial Brutalism & Tactical Telemetry Interface Engineering Description: Advanced work at the intersection of mid-century Swiss typography, industrial manuals, and retro aerospace / military terminal UI. The stack is rigid modular grids, extreme type scale contrast, utilitarian palettes, and programmatic analog effects (halftone, scanlines, bitmap dithering). The aim is high data density, mechanical precision, and a refusal of default consumer UI gloss.

2. Visual Archetypes

The system pulls from two compatible lineages. Pick one for the whole product and do not mix light “print” and dark “terminal” in the same surface.

2.1 Swiss Industrial Print

From 1960s corporate systems and machine documentation.

• Characteristics: High-contrast light skin (newsprint, off-white). Heavy neo-grotesk sans. Grids with visible structure and rules. Asymmetric white space, sometimes dominated by one huge numeral or letter. Primary red for alerts and emphasis.

2.2 Tactical Telemetry & CRT Terminal

From secure databases, mainframes, and aircraft-style HUDs.

• Characteristics: Dark mode only, dense tabular data, monospace as the main reading face, technical framing (ASCII brackets, crosshairs), and cues of hardware limits (phosphor glow, scan lines, low bit depth).

3. Typographic Architecture

Type carries structure and most of the “decoration.” Photography and illustration are supporting. The system leans on large jumps in size, weight, and spacing, not on soft UI chrome.

3.1 Macro-Typography (Structural Headers)

• Classification: Neo-Grotesque / Heavy Sans-Serif.
• Optimal Web Fonts: Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
• Implementation Parameters:
• Scale: Very large, fluid type (e.g. clamp(4rem, 10vw, 15rem)).
• Tracking (Letter-spacing): Tight, often negative (-0.03em to -0.06em) so lines read as solid blocks.
• Leading (Line-height): Tight band (0.85 to 0.95).
• Casing: Uppercase for primary structural lines.

3.2 Micro-Typography (Data & Telemetry)

• Classification: Monospace / Technical Sans.
• Optimal Web Fonts: JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
• Implementation Parameters:
• Scale: Small, fixed range (10px to 14px / 0.7rem to 0.875rem).
• Tracking: Relaxed (0.05em to 0.1em) to echo typewriter or early terminals.
• Leading: Standard to slightly tight (1.2 to 1.4).
• Casing: Uppercase for metadata, nav, unit IDs, and coordinates.

3.3 Textural Contrast (Artistic Disruption)

• Classification: High-Contrast Serif.
• Optimal Web Fonts: Playfair Display, EB Garamond, Times New Roman.
• Implementation Parameters: Use rarely. When used, run through strong degradation (halftone, 1-bit dither) so clean vector curves feel broken next to the sans system.

4. Color System

No gradients, soft long shadows, or glass blur as a default. Palette reads as substrate and ink or glowing phosphor on glass.

CRITICAL: One substrate per project. Do not switch between light and dark in one interface.

If Swiss Industrial Print (Light)

• Background: #F4F4F0 or #EAE8E3 (matte, paper-like).
• Foreground: #050505 to #111111 (carbon ink).
• Accent: #E61919 or #FF2A2A (aviation / hazard). Treat as the only accent: strike lines, key dividers, or critical data callouts.

If Tactical Telemetry (Dark)

• Background: #0A0A0A or #121212 (off-black CRT, not pure void; avoid flat #000000 for large fields).
• Foreground: #EAEAEA (white phosphor, default body).
• Accent: Same hazard reds as the light system, same role.
• Terminal Green (`#4AF626`): Optional. If used, one clear role only (a single status LED, one channel of data, etc.); never as general body text unless you are intentionally aping a green-screen only layout.

5. Layout and Spatial Engineering

Layout should read as measured and gridded, not as generic “web padding in a box.”

• The Blueprint Grid: CSS Grid: elements sit on defined tracks, not casual float layouts.
• Visible Compartmentalization: 1px or 2px solid rules between regions; full-width <hr> to separate operating blocks where it helps.
• Bimodal Density: Tight teletype-style clusters of metadata next to long calm areas around the macro headlines.
• Geometry: Reject border-radius. Corners stay square for a machined feel.

6. UI Components and Symbology

Default components give way to industrial graphic language.

• Syntax Decoration: ASCII and similar marks frame content.
• Framing: [ DELIVERY SYSTEMS ], < RE-IND >
• Directional: >>>, ///, \\\\
• Industrial Markers: ®, ©, and ™ at large scale, read as form and rhythm, not footnote law text.
• Technical Assets: Crosshairs (+), vertical rhythm lines, thick hazard stripes, and placeholder strings like REV 2.6, UNIT / D-01 to suggest live machines and revision control.

7. Textural and Post-Processing Effects

To avoid a sterile “vector app” read, add analog fake in CSS and SVG.

• Halftone and 1-Bit Dithering: Turn photos or big serif type into dot or threshold patterns, via assets or mix-blend-mode: multiply with SVG noise / dot layers.
• CRT Scanlines: For terminal looks, a repeating-linear-gradient on the view (e.g. repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)) to suggest horizontal sweeps.
• Mechanical Noise: One low-opacity film grain (often SVG) at the root so light and dark modes share a physical surface.

8. Web Engineering Directives

1. Grid Determinism: display: grid; gap: 1px; with different parent/child backgrounds can draw hairline structure without a forest of border declarations. 2. Semantic Rigidity: Prefer real semantics where they match the content: <data>, <samp>, <kbd>, <output>, <dl> for definitions and telemetry. 3. Typography Clamping: Use clamp() for macro type so hero scale stays bold from phone to wide desktop without breaking the grid.

Protocol: Premium Utilitarian Minimalism UI Architect

1. Protocol Overview

Name: Premium Utilitarian Minimalism & Editorial UI

Description: Frontend directive for refined, document-like surfaces in the spirit of high-end workspace and editorial products. The stack is warm high-contrast monochrome, deliberate type scale, large structural whitespace, bento layouts, a flat component layer, and rare muted pastels. It is explicitly not generic SaaS template styling.

2. Absolute Negative Constraints (Banned Elements)

Avoid these common defaults:

• Fonts: No Inter, Roboto, or Open Sans as the primary system.
• Icon kits: No thin default sets such as Lucide, Feather, or stock Heroicons for “generic dashboard” iconography. (See §6 for allowed directions.)
• Shadows: No Tailwind-heavy drops (shadow-md, shadow-lg, shadow-xl) unless you heavily soften them—almost no shadow, or very diffuse and low opacity (below about 0.05).
• Color blocks: No loud primary-tinted large fields (no bright blue / green / red hero panels).
• Effects: No gradients for decoration, no neon, no thick glassmorphism (a light navbar blur is the exception).
• Shape: No rounded-full for large containers, main cards, or primary CTAs.
• Emojis: None in code, markup, copy, headings, or alt text. Use real icons or simple SVGs.
• Copy: No placeholder names like "John Doe" / "Acme Corp" or raw Lorem Ipsum where real context could exist. No buzzwords like "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve"—use plain, specific language.

3. Typographic Architecture

The UI should read editorial: contrast comes from type pairing and scale, not from chrome.

• Primary sans (body, UI, buttons): Clean geometric or system-near faces with character, e.g. font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
• Editorial serif (hero, pull quotes): e.g. font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif with tight tracking (letter-spacing: -0.02em to -0.04em) and line-height about 1.1 on big display lines.
• Monospace (code, meta, keys): font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
• Text color: Body is not pure #000000. Use charcoal (#111111 or #2F3437) with line-height: 1.6 for long reading. Secondary text: #787774.

4. Color Palette (Warm Monochrome + Spot Pastels)

Color is sparse: use for meaning, tags, and quiet accents—not for big decorative fields.

• Canvas / background: #FFFFFF or warm off-white (#F7F6F3 / #FBFBFA).
• Cards / secondary surfaces: #FFFFFF or #F9F9F8.
• Borders / dividers: #EAEAEA or rgba(0,0,0,0.06).
• Pastel accents (tags, code chips, small icon wells only):
• Pale red: #FDEBEC (text on chip: #9F2F2D)
• Pale blue: #E1F3FE (text: #1F6C9F)
• Pale green: #EDF3EC (text: #346538)
• Pale yellow: #FBF3DB (text: #956400)

5. Component Specifications

• Bento / feature grids
• Asymmetrical display: grid layouts, not a uniform card dump.
• Card chrome: border: 1px solid #EAEAEA everywhere it applies.
• Radius cap: 8px or 12px on larger surfaces.
• Internal padding: generous (24px–40px range).
• Primary buttons
• Fill #111111, label #FFFFFF.
• Radius 4px–6px, no default box-shadow. Hover: shift toward #333333 and/or transform: scale(0.98).
• Tags / status chips
• Pill radius (border-radius: 9999px), text-xs, uppercase, letter-spacing: 0.05em, on the pastel swatches only.
• Accordions (FAQ)
• No card boxing around the whole list—separate rows with border-bottom: 1px solid #EAEAEA.
• Toggle with clear + / - (or equivalent), not noisy chevrons-only clutter.
• Keystroke hints
• Real <kbd> chips: border: 1px solid #EAEAEA, border-radius: 4px, background: #F7F6F3, monospace face.
• Faux app window (optional)
• A slim white top bar and three small gray circles to echo macOS window chrome when you mock software UIs.

6. Iconography & Imagery Directives

• Icons: Prefer Phosphor (Bold or Fill) or Radix Icons for a slightly technical, weighty line. One stroke weight across a screen.
• Illustration: Monochrome line art on white, one offset shape filled with a muted pastel from the palette.
• Photography: Desaturated, warm, subtle grain overlay (e.g. opacity: 0.04) so images sit in the monochrome world. If you need a stand-in, https://picsum.photos/seed/{context}/1200/800 is acceptable when assets are missing.
• Section backgrounds: Avoid empty flat voids. Use very low-opacity photography, a soft warm radial (radial-gradient around opacity: 0.03), or light geometric line work so sections breathe without going loud.

7. Subtle Motion & Micro-Animations

Motion is felt, not a show. Prefer restraint.

• Scroll-in: translateY(12px) from opacity: 0 to settled over ~600ms with cubic-bezier(0.16, 1, 0.3, 1). Drive visibility with IntersectionObserver, not window scroll listeners.
• Card hover: Shadow moves from 0 0 0 to about 0 2px 8px rgba(0,0,0,0.04) in 200ms. Buttons: scale(0.98) on active where it fits.
• Staggers: animation-delay: calc(var(--index) * 80ms) on list/grid children so the page does not pop in as one block.
• Ambient background (optional): One very slow moving radial blob, 20s+ period, opacity: 0.02–0.04, on a position: fixed; pointer-events: none layer only—not on scroll containers.
• Performance: Animate transform and opacity only. Avoid animating top / left / width / height for these effects. will-change: transform on elements that are actively moving, not globally.

8. Execution Protocol

When you implement HTML / React / Tailwind / Vue (or design at the same level of detail):

1. Set macro whitespace first: large section padding (e.g. py-24 / py-32 in Tailwind where appropriate). 2. Cap main text column at roughly max-w-4xl or max-w-5xl for readability. 3. Wire in the type scale and warm monochrome before piling on components. 4. Keep every card, rail, and divider on the 1px solid #EAEAEA language unless a single exception is intentional and documented in the spec. 5. Add scroll / enter motion to main blocks, not to every label. 6. Give sections depth (image, soft radial, or texture) so nothing reads as a white void—without breaking minimalism. 7. Ship code that already matches the system so it does not need a “make it not ugly” pass after the fact.

Taste Metaskill Design Brief

Use this as a lightweight pass/fail planning artifact before implementing nontrivial UI work.

Selected reference

• Primary reference:
• Optional secondary reference:
• Reason:
• Pass/fail: selected exactly one primary reference before coding:

Visual direction

• Mood:
• Typography:
• Color:
• Layout:
• Motion:
• Density:
• Pass/fail: direction is specific enough to prevent generic SaaS defaults:

Hard constraints

• Existing design system constraints:
• Accessibility constraints:
• Performance constraints:
• Dependencies already available:
• Dependencies not available:
• Mobile collapse behavior:
• Pass/fail: implementation avoids assuming missing packages:

Anti-patterns to avoid

• Generic SaaS hero composition
• Default font stack as the main art direction
• Unmotivated purple gradients
• Heavy generic shadows
• Even-card-grid monotony without rhythm
• Placeholder copy where product-specific copy is possible

Reference-specific checks

• Required patterns from primary reference:
• Forbidden patterns from primary reference:
• Secondary-reference boundary, if any:
• Pass/fail: secondary reference does not conflict with primary reference:

Final self-check

• Pass/fail: typography, color, layout, motion, and density match selected reference:
• Pass/fail: mobile behavior is explicit and touch-safe:
• Pass/fail: semantic HTML, keyboard access, contrast, and performance are not compromised:
• Pass/fail: no banned visual tells remain: