What problem does it solve? Designing non-trivial web layouts from memory or generic UI conventions produces disorganized, arbitrary interfaces. This Skill replaces guesswork with a disciplined workflow that inspects real production references, extracts their structural rules, and translates them into your project's design language. ## Core Features & Use Cases - Surface Classification: Categorizes pages into Marketing/LP, Dashboard/Data, Application/Tool, or Swiss/Editorial families, each with dedicated reference guidance. - Reference-Driven Extraction: Inspects rendered production interfaces across multiple viewport widths to derive alignment axes, grid geometry, hierarchy, and responsive transformation rules. - Token Derivation & Verification: Converts repeated layout relationships into semantic CSS tokens and enforces a visual verification gate beyond compile and lint success. - Use Case: When building a SaaS dashboard, use this Skill to inspect two real analytics products, extract their app shell, canvas, and widget layering rules, then implement and visually verify the layout in your own design system. ## Quick Start Use the layout-system skill to design and implement the dashboard page layout based on real production references.
