responsive-patterns

Q: How do I install responsive-patterns?

Run npx skills add https://github.com/yonatangross/orchestkit --skill responsive-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/responsive-patterns/ (personal) or .claude/skills/responsive-patterns/ (project).

by yonatangrossFrontend & Design

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.

Installs: 1.6K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/yonatangross/orchestkit --skill responsive-patterns

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads responsive-patterns automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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+).

React Patterns

Load Read("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("references/<file>"):

File	Content
`container-queries.md`	Container query patterns
`fluid-typography.md`	Accessible fluid type scales

FAQ

What does the responsive-patterns skill do?

How do I install responsive-patterns?

Run npx skills add https://github.com/yonatangross/orchestkit --skill responsive-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/responsive-patterns/ (personal) or .claude/skills/responsive-patterns/ (project).

Which AI agents can use responsive-patterns?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is responsive-patterns safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains responsive-patterns?

It is published by yonatangross in yonatangross/orchestkit. It has 1,552 recorded installs.

More from yonatangross/orchestkit

View all →

devops-deployment

yonatangross/orchestkit

Use when setting up CI/CD pipelines, containerizing applications, deploying to Kubernetes, or writing infrastructure as code. DevOps & Deployment covers GitHub Actions, Docker, Helm, and Terraform patterns.

DevOps & Cloud1.6K installs

architecture-decision-record

yonatangross/orchestkit

ADR templates in the Nygard format with context, decision, consequences, and alternatives. Use when writing ADRs, recording an architectural decision, or evaluating options.

Code Quality & Workflow1.5K installs

ui-components

yonatangross/orchestkit

UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.

Frontend & Design1.5K installs

rag-retrieval

yonatangross/orchestkit

Retrieval-Augmented Generation patterns for grounded LLM responses. Use when building RAG pipelines, embedding documents, implementing hybrid search, contextual retrieval, HyDE, agentic RAG, multimodal RAG, query decomposition, reranking, or pgvector search.

AI & Agents1.5K installs

zustand-patterns

yonatangross/orchestkit

Reference for Zustand 5.x state management including slices, middleware, Immer, useShallow, persistence, selectors, and devtools integration. Documents 7 core patterns with TypeScript examples and anti-patterns. Use when building React state management with Zustand instead of Redux.

Frontend & Design1.4K installs

agent-orchestration

yonatangross/orchestkit

Agent orchestration patterns for agentic loops, multi-agent coordination, alternative frameworks, and multi-scenario workflows. Use when building autonomous agent loops, coordinating multiple agents, evaluating CrewAI/AutoGen/Swarm, or orchestrating complex multi-step scenarios.

AI & Agents1.4K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

responsive-patterns

Install

Install

Describe the task

Review the result

SKILL.md

Responsive Patterns

Overview

Core Concepts

Container Queries vs Media Queries

Modern CSS Layout

CSS Patterns

React Patterns

Accessibility Considerations

Anti-Patterns (FORBIDDEN)

Browser Support

Rules

Key Decisions

Related Skills

Capability Details

container-queries

fluid-typography

responsive-images

mobile-first-strategy

grid-flexbox-patterns

container-units

References

FAQ

More from yonatangross/orchestkit

Popular frontend & design skills