What problem does it solve? LLM-generated frontend code often suffers from repetitive layouts, narrow containers that wrap headings into 6-line walls, empty gaps in bento grids, invisible button text, and static pages without motion. This Skill enforces a rigorous design system that eliminates these default failure patterns. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates Python-based seeded randomization to select hero architectures, typography stacks, component arsenals, and GSAP paradigms so no two pages repeat the same layout. - Strict Structural Rules: Enforces AIDA page structure, 2-3 line H1 limits with wide containers, gapless bento grids via grid-flow-dense, and bans cheap meta-labels like "SECTION 01". - Advanced GSAP Motion: Implements scroll pinning, scrubbing text reveals, card stacking, and image scale/fade effects using @gsap/react and ScrollTrigger. - Use Case: Ask for a landing page for a SaaS product and receive a complete React/Tailwind page with a cinematic hero, dense bento feature grid, pinned scroll sections, and a verified pre-flight design plan. ## Quick Start Ask the AI to build a landing page for your product and it will output a design plan followed by the full animated React code.
