Guide · Agent skill
How to use the Responsive Design agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The responsive-design skill is a set of guidance files that teaches an AI agent how to make web interfaces adapt to different screen sizes. It is useful for front-end developers, designers checking CSS layouts, and teams setting breakpoint and spacing standards. After this guide you will know how to install the skill, how to ask for responsive work in plain language, and what the skill cannot do.
Responsive Design Patternswshobson/agents · MIT Download the skill Quick start
- 1Download the ZIP. Get the responsive-design skill ZIP from the directory page.
- 2Unzip the folder. Extract the files so the skill folder contains SKILL.md and the references folder.
- 3Choose a location. Place the folder in ~/.claude/skills/ for personal use, or in your project's .claude/skills/ folder for one project.
- 4Or upload in the Claude apps. If you use the Claude apps, go to Settings → Capabilities → Skills and upload the skill there instead.
- 5Make a natural request. Describe the layout problem, such as a navbar that breaks on phones, and include your CSS if you have it.
- 6Check the result on real devices. Review the agent's changes, then test the layout on physical phones and tablets before shipping.
What the skill makes the agent do
Once installed, the agent gets guidance on responsive web layout. The skill covers mobile-first breakpoints, container queries (styling a component based on its own size rather than the viewport), fluid typography and spacing, and CSS Grid and Flexbox layouts.
It also tells the agent to look for common problems such as horizontal overflow, fixed widths in px instead of relative units, viewport height issues on mobile browsers, text that is too small on mobile, touch targets smaller than 44x44px, images that squish or stretch, and overlays that break at different screen sizes.
Install the Responsive Design skill
Download the ZIP for the skill from the directory page and unzip it. You can install it in one of two places. For a personal install, put the unzipped folder inside ~/.claude/skills/. For a single project, put it inside that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill is meant to be used when you are building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. Describe the job in plain words and name the part of the page you care about.
Good requests say what the layout should do at different sizes and include the relevant CSS or markup when you have it.
- Make this pricing table stack into columns on tablets and rows on phones.
- Our headings jump in size too much between phone and desktop. Make the type scale fluid.
- This card should switch to a horizontal layout when its own container is wide enough, not when the window is wide.
- Check this stylesheet for horizontal overflow and fixed pixel widths.
What the skill knows about each technique
Mobile-first means writing base styles for the smallest screen and adding layout changes inside min-width media queries. The skill's reference notes say this keeps mobile CSS lean and makes styles easier to reason about.
Container queries let a component respond to its container. The reference recommends container-type: inline-size for most cases, and it covers named containers and container query units (cqi, cqw, cqh).
Fluid typography uses CSS clamp() with minimum and maximum bounds, and the skill also covers viewport units (vw, vh, dvh), responsive spacing, Subgrid, and @supports feature queries.
@media (min-width: 640px) {
.component {
flex-direction: row;
padding: 1.5rem;
}
}Reading the reference files
The main SKILL.md file holds the core rules and checklists. Longer material lives in reference files that the agent reads only when needed: breakpoint-strategies.md, container-queries.md, fluid-layouts.md and details.md. You do not need to open them yourself, but they are useful to read if you want to see the exact patterns the agent is following.
If the basic guidance is not enough for your case, ask the agent to look deeper into the reference material for that topic, such as container queries.
Requirements and safety notes
The listing states no required tools or packages. The skill does not run scripts and does not use the network, according to its listing. It is guidance only, so the agent writes or reviews CSS from your description and any code you share.
The skill cannot test on real devices. The skill's own best practices say simulators do not catch every issue, so check layouts on physical phones and tablets before release.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
What people use it for
- Converting a desktop-only page into a mobile-first layout with clear min-width breakpoints.
- Making a reusable card component adapt to the width of its container rather than the window.
- Replacing fixed pixel font sizes with clamp()-based fluid type on a marketing site.
- Auditing a stylesheet for horizontal overflow, small touch targets and fixed widths.
- Setting breakpoint and spacing standards for a design system.
Frequently asked questions
Is the responsive-design agent skill free?
The listing gives the licence as MIT. The directory page does not list a price, so check the page for current terms before you rely on it.
What do I need to run the responsive-design skill?
The listing states no required tools or packages. You need an agent environment that supports skills, and the project should use CSS or a web front-end, since the guidance is web-specific.
Where do I put the skill folder?
Put it in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Does the skill run scripts or access the internet?
According to the listing, it does not run scripts and does not use the network. It consists of instructions and reference files that the agent reads.
Can the skill test my layout on real devices?
No. The listing says the skill gives advice and cannot test on real devices, so test on physical phones and tablets yourself.
Is this skill only for Claude?
The install instructions on this page cover ~/.claude/skills/, .claude/skills/ and the Claude apps. For other agents, check their documentation for how they load skills.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Front-end developers, designers and teams setting responsive standards will get useful, specific guidance on breakpoints, container queries, fluid type and layout checks. Skip it if your project does not use CSS or web front-ends, or if you need verified results from device testing, since the skill only gives advice.
Download the skill