What problem does it solve? LLM-generated frontend code tends to fall into generic patterns: centered heroes, Inter font, purple gradients, three-card feature rows, and missing loading or error states. This Skill counteracts those biases with a strict, metric-driven design system so generated UI code looks intentionally designed rather than templated. ## Core Features & Use Cases - Bias-Correction Rules: Bans common AI design tells (Inter font, neon glows, pure black, generic names, Unsplash links) and enforces curated font stacks, single-accent color palettes, and asymmetric layouts. - Tunable Design Dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY parameters (default 8/6/4) drive layout asymmetry, animation complexity, and information density across every generation. - Architecture Guardrails: Enforces Next.js RSC boundaries, Tailwind v3/v4 version checks, dependency verification against package.json, hardware-accelerated animations, and mandatory loading/empty/error states. - Use Case: Ask for a SaaS dashboard and receive a Bento-grid layout with spring-physics micro-interactions, isolated client components for perpetual animations, and skeleton loaders instead of a generic card grid. ## Quick Start Use the design-taste-frontend skill to build a landing page for my analytics product with a split-screen hero and subtle scroll animations.
