layout-system_skill

Overview

This skill teaches a pragmatic system for building responsive, accessible layouts using modern CSS: Flexbox, Grid, Container Queries, and aspect-ratio. It emphasizes a mobile-first workflow and breakpoint strategies so interfaces adapt cleanly across devices while remaining performant and accessible. The goal is predictable, reusable layout patterns you can apply across SaaS and mobile apps.

How this skill works

The skill inspects layout needs and prescribes patterns: start with a single-column mobile baseline, then progressively enhance for larger breakpoints. It shows when to use Flexbox for one-dimensional flows, Grid for two-dimensional page structures, container queries for component-level responsiveness, and aspect-ratio for media. It also audits touch targets, reading line length, whitespace, and keyboard/tab order to ensure accessibility and performance.

When to use it

• Building or auditing app and website layouts to ensure consistent responsive behavior
• Designing reusable components that must adapt to differing container sizes
• Creating page-level systems: hero, card grids, sidebar + main, navigation, and footers
• Enforcing accessibility requirements like touch target size and readable line length
• Defining breakpoint strategy and fluid typography for a design system

Best practices

• Think mobile-first: design for the smallest constraint then progressively enhance
• Define breakpoints based on content, not device names; test where the layout breaks
• Use Flexbox for linear alignment and Grid for complex two-dimensional layouts
• Prefer container queries for component responsiveness instead of only viewport queries
• Use relative units (%, em, rem) and clamp() for fluid sizing and typography
• Validate touch targets (>=44x44px), line length (~50–75 chars), and logical tab order

Example use cases

• Create a hero section that stacks on mobile and becomes two-column on tablet with Grid
• Build a card grid: 1 column mobile, 2 columns tablet, 3 columns desktop using Grid and gap
• Implement a responsive sidebar + main layout that becomes stacked on mobile and sticky on larger screens
• Convert a card component to use container queries so it adapts when placed inside narrow or wide containers
• Apply aspect-ratio to media containers to ensure consistent video/image proportions across breakpoints