What problem does it solve? LLMs repeatedly produce generic frontend designs with narrow containers, six-line wrapped headings, gappy bento grids, invisible button text, and repetitive layouts. This Skill enforces strict design engineering rules to break those defaults and produce varied, motion-rich, editorial-quality pages. ## Core Features & Use Cases - Deterministic Layout Randomization: Simulates a Python RNG seeded by prompt character count to select hero architectures, typography stacks, components, and GSAP paradigms, preventing repeated designs. - 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: Implements scroll pinning, scrubbing text reveals, card stacking, and image scale/fade effects with @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 gallery, and high-contrast CTA footer, preceded by a verifiable design plan. ## Quick Start Ask the AI to build a landing page for your product using this skill and it will output a design plan followed by the full React UI code.
