What problem does it solve? Choosing and consistently applying a named visual style (Swiss, Brutalist, Glassmorphism, Material 3, Cyberpunk, etc.) is error-prone: designers guess token values, mix incompatible properties, and ship artifacts that no longer match the named aesthetic. This Skill provides a curated catalogue of 84 style presets, each shipped as a complete, self-contained token bundle plus falsifiable "breaks-if" invariants, so a chosen style is applied verbatim and verified before delivery. ## Core Features & Use Cases - Catalog-first routing: Read references/catalogue.md to shortlist 1-3 styles matching the brief, then load only those S-NNN files instead of bulk-loading all 84 styles. - Complete token blocks: Each preset ships CSS custom properties (colors, typography, spacing, radius, shadow, motion) plus an equivalent Tailwind theme extension ready to inject into HTML artifacts. - Invariant enforcement: Every style lists explicit "breaks-if" rules (e.g., Swiss breaks if border-radius exceeds 0px) that must be verified before delivery; brand tokens override preset identity slots when supplied. - Render-test pipeline: A var()-only test skeleton and parity harness validate each preset's rendered output. - Use Case: A user asks for a "Glassmorphism landing page" — the Skill routes to S-004, injects its frosted-glass token block into the page, and confirms the gradient background and backdrop-filter invariants hold. ## Quick Start Ask the AI to apply the Brutalist style preset to your landing page and it will load the matching token block and verify all style invariants before delivering the HTML.
