CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

responsiveness-check

Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow). Produces comparison reports showing exactly where layouts break. Trigger with 'responsiveness check', 'check responsive', 'breakpoint test', 'viewport test', 'responsive sweep', 'check breakpoints', or 'test at mobile'.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

78%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, largely executable skill body: exact widths, concrete thresholds, a real sub-agent command pattern, and clean one-level-deep references. The main gaps are unspecified tool-level commands (resize/screenshot syntax left to external tool references), a vague reflow wait, and minor trimmable illustrative content.

Suggestions

Add a short concrete example of the resize-and-screenshot command for at least the preferred tool (playwright-cli), so the per-width loop is executable without loading another reference.

Replace 'Wait briefly for CSS reflow' with a specific heuristic (e.g., wait 500ms or until network idle) so behavior is deterministic.

Add an explicit verification checkpoint after each resize/screenshot (confirm the capture succeeded before running the 8 checks) to strengthen the workflow's feedback loop.

Trim the illustrative sample rows in the Transition Detection table or explicitly label them as example output to save tokens.

DimensionReasoningScore

Conciseness

The body is dense and information-bearing — tables of exact widths, an 8-check matrix, severity levels, and autonomy rules — with no explanations of concepts Claude already knows. It sits at the 4 anchor (efficient with minor over-explanation) because small portions could be trimmed, e.g., the 'Device Context' column in the breakpoint table and the illustrative sample rows in the Transition Detection table. Not the 5 anchor, since a few tokens don't strictly earn their place; well above 3, which expects unnecessary explanation.

4 / 5

Actionability

Mostly executable guidance: exact breakpoint widths per mode, a numbered per-width process, concrete thresholds (44px touch targets, <12px font, height 900px), and a real sub-agent command pattern ('playwright-cli -s=page1 open https://example.com/ &'). It falls short of the 5 anchor (fully copy-paste ready covering common cases) because tool-specific resize/screenshot commands are delegated to '/playwright-cli' and other tool references, and 'Wait briefly for CSS reflow' gives no duration heuristic; it is clearly above the 3 anchor's pseudocode/incomplete level.

4 / 5

Workflow Clarity

A clear sequence is present — detect browser tools, select a mode, per-width loop (resize → wait → screenshot → 8 checks → severity), compare adjacent widths, write report — with confirmation checkpoints before sweep mode and multi-URL parallelism. It matches the 4 anchor (clear sequence, most checkpoints present, minor validation gaps) rather than 5 because there is no explicit verification step (e.g., confirming a screenshot captured correctly before running checks); the destructive/batch cap does not apply since this is a read-only testing workflow.

4 / 5

Progressive Disclosure

The SKILL.md is a clear overview with details split one level deep into two real, verified bundle files (references/breakpoints.md and references/report-template.md), each clearly signaled in a 'Reference Files' table with when-to-read conditions plus a pointer from the report output section. This matches the 5 anchor: well-signaled one-level-deep references, content appropriately split, easy navigation.

5 / 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 strong description: concrete, third-person capability statements paired with an explicit trigger clause covering several natural phrasings. Its only weakness is that a few commonly used synonyms (e.g., 'mobile friendly', 'responsive design') are absent from the trigger list.

Suggestions

Add one or two more natural trigger synonyms such as 'mobile friendly', 'responsive design', or 'does it work on mobile' to the trigger list.

Optionally name the report artifact ('comparison report') alongside the trigger phrases so the deliverable is unambiguous at a glance.

DimensionReasoningScore

Specificity

The description lists multiple specific concrete actions — 'Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column changes, nav switches, overflow)' — with comprehensive coverage of the skill's capabilities including 'Produces comparison reports showing exactly where layouts break'. It matches the 5 anchor (multiple specific concrete actions, comprehensive coverage) and is a clear fit above the 4 anchor, which requires minor gaps in coverage; none are evident. Third-person voice is used throughout ('Test', 'Resizes', 'Produces').

5 / 5

Completeness

It explicitly answers both 'what' (test responsiveness, resize through breakpoints, screenshot each width, detect layout transitions, produce comparison reports) and 'when' ("Trigger with 'responsiveness check', 'check responsive'...") with concrete trigger phrases — a direct match to the 5 anchor. Not the 4 anchor, since the 'when' clause is fully explicit rather than improvable.

5 / 5

Trigger Term Quality

Trigger phrases are natural and varied: "'responsiveness check', 'check responsive', 'breakpoint test', 'viewport test', 'responsive sweep', 'check breakpoints', or 'test at mobile'" — phrasings a user would plausibly say. It falls short of the 5 anchor (comprehensive coverage including synonyms) because common variations like 'mobile friendly', 'responsive design', or 'media queries' are missing; it is clearly above the 3 anchor, which expects missing common variations.

4 / 5

Distinctiveness Conflict Risk

The skill occupies a clear niche — viewport-width layout testing via browser automation — with distinct trigger phrases unlikely to fire for unrelated skills. Minor potential overlap with a general UX-audit skill exists, but the description itself scopes to width-varying layout behavior, matching the 5 anchor (clear niche with distinct triggers, minimal conflict risk).

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

jezweb/claude-skills

Path

plugins/dev-tools/skills/responsiveness-check/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.