responsive-design · owl-listener — Claude Code skill for adaptive layouts
A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods.
npx skills add Owl-Listener/designer-skills --skill responsive-design -a claude-codeWhat responsive-design does
The skill gives the agent a vocabulary for responsive work. Four strategies are spelled out: fluid with percentage widths, adaptive with separate layouts per breakpoint, mobile-first starting from the smallest screen, and content-first where the content decides where the breaks go. It also names the usual patterns — column drop, reflow, off-canvas, priority+.
Input methods get their own section. Touch means 44px minimum targets and gesture support, mouse means hover states, keyboard means focus indicators and a logical tab order, voice means clear labels. Typography and images are covered too: fluid type scaling between breakpoints, srcset, and different crops per breakpoint.
The skill points at two siblings in the same repo. Column grids belong to layout-grid, OS-specific patterns to platform-conventions. Install responsive-design alone and the agent won't pull those in. One more thing worth acting on: the guidance says to test on real devices rather than just resizing a browser window, so budget for a phone or an emulator in your process.
What it helps with
- pick breakpoints that fit the content instead of habit
- move a fixed-width mockup onto a fluid grid
- make tap targets large enough for touch
- add visible focus and a sane tab order for keyboard users
- choose
srcsetand crops for different screens
Example prompts for the agent
- design a responsive catalog screen for phones, tablets and desktop
- review this layout for responsiveness and suggest a pattern for narrow screens
- which breakpoints should this page use, and why
How to install responsive-design
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill responsive-design -a claude-code2Manually: put the files in place
~/.claude/skills/responsive-design/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/responsive-design/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill responsive-design -a codex2Manually: put the files in place
.agents/skills/responsive-design/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill responsive-design -a cursor2Manually: put the files in place
.cursor/skills/responsive-design/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills responsive-design2Manually: put the files in place
.github/skills/responsive-design/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill responsive-design -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/responsive-designManually: put the files in place
.devin/skills/responsive-design/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill responsive-design -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about responsive-design
How do I install responsive-design in Claude?
Run npx skills add Owl-Listener/designer-skills --skill responsive-design -a claude-code. The skill then lives at ~/.claude/skills/responsive-design/SKILL.md.
What does responsive-design do?
It guides the agent through designing layouts and interactions that work across screen sizes and input methods — touch, mouse, keyboard and voice.
How is responsive-design different from layout-grid?
responsive-design covers adaptation to screens and input methods, while the column grid is handled by the layout-grid skill. OS-specific patterns live in platform-conventions.
Source text
SKILL.md · MIT
--- 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
© Owl-Listener · MIT · Owl-Listener/designer-skills
Similar skills
Everything for Design →responsive-design by other authors comes first.
