---
name: responsive-behavior
description: "Applies “Design the in-betweens” as a repeatable product-quality gate. Use during frontend work when breakpoints come from content, and the widths between them must also work."
---

# Design the in-betweens

Apply this skill during **Frontend** work. It supports Next.js / React, Mobile, Any stack.

Breakpoints come from content, and the widths between them must also work.

## Instructions

Design responsive behavior from the content out: a breakpoint exists where the content stops working, not where a device marketing name lives. Verify at 320, 375, 768, 1024, 1440 — and drag slowly through the widths between; the in-betweens are where layouts snap, overlap, and orphan. Inside any simulated frame, embed, or resizable panel, media queries measure the viewport and lie — size by container query or an explicit prop. Keep touch targets at 44px minimum and give every hover-revealed affordance a touch path. Horizontal document scroll is always a bug: find the unclipped decoration or min-content blowout and fix the cause, not with overflow-hidden on body.

## Detect the problem

- Perfect at 375 and 1440, broken at 900
- Hover-only actions on touch screens
- overflow-x: hidden on body as a 'fix'

## Hold the gate

Do not declare this phase complete until every item passes:

- [ ] Tested at 320 / 375 / 768 / 1024 / 1440 — and one odd width (e.g. 900)
- [ ] Breakpoints come from where the content breaks, not from device names
- [ ] Inside frames/embeds, size by container or prop — viewport media queries lie there
- [ ] Touch targets ≥ 44px; hover-only affordances have a touch equivalent
- [ ] No horizontal scroll at any width; text wraps rather than truncating meaning

## Verify the result

Drag the window slowly from 320 to 1440 — nothing jumps, overlaps, or disappears at any width.