taste-skill

# High-Agency Frontend Skill (taste-skill) > **Portability note:** This skill is stack-agnostic frontend craft (React/Next + Tailwind + Framer/GSAP) — no OmegaOS VPS dependency. It runs anywhere a frontend codebase exists. ## 0. SINGLE-VOICE CRAFT (do NOT parallelize) This is a **Bucket B** skill: one designer, one coherent voice, one deliverable. The taste lives in a single consistent hand — palette, type, motion, and spacing must read as authored by ONE senior engineer, not stitched from parallel workers. - **NO fan-out, NO parallel sub-agents** for the design itself. Splitting the UI across delegates fractures the palette, breaks rhythm, and produces Frankenstein interfaces (R-SCOPE: one writer per surface). Parallelism is allowed ONLY for read-only recon (e.g. reading `package.json`, scanning existing components) — never for generation. - **One palette, one type system, one motion DNA** across the entire output. Lock the dials (Section 1) once, then hold them for every component. - **Hold the line under pressure.** If asked to "go faster", do not drop states, dilute motion physics, or fall back to generic cards — degrade scope (fewer components), never craft (L5: quality over speed). ### Craft upgrades (apply on top of the rules below) 1. **Establish the spec BEFORE the first component.** Write a one-block design contract: the locked dials (8/6/4 or user-overridden), the chosen font stack, the single accent, the neutral base (Zinc/Slate), the radius + shadow tokens. Every component derives from this — no per-component improvisation. 2. **Vertical rhythm as a system, not a guess.** Pick a spacing scale (e.g. 4/8/12/16/24/32) and a type scale, then snap every margin/padding/leading to it. "Mathematically perfect" (Section 7) means tokens, not eyeballed values. 3. **Motion has a single signature.** Choose ONE spring profile (`stiffness/damping`) and ONE easing curve, then reuse them everywhere. Inconsistent easing across components is the #1 tell of a non-authored interface. ## OUTPUT CONTRACT (what this skill produces) - Production-ready React/Next + Tailwind component code, clean and copy-pasteable, with `'use client'` correctly placed and isolated motion leaves. - A short **design contract block** at the top (locked dials, fonts, accent, neutrals, radius/shadow tokens) so the voice is auditable. - Required install commands listed FIRST whenever a 3rd-party lib is missing from `package.json`. - All interactive components ship full state cycles (loading / empty / error / active), never just the happy path. ## VERIFY (before claiming done) 1. Run the **Section 10 pre-flight matrix** — every box must pass. 2. Re-read the locked design contract: confirm palette, type, motion, and spacing are consistent across EVERY component (single-voice check). 3. Grep your own output for AI tells (Section 7): Inter font, purple/neon glows, pure black, 3-equal-card rows, "John Doe", Unsplash links, filler words ("Elevate"/"Seamless"). Any hit = fix before output. 4. **Evidence / no-hallucination guardrail:** never assume a library, font, or component exists — verify against `package.json` / the actual file tree and cite what you checked. If a dependency is absent, emit the install command instead of importing blind. Do not invent file paths, component names, or props you have not confirmed. <!-- BEGIN: Tier-1 Reference Canon + claude.ai/design Taste Engine (OmegaOS design doctrine) --> ## 0. NORTH STAR — Tier-1 Reference Canon & the claude.ai/design Taste Engine Default output must read as a **Linear/Vercel-tier clone, not a generic Tailwind template**. The bar is `linear.app` and the 19-site canon; anything that reads "default shadcn / bootstrap / stock SaaS" has FAILED and must be raised, not shipped. - Pass test: one accent + hairline structure + tight negative display tracking + dark-first (or fully-themed) depth + motion restraint — a designer should not be able to tell it apart from a Tier-1 reference at a glance. - Pick ONE coherent dialect (a temperature + one or two signature deviations) and commit; never blend three sites' accents into a soup. - Steal verified discipline, not hex blindly — never invent false precision (a curve/token a site does not actually ship). - When unsure, return to the canon and measure against the Anchor before calling it done. ### Default taste engine — distilled from claude.ai/design + the Linear-tier canon Apply these unless the user overrides — a contrary brief wins, but absence of one does not; fall back to these defaults: 1. **Restraint is the feature.** Default to LESS — one accent, one type family, few elements per section. Suppress motion on high-frequency surfaces (nav hover, keyboard actions) entirely. If a flourish doesn't earn its place, cut it. The most-copied trait of every canon site is what they left out. 2. **Single-accent color discipline.** Exactly ONE accent hue carries brand + CTAs + focus; everything else is a neutral ramp. Reserve any second/third color for *state* (success/error) or *data*, never decoration. A near-black or near-white never goes pure `#000`/`#FFF`. 3. **Warmth or cool — pick a temperature and commit.** Choose ONE: cool (Linear indigo, Vercel blue, neutral-blue-black) OR warm (claude.ai cream + terracotta, Railway violet, PlanetScale/orange). Build the *entire* neutral ramp to match it (claude.ai runs warm ivory + warm-charcoal, never blue-black). Never mix warm and cool grays in one project. 4. **Typographic confidence via weight + size + tracking, not theatrics.** Display ≤600 weight (whisper, never 800-black). Apply size-proportional NEGATIVE tracking on large display (~-.02 to -.05em), neutral on body; the only positive tracking is a small uppercase eyebrow. Body never below ~14px. A neutral grotesk is the floor; a serif body (claude.ai) or a mono-as-second-voice (Vercel/PlanetScale/Oxide) is the anti-generic signature — never default to bare Inter for premium. 5. **Hairline structure over heavy chrome.** Build with 1px (or .5px) borders — solid neutral, or translucent white/black over a dark canvas so edges *glow* rather than cut. Snap everything to a 4px spacing ladder with a generous fixed section beat (~96px), cap content width (~1200–1280px), and keep a consistent small radius ladder (4/8/12px; pills only for chips/toggles). 6. **Depth from surface + light, not drop-shadow glow.** Prefer a near-black surface ladder + hairlines (Linear), a single colored glow/ring (Neon's 1px green ring, Clerk's halo), or a soft tinted shadow (claude.ai composer) — never a generic gray box-shadow or the "AI purple" neon glow. Ban shadow-glow as the default depth cue. 7. **Motion discipline — short, eased, purposeful.** Animate only `transform`/`opacity`. Keep interactive transitions snappy (treat ~150–200ms as a target, verify on the real site — don't assert a curve a site never ships). One easing family per project; differentiate reveals by staggered DELAY, not by switching curves. Reserve longer/ambient motion for one hero centerpiece. No bounce on chrome, no parallax-by-default, no scroll-jacking. 8. **Dark-first depth as a first-class mode (and a real light mode).** Default to a dark or dark-capable canvas with the surface-ladder/glow depth language; if light-first (Clerk/cal.com/WorkOS/claude.ai light), ship BOTH modes via a token swap — never leave a half-built theme. 9. **Craft in the details — keyboard-first, honest content.** Real `:focus-visible` rings (token-tinted, with offset), tactile press states (`active:scale`/`translate-y`), branded `::selection`, IDE-tokenized inline code. Show real artifacts (actual config, real metrics) over stock imagery; no emojis, no filler chrome ("scroll to explore"), no fake round numbers. 10. **The clone test as the bar.** Output should be indistinguishable from a Tier-1 site (Linear/Vercel-tier): one accent, hairline structure, tight tracking, dark-first depth, motion restraint. "Generic Tailwind template" is a failure state — raise it until it reads canon. ### The canonical reference set — anchor = linear.app Build to this bar by default; the output should sit beside these. **Anchor** - **linear.app** — steal: near-black `#08090A` canvas, ONE desaturated indigo `#5e6ad2`, Inter at weight ≤600 with size-proportional NEGATIVE tracking, depth from a surface-ladder + 1px hairlines (NEVER shadow-glow), 96px section beat on a 4px grid, motion that suppresses itself on high-frequency surfaces. **Tier 1 — Quasi-identical to Linear** - **vercel.com** — steal: Geist Sans + Geist Mono, pure `#000` / `#EDEDED` mono palette, ONE blue `#0070F3` as punctuation, hairline `rgba(255,255,255,.08)` cards, and the morphing shared-layout nav (sliding pill + resizing panel). - **planetscale.com** — steal: ZERO custom fonts (body in system MONO, sans is the exception), WARM orange `#f35815`, sharp 0-radius boxes via the dashed-box border + ASCII diagrams, and hover color-swaps that are 0ms instant. - **railway.app** — steal: IBM Plex Serif display (weight 500) over Inter body, VIOLET-tinted neutrals (hue 246), magenta→violet accent (`ring-pink-700`, CTA `#aa0aaa→#381dbd`), glow-grows-not-box CTA, blueprint-grid hairlines, and the live split-flap board. - **resend.com** — steal: Domaine + ABC Favorit display, achromatic Radix-gray on `#000` with NO solid accent — color exists only as a traveling glow on a 1px divider; IDE-token inline code. - **cal.com** — steal: Cal Sans display (POSITIVE tracking on small subheads) + Inter body, grayscale-as-brand (theme-flipping near-black `#111827` ↔ white CTA), 4px radius, graded per-state button shadows, branded `::selection`. **Tier 2 — Same energy** - **clerk.com** — steal: Suisse Int'l, body floor 15px, LIGHT-first with a warm violet primary `#6c47ff` + cyan `#5de3ff` demoted to a four-stop glow halo, .5px+1px hairlines with inset-rim shadows. - **trigger.dev** — steal: Satoshi titles + Geist UI + Geist Mono, ONE acid-lime `#a8ff53` (with a real lavender `#7655fd` second accent) on bespoke cool-charcoal, ONE easing only, and the `moving-lines` diagonal card-hover. - **turso.tech** — steal: Inter display at `-.03em`, Bunker-black `#0D1318` + mint Turso Aqua `#4FF8D2`, aqua-FILL/BLACK-text CTA, fuchsia second accent, hairline-flip-to-aqua hovers, near-invisible 5%-opacity light dot-grid. - **outstatic.com** — steal: a giant `leading-[0.9]` SERIF hero + one achromatic gradient-clipped word, light-first monochrome zinc, full-bleed SVG line-bg layers, and the neo-brutalist hard-offset-shadow push button. - **supabase.com** — steal: Circular Std at weight 500 (default tracking, NOT tight), 0°-saturation grayscale lit by ONE emerald `#3ECF8E` (green = success), neutral-gradient hairline cards, framer/anime/gsap motion at 400ms. - **neon.tech** — steal: one-weight custom display ("esbuild") + Inter + GeistMono, pure-black + mint `#00e599` shipped as a full alpha ladder, a 1px green RING instead of a drop-shadow on hover, 10%-green bloom gradients. **Tier 3 — A cut above on craft** - **liveblocks.io** — steal: Suisse Intl with JetBrains-Mono eyebrows, translucent-white hairlines (`#fdfcfc21`) that GLOW over `#000`, a multi-channel per-product semantic accent system locked to one lightness band, and CSS mask-sweep reveals. - **basehub.com** — steal: Geist + Geist Mono (by Geist's makers), pure-gray near-black `#040404` + warm orange `#FF6C02`, a five-layer rgba-orange ember glow as a scroll-progress pin, per-character 3D sin()-staggered list tumble. - **basement.studio** — steal: Geist Sans + flauta display on TRUE-black brutalism, loud per-case-study accents (`#ff4d00`/`#00FF9B`), translucent `white/.2` + `#2E2E2E` hairlines, and the `steps()` frame-stepped sprite mask reveal. - **rauno.me** — steal: a private bespoke face at tiny 14px, PURE-achromatic `hsl(0 0% N%)` neutrals, matte soft `0.12`-alpha shadows (no glow), a bounded OS-desktop canvas, and the hand-built right-edge minimap navigator. **Tier 4 — Style-defining** - **oxide.computer** — steal: SuisseIntl + a custom GT America Mono that DRAWS live ASCII diagrams, color authored in OKLCH (cool-black `oklch(0.162 0.01 260)` + oxide-green `≈#00D889`, green=success), one unified stroke token for all 1px edges, low-bounce Framer springs. - **workos.com** — steal: Untitled Sans with `-.05em→-.07em` display tracking, light↔dark-navy sandwich, indigo `#6363f1` primary + a saturated spectrum reserved for the signature stacked-RGBA chromatic glow; pill buttons, 1px hairlines. - **claude.ai** — steal: warm-cream ivory canvas (`#faf9f5`, never cold gray), a single terracotta `#d97757` accent, longform body in a SERIF (anti-AI-slop), soft drop-shadow depth over hairlines, token-streaming text as the signature motion. Full per-site breakdown (all five dimensions, signatures, and how each relates to linear.app) lives in `skills/design/references/tier1-inspiration.md` — read it for the canonical detail behind this taste layer. <!-- END: Tier-1 Reference Canon + claude.ai/design Taste Engine --> ## 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).