Individual skill

container-queries

Use when reviewing stylesheets, component styles, and responsive behavior related to Use container queries for component-level responsiveness. Check the rendered layout across breakpoints and interaction states before proposing a fix.

skills/container-queries/SKILL.md

Read pinned source

Source commit e8d14d049010e2ce25afcd5e8609dfcbbe63e47e

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 2, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 74,678
Repository last updated: Oct 31, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

frontend Repository topic
front-end-development Repository topic
front-end-developer-tool Repository topic
guidelines Repository topic
checklist Repository topic
reference Repository topic
web-development Repository topic
html Repository topic
css Repository topic
javascript Repository topic
engineering Derived category
devops Derived category
devops-containers Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 2,105 bytes
references/rule.mddoc · 3,530 bytes

Read excerpt


# Use container queries for component-level responsiveness

Media queries respond to viewport width, which makes components context-dependent — a card designed for a 3-column grid might break when placed in a 2-column grid or a sidebar. Container queries solve this: a card can layout itself based on how much space its container gives it, making the component genuinely reusable in any layout context.

## Quick Reference

- Container queries respond to the parent container's size, not the viewport
- Set container-type: inline-size on the parent to enable container queries
- Use @container rule to write styles that activate at container breakpoints
- Container queries make components reusable in sidebars, grids, and full-width areas

## Check

Look for components in this CSS that have media query breakpoints — consider whether container queries would make them more reusable in different layout contexts.