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 rules so generated UI code avoids these clichés and follows consistent architectural conventions. ## Core Features & Use Cases - Bias-Corrected Design Rules: Bans common AI tells such as neon glows, pure black, gradient text, generic names, and the three-card feature row, while enforcing deterministic typography and single-accent color palettes. - Configurable Design Dials: Tunes output through DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels that drive layout asymmetry, animation complexity, and information density. - Architecture Guardrails: Enforces React Server Component boundaries, Tailwind version checks, dependency verification against package.json, hardware-accelerated animations, and mandatory loading, empty, and error states. - Use Case: Ask for a SaaS dashboard bento grid and receive Framer Motion components with spring physics, perpetual micro-interactions isolated in client components, and mobile-safe responsive fallbacks. ## Quick Start Ask the assistant to build a pricing page or dashboard UI and it will apply these design rules, motion specs, and component architecture constraints to the generated React code.
