Skip to content
Get packs

Responsive Design Patterns

Guides the agent to build layouts that adapt across screen sizes using modern CSS techniques.

Source Download skill
Repository
wshobson/agents
Stars
42,095
Licence
MIT
Files
5 files

What it does

When installed, the agent gets guidance on making web interfaces adapt to different screen sizes. It knows about mobile-first breakpoints, container queries (styling a component based on its own size), fluid typography and spacing, CSS Grid and Flexbox layouts, and common problems like horizontal overflow, fixed widths, and small touch targets. Detailed examples are kept in reference files that the agent reads when needed.

Great for

  • Front-end developers building or refactoring responsive websites or web apps
  • Designers who want their CSS-based layouts checked against current responsive practices
  • Teams setting breakpoint and spacing standards for a design system

Skip it if

  • Projects that do not use CSS or web front-ends, since the guidance is web-specific
  • Teams needing verified, device-tested results: the skill gives advice and cannot test on real devices

Try asking

  • “Make this product card grid responsive using CSS Grid, with three columns on desktop and one on mobile.”
  • “Convert these fixed pixel font sizes into fluid typography that scales between phone and desktop widths.”
  • “Use container queries so this sidebar widget changes layout based on its own width instead of the viewport.”
  • “Review my stylesheet for horizontal overflow and touch targets smaller than 44x44px.”
Step-by-step guide: how to use Responsive Design PatternsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    responsive-design.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip responsive-design.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip responsive-design.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your framework or CSS setup (plain CSS, Tailwind, etc.) so the advice matches your code.
  • Ask for a specific component or file to get concrete edits rather than general principles.
  • Still test on real phones and browsers; the skill's own guidance says simulators miss issues.

What's inside

  • references/breakpoint-strategies.md
  • references/container-queries.md
  • references/details.md
  • references/fluid-layouts.md
  • SKILL.md

Redistributed unmodified from wshobson/agents under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.