Is it compatible with Tailwind CSS?

Absolutely. The skill includes specific patterns for implementing container query variants (@sm, @md, etc.) and fluid sizing within Tailwind-based environments.

How does it handle mobile-first development?

The skill enforces a mobile-first strategy where the simplest layout is the default, and complexity is added progressively as containers or viewports grow, resulting in leaner CSS.

Does it support accessible typography?

Yes, it uses the CSS clamp() function combined with rem units to ensure text scales fluidly while still respecting user-defined font size preferences in the browser.

What makes this skill different from traditional media queries?

This skill prioritizes Container Queries, which allow components to respond to the size of their parent container rather than the entire screen, enabling true component portability.

What browsers support these features?

The patterns focus on 'Baseline 2023' features and beyond, including Container Queries and subgrid, which are supported in all modern evergreen browsers like Chrome, Safari, and Firefox.

Modern Responsive Patterns

Name: Modern Responsive Patterns
Author: yonatangross

byyonatangross

•

Design Tools

Implements advanced responsive design patterns using Container Queries, fluid typography, and mobile-first CSS strategies for React applications.

Modern Responsive Patterns provides production-ready implementations for creating truly adaptive React components that respond to their local container size rather than just the global viewport. It automates the setup of Container Queries, logical CSS units like cqi and cqb, and accessible fluid typography using the CSS clamp function. This skill is ideal for developers building complex dashboards, design systems, or modular UI components where elements must maintain visual integrity across various layout contexts such as sidebars, modals, and dynamic grids.

Key Features

01Mobile-first CSS Grid and Flexbox layout patterns

0269 GitHub stars

03Container Query implementation for component-level responsiveness

04Accessible fluid typography scaling with CSS clamp() and rem units

05Logical unit utilization (cqi/cqb) for internationalization-ready designs

06Support for advanced CSS features like subgrid and scroll-state queries

Use Cases

01Building a reusable card component that adapts its layout whether in a thin sidebar or a wide main content area

02Creating dashboard widgets that automatically reorganize content based on container dimensions

03Implementing a typography system that scales smoothly across all devices without media query overload

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