responsive-design — Skills

What it does

Implementing mobile-first responsive layouts

Using container queries for component-based responsiveness

Creating fluid typography and spacing scales

Building complex layouts with CSS Grid and Flexbox

Designing breakpoint strategies for design systems

Implementing responsive images and media

Creating adaptive navigation patterns

Modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first strategies.

Source

Repository: https://github.com/wshobson/agents

responsive-design FAQ

What does the responsive-design skill do?

Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. Implementing mobile-first responsive layouts Using container queries for component-based responsiveness

How do I install responsive-design?

Run: npx -y skills add https://github.com/wshobson/agents --skill responsive-design --agent claude-code — the source lives at github.com/wshobson/agents.

Maintain responsive-design?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![responsive-design on getagentictools](https://getagentictools.com/badge/skills/wshobson-agents-responsive-design.svg)](https://getagentictools.com/skills/wshobson-agents-responsive-design?ref=badge)

npx agentictools info skills/wshobson-agents-responsive-design

The second line is the CLI lookup for this page — handy in READMEs and docs.