Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From designpowers
Guides responsive layout design for complex UIs: content-driven breakpoints, priority shifting, clamp typography, container vs media queries, touch targets, and multi-device testing.
npx claudepluginhub owl-listener/designpowersHow this skill is triggered — by the user, by Claude, or both
Slash command
/designpowers:responsive-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Responsive design is not "make it fit on a phone." It is designing for every context — one-handed on a bus, zoomed to 200% on a desktop, on a tablet in sunlight.
Guides content-first responsive design: setting breakpoints where content breaks, mobile-first prioritization, and five responsive layout patterns.
Implements responsive web layouts using mobile-first strategies, min-width breakpoints, fluid CSS Grid, container queries, srcset/picture images, 44x44px touch targets, and mobile-adapted tables.
Designs adaptive layouts and interactions for all screen sizes, input methods, and devices using breakpoints, fluid scaling, patterns, and accessibility checks.
Share bugs, ideas, or general feedback.
Responsive design is not "make it fit on a phone." It is designing for every context — one-handed on a bus, zoomed to 200% on a desktop, on a tablet in sunlight.
ui-composition defines a layout that spans breakpointsContent drives breakpoints, not devices. Do not use 768px because "that's tablet." Use the width where your content breaks.
--bp-stack: 0;
--bp-sidebar: 640px;
--bp-columns: 900px;
--bp-wide: 1200px;
At narrow widths, decide what gets:
Document these decisions.
--font-size-body: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--font-size-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
Body text minimum 16px. Line length 45-75 characters. At 200% zoom, no horizontal scroll (WCAG 1.4.10).
| Use case | Use |
|---|---|
| Page-level layout | @media |
| Component adaptation | @container |
44x44px minimum at mobile. 8px minimum gap between adjacent targets.
Test at: 320px, one pixel below each breakpoint, 200% zoom at 1280px, landscape phone, and real devices.
ui-composition, design-discoverydesign-builder, accessibility-reviewer