Agent skill · flornkm
prefer-container-queries
Enforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in different layouts), or when migrating sm:/md:/lg: classes to @container variants.
What it needs
About 3k tokens when loaded.
What this skill does
Prefer Container Queries Components should respond to the space they are in, not to the viewport. A card that lives in a sidebar has maybe 300px of width even on a huge screen, and a viewport breakpoint like md:flex-row will get that wrong every time. Container queries fix this: the component asks "how wide am I?" instead of "how wide is the window?". When writing responsive Tailwind, default to container queries. Viewport breakpoints are the exception, not the rule. How it works Mark the parent as a container, then use @-prefixed variants on its children: @md: here means "when the container is at least 28rem wide", regardless of viewport size. This card works in a sidebar, a modal, and a full-width grid without changing a single class. Two rules that trip people up: 1. The @container class goes on the parent. The @md: variants go on descendants. An element cannot query its own size. 2. Container variants respond to the nearest ancestor with @container. If styles are not applying, check which container you are actually querying. Variants Tailwind v4 ships container queries in core. The sizes: Variant Min width --- --- @3xs 16rem (256px) @2xs 18rem (288px) @xs 20rem (320px) @sm 24rem (384px) @md 28rem (448px) @lg 32rem (512px) @xl 36rem (576px) @2xl 42rem (672px) @3xl 48rem (768px) @4xl 56rem (896px) @5xl 64rem (1024px) @6xl 72rem (1152px) @7xl 80rem (1280px) Also available: @max-md: styles below a container size. @min-[475px]: arbitrary values when the scale does not fit. @container/sidebar plus @md/sidebar:flex-row to name a container and query it from deeper in the tree, past other containers. The full docs for this can be found here. On Tailwind v3, the same syntax needs the @tailwindcss/container-queries plugin. Check the Tailwind version before writing classes. When viewport breakpoints are still right Do not convert these: Page-level layout. The overall grid, whether the sidebar exists at all, header and navigation behavior. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills flornkm/prefer-container-queries