What are cqi and cqb units?

These are Container Query units representing a percentage of the container's inline (width) or block (height) size, offering much more precision than standard viewport units (vw/vh) for nested components.

Is the fluid typography accessible?

Absolutely. The patterns use the clamp() function combined with rem units to ensure font sizes scale smoothly while respecting user browser font size settings and accessibility zoom levels.

Why use Container Queries instead of Media Queries?

Container Queries allow components to adapt based on their parent container's size rather than the whole viewport, making them truly portable and reusable across different layouts like sidebars, modals, and grids.

Does this skill support Tailwind CSS?

Yes, it includes specific patterns for Tailwind's container query plugin, using classes like @container and @md: to handle responsive layout changes efficiently within React components.

Responsive Design Patterns

Name: Responsive Design Patterns
Author: yonatangross

byyonatangross

•

Herramientas de Diseño

Implements modern responsive layouts using container queries, fluid typography, and mobile-first CSS strategies for React applications.

This skill equips Claude with advanced frontend patterns for building adaptive user interfaces that transcend traditional media queries. It focuses on the latest CSS features like Container Queries (@container), fluid typography via the clamp() function, and logical units (cqi, cqb) to ensure components are truly portable across different layout contexts. Whether you're building complex dashboards, design systems, or mobile-first web apps, this skill provides the implementation patterns needed for high-performance, accessible, and future-proof responsive design in React and Tailwind CSS environments.

Características Principales

01Responsive image optimization using srcset and art direction

0269 GitHub stars

03Container Query implementation for component-level responsiveness

04Logical unit support (cqi, cqb) for internationalization-ready designs

05Mobile-first CSS Grid and Flexbox layout architectures

06Accessible fluid typography patterns using clamp() and rem units

Casos de Uso

01Refactoring legacy desktop-first CSS to modern, performance-optimized mobile-first patterns

02Implementing a typography system that scales smoothly across devices without excessive media query boilerplate

03Building a reusable component library where elements adapt to their parent container rather than the viewport

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit responsive-patterns

For use in Claude.ai and ChatGPT

Download Skill