responsive-patterns

SKILL.md

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("${CLAUDE_SKILL_DIR}/rules/css-subgrid.md") for CSS Subgrid patterns: nested grid alignment, card layouts with aligned titles/content/actions, two-dimensional subgrid.

Load Read("${CLAUDE_SKILL_DIR}/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("${CLAUDE_SKILL_DIR}/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("${CLAUDE_SKILL_DIR}/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+).

React Patterns

Load Read("${CLAUDE_SKILL_DIR}/rules/react-patterns.md") for complete React examples: ResponsiveCard component, Tailwind container queries, useContainerQuery hook, and responsive images.

Key patterns covered: Responsive Component with Container Queries, Tailwind CSS Container Queries, useContainerQuery Hook, Responsive Images Pattern.

Accessibility Considerations

/* IMPORTANT: Always include rem in fluid typography */
/* This ensures user font preferences are respected */

/* ❌ WRONG: Viewport-only ignores user preferences */
font-size: 5vw;

/* ✅ CORRECT: Include rem to respect user settings */
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

/* User zooming must still work */
@media (min-width: 768px) {
  /* Use em/rem, not px, for breakpoints in ideal world */
  /* (browsers still use px, but consider user zoom) */
}

Anti-Patterns (FORBIDDEN)

/* ❌ NEVER: Use only viewport units for text */
.title {
  font-size: 5vw; /* Ignores user font preferences! */
}

/* ❌ NEVER: Use cqw/cqh (use cqi/cqb instead) */
.card {
  padding: 5cqw; /* cqw = container width, not logical */
}
/* ✅ CORRECT: Use logical units */
.card {
  padding: 5cqi; /* Container inline = logical direction */
}

/* ❌ NEVER: Container queries without container-type */
@container (min-width: 400px) {
  /* Won't work without container-type on parent! */
}

/* ❌ NEVER: Desktop-first media queries */
.element {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .element {
    grid-template-columns: 1fr; /* Overriding = more CSS */
  }
}

/* ❌ NEVER: Fixed pixel breakpoints for text */
@media (min-width: 768px) {
  body { font-size: 18px; } /* Use rem! */
}

/* ❌ NEVER: Over-nesting container queries */
@container a {
  @container b {
    @container c {
      /* Too complex, reconsider architecture */
    }
  }
}

Browser Support

Feature
Chrome
Safari
Firefox
Edge

Container Size Queries
105+
16+
110+
105+

Container Style Queries
111+
❌
❌
111+

Container Scroll-State
126+
❌
❌
126+

cqi/cqb units
105+
16+
110+
105+

clamp()
79+
13.1+
75+
79+

Subgrid
117+
16+
71+
117+

Rules

Each category has individual rule files in rules/ loaded on-demand:

Category
Rule
Impact
Key Pattern

Modern CSS Layout
rules/css-subgrid.md
HIGH
CSS Subgrid for nested grid alignment, card layouts

Modern CSS Layout
rules/css-intrinsic-responsive.md
HIGH
Intrinsic responsive layouts, auto-fit/minmax, clamp(), zero breakpoints

Modern CSS Layout
rules/responsive-foldables.md
MEDIUM
Foldable devices, safe area insets, viewport segments

CSS
rules/css-patterns.md
HIGH
Container queries, cqi/cqb, fluid typography, grid, scroll-queries

React
rules/react-patterns.md
HIGH
Container query components, Tailwind, useContainerQuery, responsive images

PWA
rules/pwa-service-worker.md
HIGH
Workbox caching strategies, VitePWA, update management

PWA
rules/pwa-offline.md
HIGH
Offline hooks, background sync, install prompts

Animation
rules/animation-motion.md
HIGH
Motion presets, AnimatePresence, View Transitions

Animation
rules/animation-scroll.md
MEDIUM
CSS scroll-driven animations, parallax, progressive enhancement

Touch & Mobile
rules/touch-interaction.md
HIGH
Touch targets (44px min), thumb zones, pinch-to-zoom, safe areas, gestures

Total: 10 rules across 6 categories

Key Decisions

Decision
Option A
Option B
Recommendation

Query type
Media queries
Container queries
Container for components, Media for layout

Container units
cqw/cqh
cqi/cqb
cqi/cqb (logical, i18n-ready)

Fluid type base
vw only
rem + vw
rem + vw (accessibility)

Mobile-first
Yes
Desktop-first
Mobile-first (less CSS, progressive)

Grid pattern
auto-fit
auto-fill
auto-fit for cards, auto-fill for icons

Related Skills

design-system-starter - Building responsive design systems

ork:performance - CLS, responsive images, and image optimization

ork:i18n-date-patterns - RTL/LTR responsive considerations

Capability Details

container-queries

Keywords: @container, container-type, inline-size, container-name
Solves: Component-level responsive design

fluid-typography

Keywords: clamp(), fluid, vw, rem, scale, typography
Solves: Smooth font scaling without breakpoints

responsive-images

Keywords: srcset, sizes, picture, art direction
Solves: Responsive images for different viewports

mobile-first-strategy

Keywords: min-width, mobile, progressive, breakpoints
Solves: Efficient responsive CSS architecture

grid-flexbox-patterns

Keywords: auto-fit, auto-fill, subgrid, minmax
Solves: Responsive grid and flexbox layouts

container-units

Keywords: cqi, cqb, container width, container height
Solves: Sizing relative to container dimensions

References

Load on demand with Read("${CLAUDE_SKILL_DIR}/references/<file>"):

File
Content

container-queries.md
Container query patterns

fluid-typography.md
Accessible fluid type scales