Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jpoindexter/responsive-and-multi-device
Reference-grade playbook for responsive and adaptive design across every screen class — phone, tablet, laptop, desktop, TV, watch, foldable — using mobile-first breakpoints, fluid clamp() type, container queries, logical properties, and dvh/safe-area viewport handling.
Passed 21 of 22 test cases with the skill, and 18 of 22 without it.
and 1 more in the full report
3 fixed18 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
On devices with notches and bottom gesture bars (such as iPhones and edge-to-edge Android phones), applying plain padding-top: 16px to a fixed header causes text to overlap the device camera island. Show the CSS declaration for top padding that respects device safe area insets while enforcing a 16px baseline minimum.
| Checked | Without skill | With skill |
|---|---|---|
| The CSS declaration references env(safe-area-inset-top). | Passed | Passed |
| The CSS declaration uses CSS max() to combine the safe area inset with the baseline padding. | Missed | Passed |
The instructions your model reads when the skill loads.
One layout, every screen. The goal is not "make it shrink" — it's to serve the right information density, interaction model, and ergonomics for each device class. A phone is held one-handed with a thumb; a TV is driven by a D-pad from 10 feet; a watch is glanceable in 2 seconds. Same content, different affordances.
min-width media/container queries. Progressive enhancement: the base CSS is the floor everyone gets; larger screens layer on. Smaller cascade, fewer overrides, better perf on weak devices.max-width, graceful degradation) is legacy. Avoid for new work — you end up un-styling for mobile, which is more code and more bugs.%, vw, clamp()), no jumps. Responsive = fluid + breakpoint reflows. Adaptive = discrete fixed layouts swapped at thresholds (server-detected or JS), no in-between. Modern default: fluid + a few responsive breakpoints. Reserve adaptive for genuinely different device classes (e.g. a real TV/watch app, not a width).minmax(), auto-fit, clamp(), fit-content — fewer hard breakpoints, no cliffs.Prefer content-driven breakpoints: resize the browser, add one where the layout breaks (line length >~75ch, cramped columns, awkward gaps). Don't target specific devices — they change yearly.
| Class | Reference width | Common use |
|---|---|---|
| Small phone | 320–360px | absolute floor; must work at 320 |
| Phone | 390–430px | iPhone 14/15, modern Android |
| Tablet (portrait) | 768px | iPad mini/Air portrait |
| Tablet (landscape) / small laptop | 1024px | iPad landscape, 11" laptop |
| Desktop | 1280–1440px | mainstream laptop/monitor |
| Large desktop | 1920px+ | external monitors, cap content width |
em for breakpoints, not px: @media (min-width: 48em) respects the user's root font size / browser zoom. (48em = 768px at default 16px.)@media (orientation: landscape). Useful for tablet master-detail and short-viewport keyboard handling, not as a primary axis.max-width + margin-inline: auto (e.g. text max-width: 65ch, shells max-width: 1280px) so 4K monitors don't stretch lines to 200ch./* mobile-first, em breakpoints, content-capped */
.container { width: 100%; padding-inline: clamp(1rem, 5vw, 2rem); }
@media (min-width: 48em) { .grid { grid-template-columns: 1fr 1fr; } } /* 768 */
@media (min-width: 64em) { .grid { grid-template-columns: 1fr 2fr 1fr; } } /* 1024 */
@media (min-width: 90em) { .container { max-width: 1280px; margin-inline: auto; } } /* 1440 */
test cases passed, vs 18 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.