Specifies responsive behavior across breakpoints – layout reflow, content priority, touch targets, and fluid-versus-stepped scaling rules – precisely enough for engineers to implement directly.
Specifies responsive behavior across breakpoints - layout reflow, content priority, touch targets, and fluid-versus-stepped scaling rules - precisely enough for engineers to implement directly. Use when someone asks "how should this work on mobile", "spec the breakpoints", "write the responsive rules for this page", or is adapting a single-viewport design for multi-device use. Do NOT use for static measurements inside one frame - use redline-annotation instead; for the overall handoff package with flows and edge cases, use design-handoff-doc.This is the skill's description: the text your AI reads to decide when the skill applies.
responsive-spec/SKILL.md
---
name: Responsive Spec
description: Specifies responsive behavior across breakpoints - layout reflow, content priority, touch targets, and fluid-versus-stepped scaling rules - precisely enough for engineers to implement directly. Use when someone asks "how should this work on mobile", "spec the breakpoints", "write the responsive rules for this page", or is adapting a single-viewport design for multi-device use. Do NOT use for static measurements inside one frame - use redline-annotation instead; for the overall handoff package with flows and edge cases, use design-handoff-doc.
---
# Responsive Spec
A static design at one viewport does not specify a responsive product. The costly failure is handing engineers a desktop frame and a mobile frame with nothing in between: every width between 768px and 1024px becomes an improvisation, and the improvised versions are the ones users actually see. A responsive spec documents the rules that govern how layout, content, and interaction change as the viewport changes.
## Operating procedure
### Step 1: Gather inputs
- The existing breakpoint or grid system, if any. If the codebase uses a Tailwind config or similar, match those pixel values exactly - never introduce a parallel system.
- Device analytics: which viewport widths carry real traffic. Label guesses as guesses.
- Minimum supported width (default 320px) and whether touch, pointer, or both are in scope.
- The frames or pages being specified, and whether a token/component system already encodes any behavior.
### Step 2: Define breakpoints explicitly
State every breakpoint with pixel values and a semantic name. Default convention when the product has none:
- mobile: 0-767px
- tablet: 768-1023px
- desktop: 1024-1439px… load the full skill through Skill MeClick to play with sound.