Skills
.Work. You
Rest

responsive-patterns

Community

Build responsive UI with container queries.

Design & Creative#react#mobile-first#responsive#design-patterns#container-queries#fluid-typography#css-grid
AuthorEdwinFermin
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: responsive-patterns
Download link: https://github.com/EdwinFermin/innvox/archive/main.zip#responsive-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.