owl-listener/responsive-design
ui-design/skills/responsive-design/SKILL.md
Design adaptive layouts and interactions that work across all screen sizes and input methods.
$ install --global
skillsauthnpx skillsauth add owl-listener/designer-skills responsive-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 15, 2026, 5:36 AM171.4s1 file scanned
SKILL.md
- name:
- responsive-design
- description:
- Design adaptive layouts and interactions that work across all screen sizes and input methods.
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
owl-listener/critique-visual-hierarchy
tools
VerifiedTrustedCommunity
Critique a screen's visual hierarchy — entry point, eye flow, weight distribution, and emphasis.
1,265SKILL.mdUpdated May 15, 2026
owl-listener/critique-typography
tools
VerifiedTrustedCommunity
Critique a screen's typography — scale usage, readability, consistency, and token compliance.
1,265SKILL.mdUpdated May 15, 2026
owl-listener/critique-composition
testing
VerifiedTrustedCommunity
Critique a screen's composition — balance, whitespace, rhythm, and gestalt principles.
1,265SKILL.mdUpdated May 15, 2026
owl-listener/critique-brand-consistency
data-ai
VerifiedTrustedCommunity
Critique a screen's brand consistency against mood.md, voice.md, and tokens.md.
1,265SKILL.mdUpdated May 15, 2026