CtrlK
BlogDocsLog inGet started
Tessl Logo

zoom-reflow

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Support content reflow at 400% zoom. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

67

Quality

81%

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

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-organized, compact body with a clear review workflow and exemplary progressive disclosure — quick-reference content inline, executable CSS examples correctly split into a real, one-level-deep reference file. The main improvement areas are trimming the redundant accessibility rationale and tightening the feedback loop between Fix and Check.

Suggestions

Trim the opening low-vision rationale sentence and the 'Explain' section to one line each — this is accessibility knowledge Claude already has (conciseness).

Add an explicit re-verification step after 'Fix' (e.g., 'Re-zoom to 400% and confirm no horizontal scrolling remains') to close the feedback loop (workflow_clarity).

Name one concrete way to perform the zoom check, such as browser zoom keyboard shortcuts or devtools viewport presets, instead of only 'Zoom the browser to 400%' (actionability).

DimensionReasoningScore

Conciseness

The body is lean and directive with clear sections, but the opening rationale ('Users with low vision zoom to 400%... makes it impossible to track lines of text') and the 'Explain' section restate accessibility knowledge Claude already has — minor over-explanation that could be trimmed.

4 / 5

Actionability

Concrete, specific guidance throughout: 'Zoom the browser to 400% and verify content reflows to a single column without horizontal scrolling, truncation, or overlapping elements' and 'Use responsive CSS with relative units (rem, em, %) instead of fixed pixels', with executable CSS examples correctly deferred to references/rule.md. Falls short of 5 because no specific command or tooling for performing the 400% zoom check is given in the body itself.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sequence is clear and the Check step acts as an explicit verification checkpoint with concrete failure modes (horizontal scrolling, truncation, overlapping elements). Below 5 because there is no explicit re-verify step after applying fixes — 'Test with CSS media queries' only partially closes the loop.

4 / 5

Progressive Disclosure

A concise, well-sectioned overview that keeps the quick reference inline and clearly signals a one-level-deep pointer: 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md'. The referenced file exists and itself contains no nested .md references, so navigation is clean.

5 / 5

Total

17

/

20

Passed

Description

83%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 with an explicit 'Use when...' trigger clause, concrete natural-language keywords, and a clear statement of what the skill does. Its main weakness is that the 'what' leans on generic accessibility-review phrasing rather than naming the reflow-specific verification itself, which slightly dilutes specificity and distinctiveness.

DimensionReasoningScore

Specificity

Lists several concrete actions ('Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output'), but the core reflow-verification action (single-column reflow, no horizontal scrolling) is only implied via the trigger clause rather than stated as an action, leaving minor gaps in coverage.

4 / 5

Completeness

Explicitly answers both parts: the 'what' ('Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output') and the 'when' ('Use when reviewing rendered HTML, interactive components, or design-system patterns related to Support content reflow at 400% zoom') with concrete trigger phrases. The 'when' is explicit and specific, so the anchor-4 weakness ('when could be more explicit') does not apply.

5 / 5

Trigger Term Quality

Includes natural terms a user would say: 'rendered HTML', 'interactive components', 'design-system patterns', '400% zoom', 'content reflow', 'screen-reader output'. Common synonyms such as 'magnification', 'low vision', and 'horizontal scrolling' are missing, so coverage is good but not comprehensive.

4 / 5

Distinctiveness Conflict Risk

'content reflow at 400% zoom' carves out a clear niche with minimal conflict risk, but the generic accessibility-review phrasing ('keyboard behavior, focus flow, accessible names, and screen-reader output') could overlap with sibling accessibility skills covering keyboard or focus rules, keeping it below a 5.

4 / 5

Total

17

/

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.