Responsive Design

Comprehensive responsive web design patterns for building layouts that adapt seamlessly across all device types and screen sizes. This is a sub-skill — pull it into any design or build workflow that needs cross-device support.

When to Use This Skill

• Building any new page or component that must work on mobile + desktop
• Reviewing or fixing responsive layout issues
• Converting a fixed-width design to responsive
• Setting up a breakpoint system for a new project
• Optimizing images and typography for multiple viewports

Standard Breakpoint System

Use these as the default breakpoints unless the project specifies otherwise: