designing-layoutslisted
Install: claude install-skill ancoleman/ai-design-components
# 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
### Grid Systems
For structured, two-dimensional layouts, use CSS Grid with design tokens.
**12-Column Grid:**
```css
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding-x);
}
.col-span-6 { grid-column: span 6; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }
```
**Auto-Fit Responsive Grid:**
```css
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: var(--grid-gap);
}
```
For complex grid layouts and advance