Agent skill · design visual · aiskillstore
responsive-design
Create responsive web designs that work across all devices and screen sizes. Use when building mobile-first layouts, implementing breakpoints, or optimizing for different viewports. Handles CSS Grid, Flexbox, media queries, viewport units, and responsive images.
Why this skill is useful
Provides specific CSS patterns and techniques for responsive design that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Responsive Design When to use this skill New website/app: Layout design for combined mobile-desktop use Legacy improvement: Converting fixed layouts to responsive Performance optimization: Image optimization per device Multiple screens: Tablet, desktop, and large screen support Instructions Step 1: Mobile-First Approach Design from small screens and progressively expand. Example: Step 2: Flexbox/Grid Layout Leverage modern CSS layout systems. Flexbox (1-dimensional layout): CSS Grid (2-dimensional layout): Step 3: Responsive Images Provide images suited to the device. Using srcset: picture element (Art Direction): CSS background images: Step 4: Responsive Typography Adjust text size based on screen size. clamp() function (fluid sizing): Media query approach: Step 5: Container Queries (New Feature) Apply styles based on parent container size. Output format Standard Breakpoints Constraints Mandatory Rules (MUST) 1. Viewport meta tag: Must be included in HTML 2. Mobile-First: Mobile default, use min-width media queries ✅ @media (min-width: 768px) ❌ @media (max-width: 767px) (Desktop-first) 3. Relative units: Use rem, em, %, vw/vh instead of px font-size: rem padding/margin: rem or em width: % or vw Prohibited (MUST NOT) 1. Fixed width prohibited: Avoid width: 1200px Use max-width: 1200px 2. Duplicate code: Avoid repeating same styles across all breakpoints Common styles as default, only differences in media queries Examples Example 1: Responsive Navigation Example 2: Responsive Grid Card Best practices 1. Container queries first: Use container queries instead of media queries when possible 2. Flexbox vs Grid: Flexbox for 1-dimensional, Grid for 2-dimensional 3. Performance: Image lazy loading, use WebP format 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/responsive-design