What problem does it solve? LLMs tend to produce generic, clichéd frontend code: centered hero sections, purple gradients, Inter font, three-column card layouts, and static components without loading or error states. This Skill overrides those biases with metric-based design rules, strict component architecture, and performance guardrails so generated UI code looks intentionally designed rather than statistically average. ## Core Features & Use Cases - Bias-Corrected Design Rules: Enforces deterministic typography (Geist, Satoshi, Cabinet Grotesk), single-accent color calibration, asymmetric layouts, and bans common AI tells like neon glows, pure black, and generic placeholder data. - Motion & Interaction Engineering: Implements Framer Motion spring physics, magnetic hover effects via useMotionValue, staggered orchestration, and perpetual micro-interactions isolated in client components for 60fps performance. - Architecture Guardrails: Verifies package.json dependencies before imports, enforces Tailwind v3/v4 syntax separation, RSC/client component isolation, and viewport-safe layouts using min-h-[100dvh]. - Use Case: Ask for a SaaS dashboard and receive a Bento-grid layout with five animated card archetypes (auto-sorting list, typewriter command input, breathing status indicators, infinite carousel, focus-mode toolbar) instead of a static card grid. ## Quick Start Build a modern SaaS landing page with an asymmetric hero, bento feature grid, and spring-physics micro-interactions using React, Tailwind, and Framer Motion.
