Skip to content
Get packs

Container Queries Review

Reviews CSS for component-level responsiveness and suggests container query fixes

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches the agent a front-end best practice: make components respond to the size of their parent container instead of the whole browser window, using CSS container queries. When you ask it to review styles, it looks for media-query breakpoints in components, explains whether container queries would make them more reusable, and can convert them to container-type and @container rules. It is guidance for reading and editing CSS, not a tool that runs anything on its own.

Great for

  • Front-end developers maintaining reusable UI components such as cards used in grids and sidebars
  • Designers or reviewers checking whether a stylesheet's responsive behaviour holds up across layouts
  • Teams who want a consistent checklist-style review of CSS responsiveness

Skip it if

  • Projects that do not use CSS or need no responsive layout work, since the advice would not apply
  • Older browser targets without container query support, where converting styles could break layouts unless fallbacks are kept

Try asking

  • “Review my card component CSS and tell me where container queries would make it reusable in a sidebar.”
  • “Convert this media-query breakpoint in my product tile styles to use @container.”
  • “Explain how container queries differ from media queries for my design system.”
Step-by-step guide: how to use Container Queries ReviewInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    container-queries.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip container-queries.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip container-queries.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at the specific component stylesheet and the layout contexts where it appears, so it can judge reuse accurately.
  • Ask it to verify the rendered layout across breakpoints in a browser, since the skill asks for that check before proposing fixes.
  • Check browser support for container queries in your target audience before replacing media queries entirely.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.