Responsive Patterns

A modern responsive design reference that goes beyond basic media queries. You get container queries with cqi/cqb units, fluid typography with clamp(), CSS subgrid patterns, and intrinsic layouts using auto-fit/minmax. It covers foldable devices, safe area insets, and viewport segments. Also includes PWA patterns with Workbox, scroll-driven animations, and touch interaction guidelines. The anti-patterns section is genuinely useful, calling out cqw/cqh misuse and desktop-first approaches. Ships with 10 separate rule files loaded on demand, so you're not reading about framer-motion when you just need a responsive card. Browser support tables are current through 2026. Mobile-first, accessibility-minded, and written for React but the CSS patterns work anywhere.

skills.sh installs: 1.6K
GitHub stars: 301
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add yonatangross/orchestkit --skill responsive-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

SKILL.md on GitHub