Florian KiemA component should respond to the space it is given, not to the window. Enforces Tailwind container queries when writing or reviewing responsive code.
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.
The description field from SKILL.md, quoted as written.
Read it before you install it
SKILL.md · 79 lines
Install on its own
Or add it to your stack above and install everything at once.
npx skills add https://github.com/flornkm/skills --skill prefer-container-queriesTrust audit
View the source ↗- Checked automatically and confirmed.
- Resolved (HTTP 200), passed
- Checked automatically and confirmed.
- Resolves · 111 stars, passed
- Checked automatically and confirmed.
- Transcribed from the author's own page, passed
- Checked automatically and confirmed.
- Last updated 1 months ago, passed
- Checked automatically and confirmed.
- Credited to Florian Kiem, passed
Goes well with
prototype
Builds several genuinely different UI variants behind a live picker.
Flip through real implementations instead of arguing about descriptions, then promote the one that wins.
npx skills add https://github.com/emilkowalski/skills --skill prototype
pick-ui-library
Picks the library from the set Emil actually uses and trusts.
Stops your agent hand-rolling a toast or installing whatever is trending. Covers components, motion, charts, interaction, state and styling.
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library
better-layout
Grouping, alignment, reading order, progressive disclosure.
The structural decisions that make a layout legible before anything is styled.
npx skills add https://github.com/jakubkrehel/skills --skill better-layout
Emil Kowalski
Jakub Krehel