The Mechanism

• Each SKILL.md defines a persona and directives
• YAML frontmatter provides name and description
• Rules override the LLM's default statistical biases
• Agent loads the skill into context before generating code
• Works with any agent that supports the skills protocol

Example Frontmatter

---
name: design-taste-frontend
description: Senior UI/UX Engineer.
  Architect digital interfaces
  overriding default LLM biases.
  Enforces metric-based rules,
  strict component architecture,
  CSS hardware acceleration,
  and balanced design
  engineering.
---

Statistical Defaults the LLM Reaches For

• Inter font (appears in millions of codebases)
• Three-column equal card grids
• Centered hero sections
• Purple/blue AI gradient buttons
• Pure black #000000 text
• Generic Lucide/FontAwesome icons
• Static UI with no interaction states
• Linear easing on all transitions

Taste Skill's Corrections

• Force Geist, Outfit, Cabinet Grotesk, Satoshi
• Ban 3-column grids, require asymmetry
• Ban centered heroes when variance > 4
• Ban purple/neon; enforce neutral + 1 accent
• Require off-black (Zinc-950, #0a0a0a)
• Mandate Phosphor or Radix icons only
• Require loading, empty, error, and active states
• Spring physics with custom cubic-bezier

Rule 1: Deterministic Typography

• Headlines: text-4xl md:text-6xl tracking-tighter
• Body: text-base text-gray-600 max-w-[65ch]
• Serif fonts BANNED for dashboard UIs
• Mandatory font pairings: Geist + Geist Mono

Rule 2: Color Calibration

• Max 1 accent color, saturation < 80%
• "AI Purple" aesthetic is strictly banned
• Neutral base (Zinc/Slate) + singular accent
• Never mix warm and cool grays

Rule 3: Layout Diversification

• Centered heroes banned when variance > 4
• Force split-screen, left-aligned, or asymmetric

Rule 4: Materiality & Anti-Card Overuse

• For density > 7, cards are BANNED
• Use border-t, divide-y, or negative space
• Shadows must be hue-tinted to background

Rule 5: Interactive UI States

• Skeletal loaders (not spinners)
• Beautiful empty states
• Inline error reporting
• Tactile feedback: scale-[0.98] on active

Rule 6: Data & Form Patterns

• Label above input, error below
• Standard gap-2 spacing
• Helper text optional but in markup

Visual & CSS Tells

• Neon/outer glow box-shadow
• Pure black #000000 anywhere
• Oversaturated accent colors
• Gradient text on large headers
• Custom mouse cursors

Typography Tells

• Inter font (the universal "AI default")
• Oversized H1s that "scream"
• Serif on clean dashboards

Content Tells ("The Jane Doe Effect")

• "John Doe", "Sarah Chan" — generic names
• Perfect round numbers: 99.99%, 50%
• Startup names: "Acme", "Nexus", "SmartFlow"
• Filler words: "Elevate", "Seamless", "Unleash"
• Broken Unsplash image links
• Emojis anywhere (the Anti-Emoji Policy)

Layout Tells

• 3 equal cards in a row
• Everything centered symmetrically
• Awkward floating gaps

Liquid Glass Refraction

When glassmorphism is needed: go beyond backdrop-blur. Add a 1px inner border border-white/10 and a subtle inner shadow to simulate physical edge refraction.

Magnetic Micro-Physics

When motion > 5: buttons pull toward the cursor. Must use Framer Motion's useMotionValue and useTransform, never React useState (which causes render-loop performance collapse).

Perpetual Micro-Interactions

When motion > 5: embed continuous animations — pulse, typewriter, float, shimmer — with spring physics (stiffness: 100, damping: 20).

Layout Transitions

Use Framer Motion layout and layoutId props for smooth re-ordering and shared element transitions.

Staggered Orchestration

Never mount lists instantly. Use staggerChildren or CSS cascade delays for sequential waterfall reveals.

/* CSS cascade approach */
animation-delay:
  calc(var(--index) * 100ms);

/* Or Framer Motion */
variants: {
  show: {
    transition: {
      staggerChildren: 0.1
    }
  }
}

Navigation

• Mac OS Dock Magnification
• Gooey liquid detach menu
• Dynamic Island morphing pill
• Contextual radial menu at click point

Layout & Grids

• Bento Grid (Apple Control Center)
• Masonry (Pinterest)
• Split Screen Scroll (opposing halves)
• Curtain Reveal on scroll

Cards & Containers

• Parallax 3D tilt card (mouse tracking)
• Spotlight border illumination
• Holographic foil iridescence
• Morphing Modal expansion

Scroll Animations

• Sticky scroll card stacking
• Horizontal scroll hijack
• SVG path scroll progress drawing
• Liquid swipe page transitions

Typography & Text

• Kinetic marquee (direction-sensitive)
• Text mask reveal over video
• Matrix-style text scramble
• Circular text path spinning

Micro-Interactions

• Particle explosion on CTA success
• Directional hover-aware button fill
• Mesh gradient animated backgrounds
• Lens blur depth for foreground focus

GPU-Safe Animation

Blur Constraints

• backdrop-blur only on fixed/sticky elements
• Never on scrolling containers
• Causes continuous GPU repaints on mobile

DOM Cost Control

• Grain/noise overlays on fixed inset-0 pointer-events-none pseudo-elements only
• Never attached to scrolling containers

Z-Index Discipline

• No arbitrary z-50 or z-[9999]
• Reserved for systemic layers only: nav, modals, overlays

Viewport Stability

• Never h-screen for hero sections
• Always min-h-[100dvh] to prevent iOS Safari jump

Framework Defaults

• React or Next.js
• Default to Server Components (RSC)
• Interactive parts isolated as 'use client' leaf components
• Tailwind CSS v3/v4 for 90% of styling

Dependency Verification

Strict Policies

Tailwind Version Lock

Must check package.json for v3 vs v4. v4 uses @tailwindcss/postcss plugin, not the v3 approach.

Vibe Archetypes (Pick 1)

The "Double-Bezel" Pattern

Every premium card uses nested enclosures like machined hardware:

<!-- Outer Shell -->
<div class="bg-black/5
  ring-1 ring-black/5
  p-1.5 rounded-[2rem]">

  <!-- Inner Core -->
  <div class="bg-white
    shadow-[inset_0_1px_1px_...]
    rounded-[calc(2rem-0.375rem)]">
    ...content...
  </div>

</div>

Outer shell + inner core = physical depth illusion. Radius is mathematically concentric.

Minimalist Skill

Notion/Linear-inspired editorial design

• Warm monochrome palette: bone #F7F6F3
• Ultra-light borders: 1px solid #EAEAEA
• Fonts: SF Pro Display, Geist Sans, Switzer
• Serif headlines: Lyon Text, Newsreader
• Shadows at < 0.05 opacity
• Entry animations: translateY(12px) over 600ms
• Background drift: 20+ second durations
• Solid black buttons #111111, 4-6px radius

Banned: Inter, Roboto, Lucide, Feather, gradients, emojis, heavy shadows

Brutalist Skill (Beta)

Swiss typography meets CRT terminal aesthetics

• Two paradigms: Swiss Industrial Print or Tactical Telemetry
• Light: #F4F4F0 bg, #050505 text
• Dark: #0A0A0A bg, #E61919 accent red
• Terminal green #4AF626 sparingly
• 90-degree corners only — no border-radius
• ASCII framing: brackets, crosshairs, barcodes
• CRT scanlines via repeating gradients
• Halftone/dithering via mix-blend-mode

Banned: gradients, shadows, translucency, rounded corners

Output Skill: Anti-Laziness Enforcement

Addresses AI's tendency to produce incomplete code:

Banned Shortcuts

• // ... and // TODO placeholder comments
• Ellipsis replacing omitted code
• "For brevity..." or "similarly for the remaining..."
• Skeleton outputs when full implementation was requested
• Describing code instead of writing it

When hitting token limits: write at full quality to a clean breakpoint, then emit a structured pause marker for resumption.

Stitch Skill: Google Stitch Bridge

Generates DESIGN.md files compatible with Google Stitch's AI screen generation pipeline.

• Translates taste-skill directives into semantic design language
• Same three-dial system (variance, motion, density)
• Same anti-patterns and font rules
• Adds hero section standards: inline image typography at type-height
• Enforces strict spatial separation: no overlapping elements
• Touch targets minimum 44px
• Typography scaling via clamp()
• Section gaps: clamp(3rem, 8vw, 6rem)

Essentially a "translation layer" so taste-skill principles work inside Google's tooling.

Design Spec

• Background: #f9fafb
• Cards: pure white #ffffff
• Border: 1px border-slate-200/50
• Radius: rounded-[2.5rem] for all containers
• "Diffusion shadow" — ultra-wide, ultra-light
• Font: strict Geist/Satoshi/Cabinet Grotesk
• Titles and descriptions outside and below cards

The Philosophy

"Vercel-core meets Dribbble-clean" — perpetual physics-driven bento grid where every tile has its own micro-animation running continuously.

Shadow Formula

shadow-[
  0_20px_40px_-15px_
  rgba(0,0,0,0.05)
]

Wide spread, low opacity, large negative offset — creates a "floating" effect without harsh edges.

Animation Library Integration

• Framer Motion for UI/Bento interactions (default)
• GSAP + ScrollTrigger for full-page scrolltelling
• Three.js/WebGL for 3D canvas backgrounds

Supported AI Agents

• Cursor — via skills protocol integration
• Claude Code — Anthropic's CLI agent
• Antigravity — AI development platform
• Google Stitch — via stitch-skill translation
• Any agent supporting the npx skills protocol

Project Stats

What Makes This Approach Unique

• Prompt engineering as design system — design rules encoded as Markdown, not CSS libraries
• Bias correction, not generation — overrides statistical defaults rather than adding new capabilities
• Parameterized via dials — three numeric axes let you tune output without editing the skill file
• Composable — pick one skill or combine several
• Framework-aware — checks package.json, Tailwind version, RSC boundaries
• Performance-aware — GPU-safe animation rules built in