CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

migrate-container-queries

Guide for migrating viewport media queries (@media, useMedia, and screen:-prefixed responsive props) to container queries in Sentry's frontend. Use when migrating responsive layout to container queries, replacing @media/useMedia/screen: breakpoints, refactoring styled responsive components to Container/Flex/Grid primitives, or working on the DE container-query migration.

72

Quality

90%

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

SKILL.md
Quality
Evals
Security

Quality

Content

82%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.

An action-dense, well-structured migration guide with executable old/new examples and a rung-based workflow plus validation checklist. It is lean and assumes competence, with only minor conciseness and error-recovery-loop gaps.

Suggestions

Add an explicit 'if the visual check shows a mismatch, re-pick the nearest-px container token and re-check' step to turn the validation checkpoint into a full fix-and-retry feedback loop.

Tighten the callout and container-type prose slightly (e.g. merge the duplicated visual-check emphasis) to lift conciseness toward a 5.

Consider moving the breakpoint/container pixel-scale tables into a reference file if the skill grows, to keep SKILL.md as a lean overview.

DimensionReasoningScore

Conciseness

Dense, token-efficient body that assumes Claude knows CSS/container-query basics and avoids explaining them, delivered via compact tables and old/new code diffs; a few prose passages (the callout and container-type section) and the repeated visual-check mention could be trimmed slightly.

4 / 5

Actionability

Fully executable, copy-paste-ready examples for each rung with concrete imports ('@sentry/scraps/layout'), specific hooks (useResponsivePropValue, useContainerBreakpoint), and exact token mappings covering the common cases.

5 / 5

Workflow Clarity

A clear rung ladder ('Stop at the first rung that fits') plus a Migration Checklist with a visual-check validation checkpoint; falls just short of a 5 because the error-recovery loop (what to do when the visual check fails) is implied rather than spelled out.

4 / 5

Progressive Disclosure

A self-contained, well-sectioned single file with clear headers and no nested references; the inline codebase path pointers are appropriate, and structure is good, though the file is long enough that some example bulk could in principle split out.

4 / 5

Total

17

/

20

Passed

Description

92%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 highly specific, third-person description that clearly states both capability and concrete use-when triggers tailored to a Sentry container-query migration. Minor room to broaden natural-term synonyms, but otherwise exemplary.

Suggestions

Consider adding a couple of looser synonyms a developer might say (e.g. 'responsive design', 'breakpoint refactor') to push trigger-term coverage from strong to comprehensive.

The 'screen:-prefixed responsive props' phrase is precise but technical; a plainer gloss could help less-familiar users recognize the trigger.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'migrating viewport media queries (@media, useMedia, and screen:-prefixed responsive props) to container queries', 'replacing @media/useMedia/screen: breakpoints', 'refactoring styled responsive components to Container/Flex/Grid primitives' — giving comprehensive, specific coverage rather than vague domain naming.

5 / 5

Completeness

Explicitly answers both what ('Guide for migrating viewport media queries ... to container queries in Sentry's frontend') and when ('Use when migrating responsive layout to container queries, replacing ... breakpoints, refactoring ... or working on the DE container-query migration') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Strong natural keyword coverage ('container queries', 'responsive layout', 'media queries', 'useMedia', 'screen:', 'breakpoints', 'container-query migration') that a Sentry dev would actually say, but leans technical and lacks synonym breadth beyond the core terms, stopping just short of the comprehensive bar.

4 / 5

Distinctiveness Conflict Risk

Carves a clear niche — Sentry-specific container-query migration with distinctive triggers (@media/useMedia/screen:, DE migration) — making overlap with unrelated skills minimal.

5 / 5

Total

19

/

20

Passed

Validation

100%

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

getsentry/sentry

Path

.agents/skills/migrate-container-queries/SKILL.md

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.