Agent skill · design visual · yonatangross
responsive-patterns
Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.
Why this skill is useful
Provides modern responsive design patterns and techniques for React applications that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Responsive Patterns Modern responsive design patterns using Container Queries, fluid typography, and mobile-first strategies for React applications (2026 best practices). Overview Building reusable components that adapt to their container Implementing fluid typography that scales smoothly Creating responsive layouts without media query overload Building design system components for multiple contexts Optimizing for variable container sizes (sidebars, modals, grids) Core Concepts Container Queries vs Media Queries Feature Media Queries Container Queries --------- --------------- ------------------- Responds to Viewport size Container size Component reuse Context-dependent Truly portable Browser support Universal Baseline 2023+ Use case Page layouts Component layouts Modern CSS Layout Load Read("rules/css-subgrid.md") for CSS Subgrid patterns: nested grid alignment, card layouts with aligned titles/content/actions, two-dimensional subgrid. Load Read("rules/css-intrinsic-responsive.md") for intrinsically responsive layouts: auto-fit/minmax grids, clamp() for fluid everything, container queries for component logic, zero media query patterns. Load Read("rules/responsive-foldables.md") for foldable/multi-screen device support: env(safe-area-inset-), viewport segment queries, dual-screen layouts, progressive enhancement. Key patterns covered: CSS Subgrid alignment, intrinsic responsive grids (auto-fit + minmax), fluid clamp() scales, foldable device layouts, safe area insets, viewport segment queries. CSS Patterns Load Read("rules/css-patterns.md") for complete CSS examples: container queries, cqi/cqb units, fluid typography with clamp(), mobile-first breakpoints, CSS Grid patterns, and scroll-queries. Key patterns covered: Container Query basics, Container Query Units (cqi/cqb), Fluid Typography with clamp(), Container-Based Fluid Typography, Mobile-First Breakpoints, CSS Grid Responsive Patterns, Container Scroll-Queries (Chrome 126+). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/responsive-patterns--41d4af