What problem does it solve? LLM-generated frontend code tends to fall into generic patterns: centered heroes, purple gradients, Inter font, three-column card rows, and missing loading or error states. This Skill enforces a strict set of design engineering directives so generated UI code avoids these clichés and follows consistent architecture conventions. ## Core Features & Use Cases - Tunable Design Dials: Three global variables (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) drive layout asymmetry, animation intensity, and information density across all generated components. - Bias-Correction Rules: Bans common AI tells such as neon glows, pure black, generic names, Unsplash links, and default shadcn/ui styling, while enforcing dependency verification against package.json. - Motion & Bento Specs: Provides Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and a five-card Bento grid archetype for SaaS dashboards. - Use Case: Ask for a pricing page or analytics dashboard and receive React/Tailwind code with asymmetric layouts, skeleton loaders, empty states, and mobile-safe viewport handling instead of a generic centered template. ## Quick Start Use the design-taste-frontend-v1 skill to build a Next.js SaaS dashboard with a bento grid layout and animated status cards.
