New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Prefer Container Queries

by flornkm in flornkm/personal-site

Enforce Tailwind container queries over viewport breakpoints for responsive components.

No licenceAuto-check passedFrontend & Design

Install Prefer Container Queries

skills CLI
$ npx skills add flornkm/personal-site --skill prefer-container-queries -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install flornkm/personal-site prefer-container-queries --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/flornkm/personal-site.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/prefer-container-queries .claude/skills/prefer-container-queries && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
prefer-container-queries
GitHub stars
151
Token cost
~1.1k tokens
SKILL.md length
551 words
Files
1
Skills in repo
14
Repo updated
First seen
Licence
None found

At a glance

Enforce Tailwind container queries over viewport breakpoints for responsive components.

  • Works in 2 steps: The @container class goes on the parent.… → Container variants respond to the…
  • Reviewing responsive Tailwind code
  • SKILL.md covers How it works, Variants, When viewport breakpoints are… and Migrating existing code, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Prefer Container Queries is an agent skill from flornkm/personal-site. 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.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Responsive design and CSS and styling. It works with Tailwind CSS. The repository describes itself as: Florians personal site.

When your agent uses it

  • Reviewing responsive Tailwind code
  • A component needs to adapt to its available space (cards
  • Anything reused in different layouts)
  • Migrating sm:/md:/lg: classes to @container variants

Example prompts

  • “/prefer-container-queries”

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  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…

What it can do on your machine

Read from SKILL.md and the folder at commit 9e03437. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • tailwindcss.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Prefer Container Queries loads about 1.1k tokens when it runs. Until then it costs about 89 tokens; SKILL.md has 551 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~89
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 551 words (~1,067 tokens).

“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…”

— opening of SKILL.md by flornkm
name
prefer-container-queries

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/prefer-container-queries of flornkm/personal-site.

Open the folder on GitHubat commit 9e03437

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders. This page covers the copy in flornkm/personal-site, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Prefer Container Queries next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Prefer Container Queries compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Prefer Container Queries this skillflornkm/personal-site151—~1.1kAutomated safety check: PassNone
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Tailwind CSS Patternsever-works/ever-works1623 repos~1.6kAutomated safety check: NotesAGPL-3.0
Good CSSvojtaholik/good-css241—~1.2kAutomated safety check: PassMIT
Using Ouds Web Version Major MinorOrange-OpenSource/Orange-Boosted-Bootstrap222—~4.2kAutomated safety check: PassMIT
Tailwindcss Developmentcachethq/core230—~1.1kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Tailwind CSS Patterns

    ever-works/ever-works

    Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.

    162 GitHub starsUsed in 3 repos~1.6k tokens
    Frontend & DesignAuto-check: notes

  • Good CSS

    vojtaholik/good-css

    Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts.

    241 GitHub stars~1.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Using Ouds Web Version Major Minor

    Orange-OpenSource/Orange-Boosted-Bootstrap

    Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces.

    222 GitHub stars~4.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    cachethq/core

    A skill your agent uses for Cachet Tailwind CSS and UI styling: Blade utility classes, public status-page components, Filament dashboard theme work, responsive layout, dark mode, spacing…

    230 GitHub stars~1.1k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    OpenLitterMap/openlittermap-web

    Styles applications using Tailwind CSS v3 utilities. An agent skill from OpenLitterMap/openlittermap-web.

    134 GitHub stars~713 tokensUpdated 25 days ago
    Frontend & DesignAuto-check passed

More from flornkm/personal-site

All 14 skills in this repo

  • Animation Vocabulary

    flornkm/personal-site

    Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" →…

    151 GitHub starsUsed in 13 repos~3.2k tokens
    Auto-check passed

  • Apple Design

    flornkm/personal-site

    Apple's approach to interface design and fluid, physical motion, translated for the web.

    151 GitHub starsUsed in 19 repos~5.6k tokens
    Auto-check passed

  • Central Icons

    flornkm/personal-site

    ALWAYS ACTIVE. An agent skill from flornkm/personal-site.

    151 GitHub stars~475 tokensUpdated today
    Auto-check: notes

  • Clean Jsx No Inline Ternaries

    flornkm/personal-site

    Keep JSX and component logic clean by minimizing inline ternaries, nested conditionals, and stringified conditional classes.

    151 GitHub stars~988 tokensUpdated today
    Auto-check passed

  • Design System

    flornkm/personal-site

    How to build UI in this repo — compose classes with cn, use the CSS-variable design tokens (never raw hex/px), reuse the typographic and ui/ primitives, and define variants with cva like the…

    151 GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Improve Animations

    flornkm/personal-site

    Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute.

    151 GitHub starsUsed in 12 repos~2k tokens
    Auto-check: warnings

Works with

Categories

Questions about Prefer Container Queries

What does Prefer Container Queries do?

Enforce Tailwind container queries over viewport breakpoints for responsive components. Prefer Container Queries is an agent skill from flornkm/personal-site. Enforce Tailwind container queries over viewport breakpoints for responsive components.

When should I use Prefer Container Queries?

Prefer Container Queries fits situations like: reviewing responsive Tailwind code; A component needs to adapt to its available space (cards; anything reused in different layouts); migrating sm:/md:/lg: classes to @container variants.

How do I install Prefer Container Queries in Claude Code?

Run `npx skills add flornkm/personal-site --skill prefer-container-queries -a claude-code`. Or copy the skill folder (.agents/skills/prefer-container-queries in flornkm/personal-site) into .claude/skills/prefer-container-queries in your project. Claude Code loads it when a task matches its description.

How do I install Prefer Container Queries in Codex?

Run `npx skills add flornkm/personal-site --skill prefer-container-queries -a codex`. Or copy the skill folder (.agents/skills/prefer-container-queries in flornkm/personal-site) into .agents/skills/prefer-container-queries in your project. Codex loads it when a task matches its description.

Can I use Prefer Container Queries in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add flornkm/personal-site --skill prefer-container-queries -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prefer-container-queries, .gemini/skills/prefer-container-queries, .github/skills/prefer-container-queries and .opencode/skills/prefer-container-queries in your project.

What does Prefer Container Queries need to run?

SKILL.md names no scripts, command-line tools or credentials: Prefer Container Queries is instructions for the agent only.

Does Prefer Container Queries access the network?

SKILL.md names 1 domain. As links in the text: tailwindcss.com. This is read from the text; nothing was executed.

Is Prefer Container Queries safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Prefer Container Queries use?

No licence was found for Prefer Container Queries or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Prefer Container Queries use?

About 1.1k tokens (SKILL.md is roughly 4.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Prefer Container Queries?

Skills that share tags, products or a category with Prefer Container Queries: UI Styling (Ohh-889/skyroc, 795 stars), Tailwind CSS Patterns (ever-works/ever-works, 162 stars), Good CSS (vojtaholik/good-css, 241 stars) and Using Ouds Web Version Major Minor (Orange-OpenSource/Orange-Boosted-Bootstrap, 222 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Prefer Container Queries?

flornkm (a GitHub user) maintains it in flornkm/personal-site, which has 151 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 9, 2026.

Source: flornkm/personal-site on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.