Layout Systems & Responsive Design

Purpose

This skill provides comprehensive guidance for creating responsive layout systems using modern CSS techniques. It covers grid systems, flexbox patterns, container queries, spacing systems, and mobile-first design strategies to build flexible, accessible interfaces that adapt seamlessly across devices.

When to Use

Invoke this skill when:

• Building responsive admin dashboards with sidebars and headers
• Creating grid-based layouts for content cards or galleries
• Implementing masonry or Pinterest-style layouts
• Designing split-pane interfaces with resizable panels
• Establishing responsive breakpoint systems
• Structuring application shells with navigation and content areas
• Building mobile-first responsive designs
• Creating flexible spacing and container systems

Layout Patterns