What problem does it solve? LLM-generated frontend code tends to repeat the same narrow layouts, produce multi-line wrapped headings, leave gaps in bento grids, and ship static pages without motion. This Skill enforces a rigorous design engineering process that breaks those defaults and produces varied, motion-rich, editorial-quality landing pages. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG step to select hero architectures, typography stacks, component arsenals, and GSAP paradigms so no two pages look alike. - Strict Layout Rules: Enforces wide H1 containers with a 2-3 line limit, gapless bento grids via grid-flow-dense, massive section spacing, and an AIDA page structure. - Advanced GSAP Motion: Requires real ScrollTrigger implementations including pinning, scrubbing text reveals, card stacking, and image scale/fade scroll effects. - 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 pre-flight design plan verifying spacing, grid math, and label bans. ## 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.
