What problem does it solve? LLM-generated UI tends to repeat the same layouts, produce narrow multi-line headings, leave gaps in bento grids, and use cheap meta-labels. This Skill enforces a rigorous design engineering process that breaks those defaults and produces varied, motion-rich, editorial-grade pages. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG step to select hero architecture, typography stack, components, and GSAP paradigms so no two pages look alike. - Strict Structural Rules: Enforces AIDA page structure, 2-3 line hero headings via wide containers, gapless bento grids with grid-flow-dense, and massive section spacing. - Advanced GSAP Motion: Requires ScrollTrigger pinning, scrubbing text reveals, image scale/fade scroll, card stacking, and hover physics on every interactive element. - 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 gallery, and a pre-flight design plan verifying all constraints. ## Quick Start Ask the agent to build a landing page for your product and it will output a verified design plan followed by the full GSAP-animated UI code.
