PlugWiki

responsive-design (wshobson/agents): a skill for container queries, fluid type and mobile-first layouts

This wshobson/agents skill gives Claude modern responsive CSS patterns: container queries, fluid type and spacing, CSS Grid and mobile-first breakpoints.

Installs
21.5K
on skills.sh
Stars
42.1K
on GitHub
Files
4
besides SKILL.md
Updated
Oct 2026
last repo commit

The skill gives Claude a short best-practice list and a set of reference guides for responsive CSS. Rules include mobile first, breakpoints set by content, fluid values for type and spacing, container queries for components, a 44 by 44 pixel minimum touch target and logical properties. A common-issues list covers horizontal overflow, 100vh on mobile, tiny text and z-index stacking.

It triggers when you build adaptive interfaces, fluid layouts or component-level responsive behavior. Reference files cover breakpoint strategies, container queries, fluid layouts and six worked patterns: container queries, fluid typography, a CSS Grid layout, responsive navigation, responsive images and responsive tables.

The skill bundles 4 Markdown reference files and no scripts.

Good for

  • Front-end developers building mobile-first layouts
  • Design system teams defining breakpoint and spacing scales
  • Developers adding component-level responsiveness with container queries

Install responsive-design

Claude Code

  1. 1

    Copy this prompt.

    Install the responsive-design skill in Claude Code. Run this command:

npx skills add https://github.com/wshobson/agents --skill responsive-design

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

  1. When to Use This Skill
  2. Detailed patterns and worked examples
  3. Best Practices
  4. Common Issues

Key facts

Author
Seth Hobson (wshobson)
License
MIT
Repository
wshobson/agents
Installs on skills.sh
21,534 as of 2026-11-02
GitHub stars
42,081 as of 2026-11-02
Last repo commit
2026-10-30
Files in the skill folder
5 files including SKILL.md (4 reference guides)
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass
Part of
The ui-design plugin in wshobson/agents, a catalog of 94 plugins

What it includes

  • Eight rules in SKILL.md

    Mobile first, content breakpoints, fluid values, container queries, real-device testing, performance, 44px touch targets and logical properties.

    Best practices

  • Seven recurring layout bugs

    Horizontal overflow, fixed widths, viewport height on mobile, small text, small buttons, aspect ratios and z-index stacking.

    Common issues

  • Core capabilities and six patterns

    Container queries, fluid typography, CSS Grid layout, responsive navigation, images and tables, plus viewport units.

    Read · references/details.md

  • Breakpoint scales and component patterns

    Covers mobile-first, Tailwind and Bootstrap scales, content-based breakpoints, design tokens, feature queries, print styles and preference queries.

    Read · references/breakpoint-strategies.md

  • Container query deep dive

    Syntax, named containers, container units, style queries, practical components, Tailwind integration and fallbacks.

    Read · references/container-queries.md

  • Fluid typography, spacing and layouts

    Covers clamp(), type and spacing scales, Grid and Flexbox fluid patterns, intrinsic sizing and viewport units.

    Read · references/fluid-layouts.md

From the official docs

Questions

What does the responsive-design skill do?

It gives Claude modern responsive CSS rules and patterns: container queries, fluid typography and spacing, CSS Grid and mobile-first breakpoints. Claude uses them when you build or review adaptive layouts.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box above. The wshobson/agents README says an individual skill can be installed with gh skill install wshobson/agents <skill> or with the npx skills installer, without the plugin's agents, commands or hooks.

Does it use a CSS framework?

The reference files include Tailwind and Bootstrap breakpoint scales and Tailwind container query integration, but the patterns are plain CSS.

Is it safe to install?

It is Markdown only, with no scripts, API keys or network calls named in SKILL.md. Claude reads the rules and applies them to your CSS.

Does it cover older browsers?

The container queries guide has sections on browser support and fallback strategies. Read those before you rely on container queries in a project with older browser targets.

Is the main SKILL.md enough?

The SKILL.md is short: eight best practices and seven common issues. It points to references/details.md for worked patterns and code. The three other guides (breakpoint-strategies.md, container-queries.md, fluid-layouts.md) sit in the same folder, but SKILL.md does not name them, so ask Claude to read one if you want that detail.

Information

updated Nov 2, 2026

Repository
wshobson/agents
Folder
plugins/ui-design/skills/responsive-design

wshobson/agentsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 6
  1. SKILL.md · github.com
  2. references/details.md · github.com
  3. wshobson/agents README · github.com
  4. breakpoint-strategies.md · github.com
  5. container-queries.md · github.com
  6. fluid-layouts.md · github.com

Updated Nov 2, 2026.