# prefer-container-queries

Agent skill by Florian Kiem (https://floriankiem.com)

A component should respond to the space it is given, not to the window. Enforces Tailwind container queries when writing or reviewing responsive code.

Topics: Layout, Components
Last updated: 2026-08-05 (1 months ago)
Source: https://github.com/flornkm/skills
Repository: https://github.com/flornkm/skills

## Install

```bash
npx skills add https://github.com/flornkm/skills --skill prefer-container-queries
```

## In the author's words

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.

## Verification

- Source link: Resolved (HTTP 200) (pass)
- Repository: Resolves on GitHub (pass)
- Install command: Transcribed from the author's own page (pass)
- Maintenance: Last updated 1 months ago (pass)
- Attribution: Credited to Florian Kiem (pass)

Full page: https://stackskills.dev/library/prefer-container-queries