What problem does it solve? Building visually consistent, accessible, and varied page layouts is difficult when styling decisions are made ad hoc, leading to monotonous sections, poor contrast, and broken responsive behavior. ## Core Features & Use Cases - Layout & Section Patterns: Provides container, grid, and flexbox patterns with rules requiring consecutive sections to use distinctly different structures. - Typography, Color & Accessibility Rules: Enforces font-heading/font-paragraph classes, Tailwind config color tokens, WCAG AA contrast checks, and semantic HTML with one h1 per page. - Hero Sections & Animations: Defines full-bleed hero patterns and Framer Motion animation recipes including staggered children and scroll-triggered reveals. - Use Case: When redesigning a landing page, apply these guidelines to build an impressive hero, vary section layouts, and verify button contrast against backgrounds. ## Quick Start Use the design-work skill to redesign this page's hero section and apply consistent styling across all sections.
