Agent skill · design visual · aiskillstore
responsive-design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
Why this skill is useful
Provides specific techniques and code examples for implementing responsive design patterns that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Responsive Design Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts. When to Use This Skill Implementing mobile-first responsive layouts Using container queries for component-based responsiveness Creating fluid typography and spacing scales Building complex layouts with CSS Grid and Flexbox Designing breakpoint strategies for design systems Implementing responsive images and media Creating adaptive navigation patterns Building responsive tables and data displays Core Capabilities 1. Container Queries Component-level responsiveness independent of viewport Container query units (cqi, cqw, cqh) Style queries for conditional styling Fallbacks for browser support 2. Fluid Typography & Spacing CSS clamp() for fluid scaling Viewport-relative units (vw, vh, dvh) Fluid type scales with min/max bounds Responsive spacing systems 3. Layout Patterns CSS Grid for 2D layouts Flexbox for 1D distribution Intrinsic layouts (content-based sizing) Subgrid for nested grid alignment 4. Breakpoint Strategy Mobile-first media queries Content-based breakpoints Design token integration Feature queries (@supports) Quick Reference Modern Breakpoint Scale Key Patterns Pattern 1: Container Queries Pattern 2: Fluid Typography Pattern 3: CSS Grid Responsive Layout Pattern 4: Responsive Navigation Pattern 5: Responsive Images Pattern 6: Responsive Tables Viewport Units Best Practices 1. Mobile-First: Start with mobile styles, enhance for larger screens 2. Content Breakpoints: Set breakpoints based on content, not devices 3. Fluid Over Fixed: Use fluid values for typography and spacing 4. Container Queries: Use for component-level responsiveness 5. Test Real Devices: Simulators don't catch all issues 6. Performance: Optimize images, lazy load off-screen content 7. Touch Targets: Maintain 44x44px minimum on mobile 8. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/responsive-design--1c6de8