page-layout-patterns

What problem does it solve?

This skill standardizes page structure by enforcing a single MainLayout wrapper, consistent spacing (space-y-32), and predictable responsive grid patterns, resulting in a cohesive UI across the application.

Core Features & Use Cases

• MainLayout enforcement: wrap all routes with a single layout component to provide a consistent header, container, and backdrop.
• Page structure pattern: root container uses space-y-32 for major sections and semantic <section> blocks for content.
• Spacing and grid conventions: apply the defined spacing scale and responsive grids (grid-cols-1 md:grid-cols-2 lg:grid-cols-3) to ensure uniform density.
• Hero and content recipes: guidelines for hero sections, content blocks, sidebars, and cards to maintain visual balance.
• Use case: apply to marketing pages, product docs, and dashboard screens to maintain a cohesive experience.

Quick Start

Wrap your page content with the MainLayout and start following the patterns described above to achieve consistent, responsive layouts across pages.