responsive-web-design
Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility.
By secondsky · 624 installs
npx skills add secondsky/claude-skills --skill responsive-web-design
Source repository · Upstream listing
Responsive Web Design
Build adaptive interfaces using modern CSS techniques for all screen sizes.
Mobile First Media Queries
Flexible Grid
Fluid Typography
Responsive Images
Flexbox Navigation
Best Practices
Start with mobile styles first
Use flexible units (%, rem, vw)
Test on real devices
Ensure minimum 48px touch targets
Maintain readable line lengths (45 75 chars)
Use CSS Grid for 2D layouts, Flexbox for 1D
Resources
[MDN Flexbox Guide](https://developer.mozilla.org/en US/docs/Web/CSS/CSS Flexible Box Layout)
[MDN Grid Guide](https://developer.mozilla.org/en US/docs/Web/CSS/CSS Grid Layout)