responsive-designby Seth Hobson

Responsive Design Skill.

A Claude Code and Codex skill for UI design: responsive layouts with container queries, fluid type, CSS Grid, and mobile-first breakpoints.

Web & UI
UI code

Download OpenDesign View usage guide

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- name: responsive-design description: 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. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

Front matter and section headings read from the upstream file on 2026-09-14 · 1,989 characters in full

01 What it does

What the responsive-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill implements modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. It covers component-level responsiveness, fluid typography and spacing scales, complex layouts with CSS Grid and Flexbox, and breakpoint strategies for design systems. The skill addresses responsive images and media, adaptive navigation patterns, and responsive tables and data displays.

It emphasizes mobile-first development, content-based breakpoints rather than device-based ones, and container queries for component-level adaptation. The skill includes guidance on touch targets, logical properties for internationalization, and performance optimization through image handling and lazy loading.

UI code

See the example prompt ↗

How It Works

01
Start mobile-first
Begin with mobile styles as the foundation, then progressively enhance for larger screens rather than working desktop-down.
02
Set content-based Breakpoints
Define breakpoints based on where the content needs to reflow, not on specific device dimensions.

02 Find your fit

When to Use the responsive-design Skill

Use the responsive-design skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Implementing mobile-first responsive layouts
Using container queries for component-based responsiveness
Creating fluid typography and spacing scales
Designing breakpoint strategies for design systems
Building responsive tables and data displays

03 Inside the skill

Rules the responsive-design Skill Gives Claude Code and Codex

1 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Optimize and Lazy Load
Optimize images for performance and lazy load content that appears off-screen initially.

04 Put it to work

Install responsive-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add responsive-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for plugins/ui-design/skills/responsive-design/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

Before accepting the output, look for these in the transcript and the files:

The result is delivered as UI code, as the catalog lists for this skill.
The agent names the responsive-design skill in its plan or transcript before producing the result.
Your own content, names and numbers appear unchanged in the output.

In OpenDesign import responsive-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill file: plugins/ui-design/skills/responsive-design/SKILL.md Content checksum recorded at verification; commit 4236bb9
License: MIT From LICENSE.
Repository stars: 39,635 GitHub snapshot taken 2026-09-14 for the whole wshobson/agents repository, which contains 18 skills in this catalog. Not a rating or usage count for responsive-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to Use This SkillLists eight scenarios including mobile-first layouts, container queries, fluid typography, and responsive data displays
Detailed patterns and worked examplesPoints to references/details.md for deeper pattern documentation when needed
Best PracticesEight core principles including mobile-first approach, content breakpoints, fluid values, container queries, and performance
Common IssuesSeven frequent problems like horizontal overflow, fixed widths, viewport height, and touch target sizing

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 1,989 characters. Read the full file on GitHub.

Responsive Design

Run responsive-design on a Real UI Design Task.

Download OpenDesign, import responsive-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills