Agent skill · software engineering · secondsky
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.
Why this skill is useful
Codifies mobile-first design principles and specific CSS patterns that the AI could infer but now doesn't have to guess.
What it needs
About 1k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
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 MDN Grid Guide
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/responsive-web-design