Responsive Design skill: what it does and how to install it
Builds adaptive web layouts with container queries, fluid typography, CSS Grid and mobile-first breakpoints for components that work across screen sizes.
Summary generated from the skill's documentation.
Install
$ npx skills add wshobson/agents --skill responsive-designRun it in a terminal. If your agent is already running, start a new session so it picks the skill up.
About this skill
What it does. Builds mobile-first interfaces with content-based breakpoints, fluid typography and spacing, CSS Grid and Flexbox. It applies container queries for component behaviour and responsive media, navigation, tables and data displays, while accounting for touch targets, overflow, viewport sizing and logical properties.
When to use it. Applies when creating adaptive layouts, design-system breakpoints or component-level responsiveness across screen sizes and devices. It also covers testing on real devices and handling common mobile layout failures.
History
Repo stars
40.5k+245 since 5 Oct 2026
Stars are counted for the whole repository, which holds 26 skills.
Show as a table
| Date | Repo stars |
|---|---|
| 12 Oct 2026 | 40,457 |
| 11 Oct 2026 | 40,368 |
| 10 Oct 2026 | 40,319 |
| 9 Oct 2026 | 40,307 |
| 8 Oct 2026 | 40,296 |
| 7 Oct 2026 | 40,267 |
| 6 Oct 2026 | 40,238 |
| 5 Oct 2026 | 40,212 |
Installs
20.2k
Tracking since . A chart appears once there are 7 days of data.
Installs via skills.sh
Similar skills
- Better LayoutImproves interface layouts by organising space, alignment, reading order, responsive behaviour and progressive disclosure across screen sizes.
- Mobile iOS DesignDesigns native iOS interfaces with SwiftUI patterns, Apple Human Interface Guidelines, adaptive layouts and accessible system components.
- Tailwind CSS DevelopmentBuilds layouts with Tailwind CSS utilities: responsive grids, flex and grid page structures and component styling.