CtrlK
BlogDocsLog inGet started
Tessl Logo

viewport

Use when reviewing templates, rendered HTML, or shared components related to Set the responsive viewport meta tag. Validate the final browser-facing markup, not just the source framework abstraction.

62

Quality

73%

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

Quality

Content

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

The body is a tight, well-structured overview: an exact canonical tag, explicit accessibility anti-patterns, unambiguous check/fix/review sections, and a clean hand-off to references/rule.md for framework details. Only minor tightening is possible in the Check section and the introductory background sentence.

DimensionReasoningScore

Conciseness

The body is lean and sectioned with almost every token earning its place; only minor trimming candidates remain — the background sentence about 980px desktop-width rendering restates knowledge Claude already has, and the bullet 'Essential for mobile-responsive layouts' adds little. Matches anchor 4 ('Efficient; minor instances of over-explanation that could be trimmed') rather than 5.

4 / 5

Actionability

Provides a copy-paste-ready canonical snippet ('<meta name="viewport" content="width=device-width, initial-scale=1.0">'), an explicit anti-pattern rule ('Never use maximum-scale=1 or user-scalable=no'), and a concrete fix location ('in the head section'). Minor gap: the Check step says only 'a proper viewport meta tag' without enumerating the failure conditions inline. Matches anchor 4 ('Mostly executable guidance... with minor gaps') rather than 5.

4 / 5

Workflow Clarity

Clear, logical Check → Fix → Explain → Code Review structure for a simple single-purpose skill well under 50 lines; the single action is unambiguous and no destructive/batch operation exists to require validation checkpoints. Per the rubric's simple-skill scoring note, this matches anchor 5 ('single action is unambiguous').

5 / 5

Progressive Disclosure

A short overview body with a well-signaled, one-level-deep pointer ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md') to a bundle file that exists and appropriately holds the framework examples, property table, and verification tools. Matches anchor 5 ('Clear overview with well-signaled one-level-deep references; content appropriately split').

5 / 5

Total

18

/

20

Passed

Description

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

The description has an explicit 'Use when' trigger clause and a stated action (validate rendered markup), but the embedded title-case phrase 'related to Set the responsive viewport meta tag' reads awkwardly and leaves the actual check implied rather than stated. Missing natural keywords like 'mobile' weaken trigger coverage. Overall a functional but improvable description.

Suggestions

Rewrite to state the concrete check directly, e.g. 'Verify the rendered HTML includes <meta name="viewport" content="width=device-width, initial-scale=1.0"> and flag zoom-disabling attributes like maximum-scale=1 or user-scalable=no', replacing the awkward embedded title phrase 'related to Set the responsive viewport meta tag'.

Add natural trigger terms users would actually say, especially 'mobile' (e.g. 'Use when the page renders wrong on mobile, or when reviewing templates, rendered HTML, or shared components that emit the <head> markup').

Tighten the 'what' so the distinction between source framework abstraction and browser-facing markup is paired with what specifically gets validated (tag presence, content values, accessibility-harming attributes).

DimensionReasoningScore

Specificity

Names the domain (viewport meta tag, rendered HTML markup) and two concrete actions ('reviewing templates, rendered HTML, or shared components', 'Validate the final browser-facing markup'), but coverage is not comprehensive — it never states what specifically is checked (tag presence, values, zoom-disabling attributes). This matches anchor 3 ('Names domain and 1-2 concrete actions, but not comprehensive') rather than 4, which requires several specific listed actions.

3 / 5

Completeness

Both parts are present: an explicit 'Use when reviewing templates, rendered HTML, or shared components...' trigger clause, and a 'what' ('Validate the final browser-facing markup, not just the source framework abstraction'). However, the actual check (viewport tag presence and correct values) is only implied through the awkwardly embedded title phrase 'related to Set the responsive viewport meta tag', so the 'what' could be more explicit — matching anchor 4 rather than 5.

4 / 5

Trigger Term Quality

Includes relevant natural terms — 'templates', 'rendered HTML', 'shared components', 'viewport meta tag', 'responsive', 'markup' — but misses common variations users would naturally say, most notably 'mobile' (the core motivation for this rule), 'responsive design', and 'meta tag' phrasing distinct from the embedded title. Falls between anchors 3 and 4 but sits noticeably below the midpoint because the key 'mobile' keyword is absent.

3 / 5

Distinctiveness Conflict Risk

The opening 'reviewing templates, rendered HTML, or shared components' is broad and overlaps with generic HTML-review skills, but the rule-specific anchor ('related to Set the responsive viewport meta tag') carves a clear niche with minimal conflict risk among closely related skills. This matches anchor 4 ('Mostly distinct; minor overlap risk with closely related skills') rather than 3, since it is anchored to one specific rule.

4 / 5

Total

14

/

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.