skills.rest
EdwinFermin
EdwinFerminCOMMUNITY
Explore all skills by this author →
GitHub

responsive-patterns

Provide container-query responsive design patterns for React components.

Updated Nov 18, 2025
Search Tags:#react#mobile-first#responsive#design-patterns#container-queries#fluid-typography#css-grid
One-click install
npx skills add https://github.com/EdwinFermin/innvox --skill responsive-patterns-edwinfermin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-patterns
Source: https://github.com/EdwinFermin/innvox/tree/main/.agents/skills/responsive-patterns
Command: npx skills add https://github.com/EdwinFermin/innvox --skill responsive-patterns-edwinfermin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Container-aware UI patterns reduce CSS complexity by enabling components to adapt to their container size rather than the viewport, making design systems more portable.

Core Features & Use Cases

  • Container queries for component-level responsiveness across various container sizes.
  • Fluid typography using clamp() and rem units to maintain readability.
  • Mobile-first grid and layout patterns suitable for dashboards, cards, and modular components.
  • React-ready patterns and Tailwind-friendly approaches for rapid UI composition.
  • Use Case: build a reusable Card or Panel library that reflows when embedded in different container contexts.

Quick Start

Create a responsive card component that uses container queries to adapt layout based on container width.

Frequently Asked Questions about responsive-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a React component responsive to its container instead of the viewport?▼

Container queries allow React components to adapt their layout based on parent container size rather than the viewport. This makes design system components portable across different page contexts without relying on global media queries.

What is fluid typography and how do I implement it with clamp()?▼

Fluid typography uses the CSS clamp() function with rem units to scale text size smoothly between defined minimum and maximum bounds. This maintains readability across mobile and desktop contexts without abrupt breakpoint shifts.

Can I use container queries with Tailwind-friendly CSS grid layouts?▼

Yes, these responsive patterns provide Tailwind-friendly approaches combined with CSS grid layouts. You can apply mobile-first breakpoints and container query units to build modular dashboards and card components that reflow correctly.

Does this approach work for building a reusable design system component library?▼

Yes, container query patterns are designed for building reusable React design system libraries. Components like panels and cards reflow automatically when embedded in different container contexts, reducing overall CSS complexity.

What is the difference between container queries and media queries for responsive UI?▼

Media queries adapt components to the browser viewport size, while container queries adapt them to their parent container size. Container queries make UI components more portable and modular across varying application layout contexts.

Why do I need container-type and container-name properties for responsive components?▼

The container-type property establishes a containment context for size querying, while container-name assigns it an identifier. These properties are required to enable cqi and cqb units for targeted component-level responsive styling.

Related Skills

Explore More Design & Creative Skills→
wernerglinkawernerglinka

css-layout-development

Create container-aware CSS layouts using container queries and fluid typography.

Community
Intermediate
ArogyaReddyArogyaReddy

responsive-design

Build responsive web interfaces with container queries, fluid typography, and CSS Grid.

Community
Advanced
mefardalesmefardales

tailwind-css

Implement Tailwind CSS v3+ responsive design and utility-first component styling.

Community
Intermediate
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate