Responsive Design
- 997 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
responsive-design is a Claude Code skill that guides adaptive layout and interaction design across phones, tablets, laptops, and desktops using fluid, adaptive, mobile-first, and content-first strategies.
About
responsive-design is a designer-skills agent skill that helps developers build interfaces adapting gracefully across screen sizes, pixel densities, and input methods. The skill documents four responsive strategies—fluid percentage widths, adaptive layouts at breakpoints, mobile-first enhancement, and content-driven breakpoints—and maps common ranges such as 375–639px for phones. Developers reach for responsive-design when CSS grids, flexbox, or component libraries need breakpoint plans before coding media queries. The guidance covers layout reflow, touch targets, and input-method differences so implementations do not break between phone, tablet, and desktop viewports.
- Designs fluid, adaptive, mobile-first and content-first responsive strategies
- Applies column drop, reflow, off-canvas and Priority+ responsive patterns
- Adapts interfaces for touch, mouse, keyboard and voice input methods
- Handles fluid typography scaling, responsive images with srcset and art direction
- Enforces 44px minimum touch targets and logical keyboard navigation
Responsive Design by the numbers
- 997 all-time installs (skills.sh)
- +46 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #393 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill responsive-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 997 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you design responsive layouts for all screen sizes?
Create interfaces that automatically adapt to phones, tablets, laptops, and desktops without breaking.
Who is it for?
Frontend developers defining breakpoint systems and adaptive layouts before writing Tailwind, CSS Grid, or component responsive variants.
Skip if: Projects with a single fixed viewport such as kiosk or embedded displays that never require multi-device adaptation.
When should I use this skill?
A developer asks to make a layout responsive, choose breakpoints, or adapt UI across phones, tablets, and desktops.
What you get
Breakpoint plans, responsive strategy selection, and layout guidance for multi-device CSS and component implementations.
- breakpoint plan
- responsive strategy recommendation
- layout adaptation guidance
By the numbers
- Documents four responsive strategies: fluid, adaptive, mobile-first, and content-first
- Defines phone breakpoint range at 375–639px
Files
Responsive Design
You are an expert in designing interfaces that adapt gracefully across devices and contexts.
What You Do
You design adaptive layouts and interactions that work across all screen sizes, pixel densities, and input methods.
Responsive Strategies
- Fluid: Percentage-based widths, flexible within ranges
- Adaptive: Distinct layouts at specific breakpoints
- Mobile-first: Start with smallest, enhance upward
- Content-first: Let content needs drive breakpoints
Common Breakpoints
- Small: 375-639px (phones)
- Medium: 640-1023px (tablets)
- Large: 1024-1439px (laptops)
- Extra large: 1440px+ (desktops)
Responsive Patterns
- Column drop: reduce columns at smaller sizes
- Reflow: stack horizontal elements vertically
- Off-canvas: hide secondary content behind toggle
- Priority+: show most important, overflow the rest
Input Method Adaptation
- Touch: 44px minimum targets, gesture support
- Mouse: hover states, precise targeting
- Keyboard: focus indicators, logical tab order
- Voice: clear labels, logical structure
Responsive Typography and Images
- Fluid type scaling between breakpoints
- Responsive images with appropriate srcset
- Art direction: different crops per breakpoint
Best Practices
- Design for content, not devices
- Test on real devices, not just browser resize
- Consider landscape and portrait
- Account for slow connections
- Test with accessibility tools at each breakpoint
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kFAQ
What responsive strategies does responsive-design cover?
responsive-design covers fluid percentage-based widths, adaptive distinct layouts at breakpoints, mobile-first smallest-screen-up enhancement, and content-first breakpoint selection driven by layout needs.
What breakpoints does responsive-design recommend for phones?
responsive-design maps the small phone range to 375–639px and provides additional medium and large breakpoint guidance for tablets, laptops, and desktop viewports.
Is Responsive Design safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.