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.

48

Quality

51%

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

63%

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

The skill is a tidy, well-structured overview that correctly defers detail to references/rule.md, but it offers no executable code or concrete conversion steps, leaving the action mostly abstract. The brief media-query preamble is minor known-concept padding.

Suggestions

Add a minimal executable snippet showing the core conversion, e.g. 'parent { container-type: inline-size; } @container (min-width: 400px) { .card { ... } }' so guidance is copy-paste ready.

Replace the opening media-query concept paragraph with a one-line rationale or remove it, since Claude already knows how media queries work.

Add a verification checkpoint to the Check/Fix flow, e.g. 'After converting, resize the container and confirm layout holds at the stated breakpoints before finalizing.'

DimensionReasoningScore

Conciseness

The body is lean with tidy sections, but the opening paragraph explains what media queries do — a concept Claude already knows — which is mild padding rather than the fully efficient anchor.

2.5 / 3

Actionability

Guidance is descriptive rather than executable: 'Convert this component from media query-based to container query-based responsiveness using container-type and @container' gives no concrete code, selectors, or copy-pasteable examples, landing between the vague and incomplete anchors.

1.5 / 3

Workflow Clarity

For a single-purpose skill the Check/Fix/Explain/Code Review sequence makes the action reasonably unambiguous, but there are no validation/verification checkpoints despite the Check/Fix framing, so it sits just below the clear-sequence anchor.

2.5 / 3

Progressive Disclosure

The body is a concise overview with a single clearly-signaled, one-level-deep reference to references/rule.md (a verified existing file), matching the well-signaled reference anchor for a simple skill.

3 / 3

Total

9.5

/

12

Passed

Description

40%

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

The description reads as a 'Use when...' trigger clause with no accompanying capability statement, and a duplicated rule title ('Use container queries for component-level responsiveness') is leaked into the middle of the text. It has an explicit trigger but is vague on what the skill actually does.

Suggestions

State concrete capabilities up front, e.g. 'Convert media-query-based components to @container queries by setting container-type and @container rules, and verify the rendered layout across breakpoints.'

Remove the duplicated rule title phrase 'Use container queries for component-level responsiveness' that is embedded mid-sentence.

Reframe to third person and broaden natural trigger terms ('container queries', '@container', 'responsive layout', 'media query breakpoints') so the skill is more distinctive.

DimensionReasoningScore

Specificity

The description only offers vague reviewing verbs ('reviewing stylesheets, component styles, and responsive behavior', 'Check the rendered layout') with no concrete capabilities or actions, matching the 'vague or no actions' anchor.

1 / 3

Completeness

It provides an explicit 'Use when...' trigger ('Use when reviewing stylesheets...') but never states what the skill does as concrete capabilities, so the 'what' side is effectively missing and is capped at 2 per the guideline.

2 / 3

Trigger Term Quality

It surfaces some relevant terms ('stylesheets, component styles, responsive behavior, breakpoints, interaction states') but omits common user phrasings like 'container queries' as a standalone trigger and 'media queries', so coverage is partial rather than comprehensive.

2 / 3

Distinctiveness Conflict Risk

The responsive-CSS niche is somewhat specific, but the generic reviewing phrasing and absence of a distinctive capability statement mean it could still overlap with sibling CSS-review skills.

2 / 3

Total

7

/

12

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.

Validation15 / 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.