responsive-design

Original：🇺🇸 English

Translated

Mobile-first responsive design, breakpoints, touch targets, and adaptive layouts. Use when building layouts, creating responsive components, or optimizing for mobile.

2installs

Sourcemoderndegree/agent-skills

Added on2026-02-18

NPX Install

npx skill4agent add moderndegree/agent-skills responsive-design

SKILL.md Content

View Translation Comparison →

Responsive Design

This skill covers responsive design principles — mobile-first development, appropriate breakpoints, touch-friendly targets, and adaptive layout patterns.

Use-When

This skill activates when:

Agent builds page layouts or components
Agent adds responsive breakpoints
Agent designs for mobile devices
Agent creates touch-friendly interactions
Agent converts desktop-only designs to responsive

Core Rules

ALWAYS use mobile-first approach (base styles for mobile, media queries for larger)
ALWAYS ensure touch targets are at least 44x44px
ALWAYS design for smallest screen first, then enhance
NEVER rely solely on device detection (use feature detection)
ALWAYS test at actual breakpoints, not just resize the browser

Common Agent Mistakes

Desktop-first approach leading to mobile afterthought
Touch targets too small (buttons, links under 44px)
Fixed widths that break on smaller screens
Not considering landscape orientation on mobile
Hiding content instead of adapting it

Examples

✅ Correct

tsx

// Mobile-first: base styles for mobile, enhance for larger
<div className="w-full md:w-1/2 lg:w-1/3">
  <Button className="w-full md:w-auto h-11">
    Submit
  </Button>
</div>

// Touch-friendly targets (min 44px)
<button className="min-h-[44px] min-w-[44px] px-4 py-3">
  Tap Here
</button>

❌ Wrong

tsx

// Desktop-first
<div className="w-1/2">
  <button className="p-1">Click</button>
</div>

// Touch target too small
<button className="p-2 text-sm">
  Too small
</button>