designing-layouts_skill

Overview

This skill designs robust layout systems and responsive interfaces using modern CSS techniques. It covers grid systems, flexbox patterns, container queries, spacing tokens, and mobile-first breakpoints to create flexible, accessible layouts. Use it to structure application shells, dashboards, galleries, and complex page compositions that adapt across devices.

How this skill works

The skill inspects layout requirements, recommends a layout method (Grid, Flexbox, or Container Queries), and applies design tokens for consistent spacing and breakpoints. It supplies patterns and configuration scripts to generate responsive breakpoints, fluid typography, and accessibility checks. It includes practical templates (sidebar, masonry, split-pane) and integration guidance for utility frameworks like Tailwind.

When to use it

• Building responsive admin dashboards with sidebars and headers
• Creating grid-based content cards, galleries, or masonry layouts
• Designing split-pane or resizable panel interfaces
• Establishing mobile-first breakpoint systems for apps
• Structuring application shells with navigation and main content

Best practices

• Start mobile-first and use semantic breakpoints (sm, md, lg, xl)
• Prefer CSS Grid for two-dimensional layouts and Flexbox for alignment
• Use design tokens for spacing, sizes, and breakpoint values
• Leverage container queries for component-level responsiveness
• Validate semantic HTML and ARIA landmarks for accessibility

Example use cases

• Admin dashboard with fixed sidebar, responsive content area, and footer
• Auto-fit responsive gallery using repeat(auto-fit, minmax(...))
• Masonry or Pinterest-style layout with responsive column collapse
• Split-pane editor with resizable panels and accessible landmarks
• Tailwind integration for utility-first spacing and responsive screens