What problem does it solve? AI-generated frontend code tends to fall into recognizable clichés: centered heroes, purple gradients, Inter font, generic three-card layouts, and static components with no loading or error states. This Skill encodes a strict set of design engineering rules that force the model to produce distinctive, polished React/Next.js interfaces instead of default-looking output. ## Core Features & Use Cases - Tunable design dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines (8/6/4) drive layout asymmetry, animation richness, and information density, and adapt to explicit user requests. - Bias-correction rules: Bans Inter, purple/blue AI gradients, pure black, 3-column card rows, emojis, and generic placeholder content, while enforcing dependency verification, Tailwind version checks, and RSC/client-component isolation. - Motion and Bento patterns: Specifies Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and five animated Bento card archetypes for SaaS dashboards, plus a creative arsenal of advanced UI concepts (magnetic buttons, scroll choreography, glassmorphism). - Use Case: Ask for a landing page or dashboard and receive code with asymmetric layouts, skeleton loaders, empty/error states, spring-physics animations, and curated typography rather than a generic template. ## Quick Start Ask the assistant to build a React dashboard or landing page and mention that it should follow the design-taste-frontend-v1 rules for layout, motion, and typography.
