CtrlK
BlogDocsLog inGet started
Tessl Logo

viewport-zoom

Use when applies to any `<meta name='viewport'>` element in HTML documents. Check the `content` attribute for `user-scalable=no`, `user-scalable=0`, `maximum-scale=1`, or `maximum-scale` values less than 2. This is a common mistake in mobile-first templates and CSS frameworks.

66

Quality

80%

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/viewport-zoom/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

85%

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

The body is a clear, actionable overview with excellent progressive disclosure and a simple, well-sequenced workflow; its main weakness is redundancy across the Quick Reference, Check, and Explain sections. Consolidating the repeated WCAG rationale and correct-tag statements would improve token efficiency.

DimensionReasoningScore

Conciseness

The body is mostly efficient but repeats material — the correct viewport tag appears in Quick Reference, Fix, and again, and the WCAG 1.4.4 rationale is restated across Quick Reference, Check, and Explain — so it could be tightened to remove redundant explanation Claude already has.

2 / 3

Actionability

It gives copy-paste-ready guidance: the exact correct tag '<meta name=viewport content=width=device-width, initial-scale=1>', the specific values to flag, and a concrete CSS fix ('set form input font-size: 1rem (16px)') for the iOS input-zoom case.

3 / 3

Workflow Clarity

As a simple single-task skill, the Check → Fix → Explain → Code Review sections form a clear, well-organized sequence with no destructive or batch operation requiring validation feedback loops, meeting the simple-skill bar for a top score.

3 / 3

Progressive Disclosure

The body is a concise overview that offloads full code examples and framework guidance to a single, clearly signaled one-level-deep reference ('see references/rule.md'), which exists as a real file, matching the well-structured overview anchor.

3 / 3

Total

11

/

12

Passed

Description

75%

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 has an explicit 'Use when' trigger and a clearly distinct niche, but it names only one checking action and omits the natural user terms (pinch/zoom) in favor of technical attribute names. Tightening the action list and adding user-facing trigger words would raise specificity and trigger-term quality.

Suggestions

Add a second concrete action verb beyond 'check' (e.g., 'flag and remove user-scalable=no / maximum-scale=1') to reach the 'multiple specific concrete actions' anchor.

Include natural user-facing trigger terms such as 'pinch-to-zoom', 'zoom', or 'disable zoom' alongside the technical attribute names so the description matches what users actually say.

Smooth the awkward 'Use when applies to' phrasing into a clearer trigger clause (e.g., 'Use when reviewing HTML viewport meta tags for pinch-zoom accessibility').

DimensionReasoningScore

Specificity

It names the domain (viewport meta tag) and one concrete action — 'Check the content attribute for user-scalable=no, user-scalable=0, maximum-scale=1...' — but describes a single checking action rather than multiple distinct concrete actions, so it falls short of the 'lists multiple specific concrete actions' anchor.

2 / 3

Completeness

It opens with an explicit 'Use when applies to any <meta name=viewport> element in HTML documents' trigger and states what to do (check the content attribute for the listed values), clearly answering both what and when with explicit triggers.

3 / 3

Trigger Term Quality

Relevant developer keywords appear ('viewport', 'HTML documents', 'mobile-first templates', 'CSS frameworks'), but the natural user-facing terms a person would actually say — 'pinch zoom', 'zoom', 'disable zoom' — are absent, leaving common variations missing.

2 / 3

Distinctiveness Conflict Risk

The viewport-meta accessibility check with specific attribute values is a narrow, well-defined niche with distinct triggers, making conflict with other skills unlikely.

3 / 3

Total

10

/

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.