premium-layout-system

What problem does it solve? AI-generated UI tends to fall into the generic SaaS template pattern: centered hero, logo row, three-column features, pricing cards, FAQ. This Skill eliminates that by enforcing editorial, asymmetric, and immersive layout archetypes with visual depth and rhythmic section pacing. ## Core Features & Use Cases - Layout Archetypes: Provides five concrete structures (Editorial, Asymmetric Startup, Immersive Product, Dashboard Preview, Manifesto) modeled on Linear, Vercel, Apple, and Supabase. - Broken Grid Systems: Supplies CSS Grid and Tailwind implementations where elements intentionally overlap columns and break symmetry. - Visual Depth & Pacing Rules: Defines a four-layer depth system (background, atmospheric shapes, content, floating accents) plus density rhythm and transition rules between sections. - Use Case: When building a landing page for a startup, apply the Editorial Statement hero pattern with left-aligned oversized typography, floating stat cards, and gradient section transitions instead of a centered template hero. ## Quick Start Redesign this landing page hero using the editorial asymmetric layout pattern with a broken grid and layered background depth.