What problem does it solve? LLM-generated frontend code often suffers from repetitive layouts, narrow headings that wrap into 6-line walls, empty gaps in bento grids, invisible button text, and static pages without motion. This Skill enforces strict design rules to produce varied, well-spaced, animated React UI code. ## 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 layouts. - Structural Enforcement: Mandates AIDA page structure, 2-3 line H1 limits with wide containers, gapless bento grids via grid-flow-dense, and massive section spacing. - GSAP Motion Patterns: Requires ScrollTrigger pinning, scrubbing text reveals, image scale/fade scroll effects, and card stacking animations. - Use Case: Ask for a SaaS landing page and receive a complete React component with a cinematic hero, dense bento feature grid, pinned scroll sections, and a pre-flight design plan verifying all constraints. ## Quick Start Use the gpt-taste skill to build a landing page for a coffee subscription startup with GSAP scroll animations and a bento features grid.
