CtrlK
BlogDocsLog inGet started
Tessl Logo

container-queries

Use when reviewing stylesheets, component styles, and responsive behavior related to Use container queries for component-level responsiveness. Check the rendered layout across breakpoints and interaction states before proposing a fix.

60

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/container-queries/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured overview body with clean progressive disclosure to a real, one-level-deep reference file, and concrete guidance that names the exact CSS constructs (container-type, @container, media query breakpoints, exact selectors). Its weaknesses are modest: a third of the body re-explains a concept Claude already knows and duplicates a paragraph verbatim from the reference, and the body's Check/Fix workflow omits the verification checkpoint that both the description and the reference file call for.

Suggestions

Delete the intro paragraph and the 'Quick Reference' bullets (or compress them to one line) — they restate known CSS concepts and the paragraph is duplicated verbatim as 'Why It Matters' in references/rule.md.

Add an explicit verification step to the Fix section, e.g. 'After converting, verify the rendered layout at the affected container breakpoints and interaction states before considering the fix done' — mirroring references/rule.md's Verification section and the description's own check requirement.

Include a minimal two-line conversion snippet in the Fix section (container-type: inline-size on the parent + one @container rule) so the fix is executable without opening the reference.

DimensionReasoningScore

Conciseness

The intro paragraph ('Media queries respond to viewport width... making the component genuinely reusable in any layout context') and the Quick Reference bullets restate a CSS concept Claude already knows, and that same paragraph is duplicated verbatim as 'Why It Matters' in references/rule.md — so those tokens are spent twice. This matches anchor 3 ('mostly efficient but includes some unnecessary explanation or could be tightened'); it is not 2 because the body is genuinely short and the section scaffolding is lean, and not 4 because roughly a third of the body is over-explanation or duplication.

3 / 5

Actionability

The guidance is concrete and specific: 'Convert this component from media query-based to container query-based responsiveness using container-type and @container', 'Look for components in this CSS that have media query breakpoints', and 'Flag exact selectors, declarations, or breakpoints' name the exact constructs and outputs, with complete executable CSS one reference hop away. It matches anchor 4 ('mostly executable guidance... minor gaps') — not 5 because the body itself contains no minimal inline example (e.g. a two-line container-type + @container snippet) and the 'Explain' section only describes what to explain.

4 / 5

Workflow Clarity

A rough sequence is present (Check → Fix → Explain / Code Review), matching anchor 3 ('steps listed but validation gaps... checkpoints missing or implicit') — the skill's own description demands 'Check the rendered layout across breakpoints and interaction states before proposing a fix', yet no post-fix verification step appears in the body; verification guidance exists only in references/rule.md's Verification section. It is not 2 because the sections are well-defined and unambiguous, and not 4+ because the key checkpoint the description promises is absent from the body's own workflow.

3 / 5

Progressive Disclosure

The body is a clear overview with well-signaled, one-level-deep references: 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and references/rule.md exists, contains the details, and points no further. This matches the anchor-5 pattern (clear overview, well-signaled single-hop reference, easy navigation) and the rubric's note that short, well-organized skills can score 5 on structure alone; the minor quibbles (the pointer promises 'framework-specific guidance' that rule.md does not actually contain) are content-accuracy, not navigation, issues.

5 / 5

Total

15

/

20

Passed

Description

75%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A serviceable description with an explicit 'Use when...' trigger and several concrete, domain-specific actions, but it is undermined by a garbled title insertion ('related to Use container queries for component-level responsiveness') that muddies the capability statement, and it lacks common synonyms and file extensions. It reads as a templated auto-generation of a rule page rather than a hand-tuned description.

Suggestions

Rewrite the capability clause as a clean third-person action instead of the pasted-in rule title, e.g. 'Convert media-query-based components to container queries (container-type, @container) for component-level responsiveness. Use when reviewing stylesheets, component styles, or responsive behavior in CSS.'

Add natural trigger synonyms and file extensions users would actually say: 'CSS', '.css files', 'media queries', 'responsive components', 'component reuse'.

Keep the explicit check action ('check the rendered layout across breakpoints and interaction states') but attach it to the what, so the description reads as capability + trigger + verification in that order.

DimensionReasoningScore

Specificity

The description lists several concrete actions — 'reviewing stylesheets, component styles, and responsive behavior', applying 'container queries for component-level responsiveness', and 'Check the rendered layout across breakpoints and interaction states before proposing a fix' — naming specific artifacts (selectors, breakpoints, rendered layout). It sits at the anchor-4 level ('several specific actions; minor gaps') rather than 5 because the core capability is embedded as a garbled rule title rather than stated as a clean action, and it is not below 3 since it goes well beyond naming a domain with 1-2 generic actions.

4 / 5

Completeness

Both halves are present: an explicit 'Use when reviewing stylesheets, component styles, and responsive behavior...' trigger clause, and a 'what' conveyed via 'Use container queries for component-level responsiveness' plus 'Check the rendered layout across breakpoints and interaction states'. It does not reach anchor 5 because the 'what' is not cleanly stated as a capability — the phrase 'related to Use container queries for component-level responsiveness' reads as a template artifact gluing the rule title into the sentence — but it is well above anchor 4's weaker cases since the 'when' is explicit and specific.

4 / 5

Trigger Term Quality

Natural trigger terms are present: 'stylesheets', 'component styles', 'responsive behavior', 'container queries', 'breakpoints', 'component-level responsiveness' — terms a user doing CSS review would plausibly say. It falls short of the anchor-5 'comprehensive coverage including synonyms and file extensions' because obvious variations like 'CSS', '.css', 'media queries', and 'responsive components' are missing, and it exceeds anchor 3's 'missing common variations' only partially.

4 / 5

Distinctiveness Conflict Risk

'Container queries' and 'component-level responsiveness' carve out a clear niche, but the trigger clause 'reviewing stylesheets, component styles, and responsive behavior' is broad enough to overlap with sibling CSS/responsive-review rules (e.g. media query or layout checklists). This matches anchor 4 ('mostly distinct; minor overlap risk with closely related skills') — not 5, since the opening trigger terms alone would fire for many CSS-review skills.

4 / 5

Total

16

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.