responsive-design
owl-listener/designer-skills
Design layouts and interactions that adapt across screen sizes and input methods.
What is responsive-design?
Responsive design ensures interfaces work seamlessly across phones, tablets, laptops, and desktops. Use this skill when a single design must serve multiple viewports and input methods—combining fluid layouts, adaptive breakpoints, and context-aware interactions.
- Design fluid layouts using percentage-based widths and flexible ranges
- Implement adaptive layouts with distinct designs at specific breakpoints (375px, 640px, 1024px, 1440px+)
- Adapt interactions for touch (44px targets, gestures), mouse (hover, precision), keyboard (focus, tab order), and voice input
- Apply responsive patterns: column drop, reflow, off-canvas, and priority+ content strategies
- Scale typography and images fluidly across breakpoints with srcset and art direction
- Test across real devices, orientations, and connection speeds with accessibility validation
How to install responsive-design
npx skills add https://github.com/owl-listener/designer-skills --skill responsive-designHow to use responsive-design
- 1.Define your content structure and identify key breakpoints based on content needs, not arbitrary device widths
- 2.Choose a responsive strategy: fluid (percentage-based), adaptive (breakpoint-based), or mobile-first (enhance upward)
- 3.Apply responsive patterns (column drop, reflow, off-canvas, priority+) appropriate to your layout
- 4.Set minimum touch targets to 44px and ensure keyboard navigation with clear focus indicators
- 5.Implement fluid typography scaling and responsive images with srcset for different pixel densities
- 6.Test on real devices in both portrait and landscape, including slow connections and with accessibility tools
Use cases
- Building a web app that works equally well on mobile phones and desktop monitors
- Designing a product page that reflows from single-column on mobile to multi-column on desktop
- Creating touch-friendly interfaces for tablets while maintaining hover states for mouse users
- Implementing off-canvas navigation that hides on small screens and displays on larger viewports
- Optimizing images and typography to load efficiently and display correctly across all screen sizes
- UI/UX designers building cross-device interfaces
- Frontend developers implementing responsive layouts
- Product teams supporting users across multiple devices
- Accessibility-focused designers ensuring input-method flexibility
responsive-design FAQ
Mobile-first is recommended: start with the smallest viewport and enhance upward. This forces prioritization of essential content and ensures a solid foundation for all devices.
Let content drive breakpoints, not devices. Common ranges are 375–639px (phones), 640–1023px (tablets), 1024–1439px (laptops), and 1440px+ (desktops), but adjust based on where your layout actually breaks.
Fluid uses percentage-based widths that scale continuously; adaptive uses distinct layouts at specific breakpoints. Most modern designs combine both for best results.
Touch needs 44px minimum targets and gesture support; mouse benefits from hover states; keyboard requires visible focus indicators and logical tab order; voice needs clear labels and semantic structure.
No. Always test on real devices in both portrait and landscape, on slow connections, and with accessibility tools. Browser resize doesn't capture real-world conditions like pixel density or actual touch interaction.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: responsive-design
description: Design layouts and interactions that adapt across screen sizes and input methods. Use when one design must serve many viewports. For the underlying column grid use layout-grid; for OS-specific patterns use platform-conventions.
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
More from owl-listener/designer-skills and the wider catalog.
search-ux
Design search experiences that help users find what they need with minimal friction.
service-blueprint
Map service delivery across frontstage actions, backstage processes, and supporting systems.
spacing-system
Create a systematic spacing scale from a base unit with clear application rules for consistent layouts.
stakeholder-alignment
Build responsibility matrices, decision rights, and communication plans to unblock stakeholder alignment.
state-machine
Model UI behavior as explicit states, events, and transitions to eliminate impossible states.
summarize-interview
Turn interview transcripts into structured themes, quotes, and action items for immediate research insights.