Guide · Agent skill
How to use the Container Queries Review agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Container Queries Review skill is a set of instructions that teaches an AI agent to check CSS for responsive layouts that depend on the browser window instead of the space a component actually has. It is written for front-end developers, designers and reviewers who maintain reusable components such as cards. After this guide you will know how to install the skill, how to ask for a review in plain language, and what to check in the output.
Container Queries Reviewthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the container-queries skill ZIP from the page where you found this guide.
- 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder for a shared repository.
- 3Or upload in the Claude apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill.
- 4Ask for a review in plain language. Paste the component's CSS and describe the layouts where it appears, such as grids and sidebars.
- 5Check the proposed container setup. Confirm the parent has container-type: inline-size and that the @container rule targets the right selectors.
- 6Test in the rendered layout. View the component in each layout and interaction state before merging the change.
What the container-queries skill makes the agent do
Media queries respond to viewport width, so a component tuned for a three-column grid can break when it is placed in a sidebar. The skill teaches the agent to look for media-query breakpoints inside component styles and ask whether container queries would make them more reusable.
When you ask for a review, the agent looks for components with media-query breakpoints, explains whether container queries would help, and can convert those styles to container-type and @container rules. The skill is guidance for reading and editing CSS. It does not run anything on its own.
- Container queries respond to the parent container's size, not the viewport.
- The parent needs container-type: inline-size before its children can use container queries.
- The @container rule holds styles that apply at container breakpoints.
.card-container {
container-type: inline-size;
container-name: card;
}
@container (min-width: 400px) {
.card {
display: flex;
gap: 1.5rem;
}
}Install the container-queries skill
Download the ZIP for this skill from our page. Unzip it into ~/.claude/skills/ to make it available across your projects, or into a project's .claude/skills/ folder to share it with one codebase.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
The skill folder contains SKILL.md and references/rule.md. SKILL.md holds the main instructions, and rule.md holds fuller implementation details and examples.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your repository
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. Describe the task in plain language that matches the skill's purpose, such as reviewing stylesheets or checking responsive behaviour of a component. The skill's description covers reviewing styles, responsive behaviour and rendered layout across breakpoints and interaction states.
Give the agent the actual CSS or file path. The more specific the component, the more useful the review.
- Review this card component's CSS and tell me if container queries would make it reusable in grids and sidebars.
- Convert the media query breakpoints in this stylesheet to container queries using container-type and @container.
- Explain how container queries differ from media queries for this navigation component.
Example workflow
Suppose you have a product card that switches to a horizontal layout at 768px of viewport width. It looks right on the full-width page but crowds in a sidebar. Paste the card's stylesheet and ask the agent to check it.
The agent should flag the breakpoint, explain that it depends on the window rather than the card's space, and propose a container-type setup on the parent with an @container rule on the card. Review the proposed selectors and test the component in each place it appears.
What the skill needs and safety notes
The skill lists no requirements. It does not run scripts and does not use the network, so it only reads and edits the files you give it.
Check the converted styles before shipping. The skill's own guidance notes that older browsers without container query support could have layouts break when styles are converted, unless fallbacks are kept.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for better results
Name the containers you want to use, and state the layouts where the component appears. Ask for an explanation as well as a fix when you are learning the technique.
Keep a fallback for browsers that lack container query support if your audience includes them. Test each reused layout in the browser, including interaction states.
- Include the parent markup or selectors so the agent can place container-type correctly.
- Ask for a before-and-after diff so you can review each change.
- Limit the review to one component at a time for clearer results.
What people use it for
- Finding media-query breakpoints in a card component that should respond to its grid or sidebar instead.
- Converting a reusable component's responsive styles to container-type and @container rules.
- Explaining to a team why a component breaks in a narrower layout and how container queries address it.
- Running a consistent checklist-style review of CSS responsiveness across a component library.
Frequently asked questions
How do I install the container-queries skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the container-queries skill require anything else?
The skill lists no requirements. It does not run scripts and does not use the network, so it works by reading and editing the CSS you provide.
Is the container-queries skill free?
The skill is released under the MIT licence. This page does not list pricing, so check the source repository for licence terms.
What is the difference between container queries and media queries?
Media queries respond to the viewport width, while container queries respond to the size of a parent container. This lets a component adapt wherever it is placed, such as in a grid or a sidebar.
Will converting to container queries break older browsers?
It can, if the target browsers lack container query support. The skill's guidance says to keep fallbacks in that case.
Why isn't my container query working?
Check that the parent element has container-type: inline-size set, since container queries depend on that. Then confirm the @container rule targets the child selectors you expect.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits front-end developers and reviewers who maintain reusable components and want a consistent CSS responsiveness check. It is not useful for projects with no CSS or no responsive layout work, and teams that must support browsers without container query support should plan fallbacks before converting styles.
Download the skill