What problem does it solve? AI-generated frontend code tends to look generic: centered heroes, purple gradients, Inter font, three-card feature rows, and missing loading or error states. This Skill encodes a strict set of design engineering rules so generated React/Next.js interfaces avoid those clichés and follow consistent typography, color, layout, and motion standards. ## Core Features & Use Cases - Tunable design dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines (8/6/4) drive layout asymmetry, animation richness, and spacing density, overridable per user request. - Anti-slop rulebook: Bans Inter font, neon glows, pure black, 3-column card rows, generic names like "John Doe", Unsplash links, and filler copy such as "Elevate" or "Seamless". - Motion and Bento specs: Prescribes Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and a 5-card Bento grid paradigm for SaaS dashboards, plus GSAP/Three.js guidance for scrolltelling. - Use Case: Ask for a landing page or dashboard and receive code with split-screen heroes, skeleton loaders, empty/error states, magnetic buttons, and min-h-[100dvh] mobile-safe layouts instead of default AI output. ## Quick Start Ask the AI to build a pricing page or analytics dashboard for your React app and let the skill's baseline configuration drive the design.
