What is the main difference between media queries and container queries?

Media queries respond to the browser viewport size, whereas container queries allow elements to respond to the size of their direct parent container, making components significantly more portable across different layouts.

Does this skill support Tailwind CSS implementations?

Yes, it includes comprehensive support for Tailwind CSS, including the @container plugin syntax, named containers, and standard breakpoint variants like @md and @lg.

When should I avoid using container queries?

You should generally avoid using container queries for top-level page layouts, global navigation, or adjusting global font sizes, where standard media queries remain the industry standard.

How does this skill handle older browser support?

The skill provides implementation strategies using CSS @supports rules and progressive enhancement to ensure that components remain functional and visually acceptable in browsers that do not yet support container queries.

CSS Container Queries Pro

Name: CSS Container Queries Pro
Author: Microck

byMicrock

•

デザインツール

Implements and refactors component-based responsive designs using modern CSS container queries and Tailwind CSS patterns.

This skill provides specialized guidance for transitioning from viewport-dependent media queries to container-based responsive design. It enables Claude to implement self-contained, portable components that adapt dynamically to their parent container's dimensions using native CSS @container syntax or Tailwind CSS variants. It is particularly useful for building robust design systems and micro-frontends where components must maintain visual integrity across various layout contexts, such as sidebars, complex grids, or main content areas, without relying on global viewport breakpoints.

主な機能

01Ensures browser compatibility with @supports fallbacks and progressive enhancement

02Refactors legacy media queries into portable CSS container queries

03Provides context-aware responsive patterns for cards, grids, and forms

042 GitHub stars

05Configures named containers for clarity in complex nested layouts

06Implements Tailwind CSS @container plugin patterns and responsive variants

ユースケース

01Optimizing sidebar widgets and dashboard modules to adapt to varying column widths

02Transforming layout-dependent UI components into portable, context-aware design system elements

03Building responsive components for micro-frontends that operate independently of the host viewport

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck flpbalada-css-container-queries

For use in Claude.ai and ChatGPT

Download Skill