responsive-design
- Use it when:
- You're building a layout that has to work from phones to large desktops, or components that adapt to the space they're placed in.
- It does:
- Gives the agent patterns for container queries, fluid type with clamp(), Grid and Flexbox layouts, navigation, images, tables and mobile viewport units.
- You get:
- Layouts built mobile-first, with breakpoints set where the content needs them rather than per device; it adds no steps or files of its own.
- Works with:
- Plain CSS, plus React components styled with Tailwind in about half the examples.
TL;DR
A reference of modern CSS techniques for responsive layouts. Container queries let a component respond to the width of its container rather than the viewport. Fluid typography and spacing scale between a minimum and a maximum with clamp(). It gives a mobile-first breakpoint scale from 640 to 1536 pixels, matching Tailwind's, and patterns for auto-fitting grids, a navigation that collapses behind a menu button on small screens, images with art direction through <picture>, tables that scroll sideways or turn into cards on mobile, and the dynamic viewport units that fix 100vh on mobile browsers. Best practices: start from mobile styles, set breakpoints by content, prefer fluid values to fixed ones, keep touch targets at least 44 by 44 pixels, use logical properties for internationalization, and test on real devices. Common issues it names include horizontal overflow, fixed pixel widths, squashed images and overlays that break across screen sizes.
Summarizes the skill at 4bde316.
npx skills add https://github.com/wshobson/agents --skill responsive-design skills.sh pageSource on GitHubAll skills from wshobson/agents
- Total Downloads
- 22,000 on skills.sh, Nov 9, 2026
- Repo stars
- 42,334 wshobson/agents
- First seen
- Jan 20, 2026 on skills.sh
Weekly values
| Week to | Installs |
|---|---|
| Sep 21 | 438 |
| Sep 28 | 471 |
| Oct 5 | 468 |
| Oct 12 | 388 |
| Oct 19 | 412 |
| Oct 26 | 473 |
| Nov 2 | 492 |
| Nov 9 | 432 |
| Category |
Taste for interfaces that don't look generated: direction, motion and accessibility. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills. |
|---|---|
| Type |
Knowledge and rules the agent applies while it works: best practices, design principles, API references. |
| Effect |
Adds no side effects of its own. It shapes how the agent thinks, writes or reviews. Guidelines and routers are always effect:none, even when the task they support edits code. |
| Needs |
Instructions only. Works in any agent that supports skills. |
| Publisher |
Everyone else. Unverified vendor claims default to community. |
| Topics | |
| Stack |
SKILL.md
From wshobson/agents at 4bde316. Checked daily, last changed Nov 6, 2026.
Frontmatter
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.Responsive Design
Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.
When to Use This Skill
- 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
- Building responsive tables and data displays
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Best Practices
- Mobile-First: Start with mobile styles, enhance for larger screens
- Content Breakpoints: Set breakpoints based on content, not devices
- Fluid Over Fixed: Use fluid values for typography and spacing
- Container Queries: Use for component-level responsiveness
- Test Real Devices: Simulators don't catch all issues
- Performance: Optimize images, lazy load off-screen content
- Touch Targets: Maintain 44x44px minimum on mobile
- Logical Properties: Use inline/block for internationalization
Common Issues
- Horizontal Overflow: Content breaking out of viewport
- Fixed Widths: Using px instead of relative units
- Viewport Height: 100vh issues on mobile browsers
- Font Size: Text too small on mobile
- Touch Targets: Buttons too small to tap accurately
- Aspect Ratio: Images squishing or stretching
- Z-Index Stacking: Overlays breaking on different screens