responsive-design
Enables your agent to create layouts that adapt to any screen size. It's useful for ensuring websites and apps work well on phones, tablets, and computers.
What it does
This skill helps create websites and apps that automatically adjust to any screen size, whether it's a phone, tablet, or computer. It ensures everything looks good and works well on any device.
When to use it
- ✓When building a website that needs to work well on phones and computers.
- ✓When you want specific parts of your site to adjust on their own.
- ✓To make text and spacing look proportional on all screen sizes.
Example of what to ask your AI
“How do I make my website adapt to different screen sizes?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It uses modern techniques so that visual elements rearrange and resize according to the available space. It starts by thinking about mobile and then adapts for larger screens, ensuring a good experience everywhere.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add wshobson/agents --skill responsive-designOr download just the file:
curl -L https://raw.githubusercontent.com/wshobson/agents/main/plugins/ui-design/skills/responsive-design/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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
FAQ
What does 'mobile-first' mean?
It means starting the design by thinking about how it will look on the smallest screen of a mobile phone, and then adding improvements for larger screens.
What are 'container queries'?
They are like rules that make a component (a part of the page) adjust to the size of the space it's in, instead of adjusting to the total screen size.
Why is it important to test on real devices?
Simulators might not show all issues. Testing on actual phones and tablets ensures the website works perfectly for all users.
Details
Original description by the author
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.
repo: wshobson/agents
Popularity
- GitHub stars
- 41k
- Ranking position
- #4974
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
screen-reader-testing
Has your agent test websites using screen readers to ensure they are accessible.
wshobson/agents
wcag-audit-patterns
Helps your agent audit websites for accessibility and fix issues according to WCAG guidelines.
wshobson/agents
multi-reviewer-patterns
Enables your agent to coordinate parallel code reviews, deduplicating findings and consolidating reports.
wshobson/agents
parallel-debugging
Allows the agent to debug complex issues with parallel investigations and root cause analysis.
wshobson/agents
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC