CtrlK
BlogDocsLog inGet started
Tessl Logo

srcset

Use when reviewing image assets, markup, and CDN or build transforms related to Use srcset for responsive images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

65

Quality

78%

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

Quality

Content

72%

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

The body is well-structured, actionable, and uses progressive disclosure effectively with a real one-level reference. It loses points mainly on conciseness (some concept re-teaching) and workflow clarity (no explicit verification checkpoint for the batch review).

Suggestions

Trim the opening motivational paragraph and the 'Explain' section to drop srcset/descriptor concepts Claude already knows, keeping only rule-specific guidance.

Add an explicit verification checkpoint to the Check/Code Review flow — e.g., a DevTools confirm step that lists what to verify (correct candidate loaded, no largest-only on mobile) before reporting findings as resolved.

Consider expanding the description's trigger terms to include natural user phrasings like 'mobile images', 'retina/2x', or 'image too big' to broaden discovery.

DimensionReasoningScore

Conciseness

The body is mostly lean with tight bullet points and dense action sections, but the opening motivational paragraph and the 'Explain' section re-teach srcset/descriptor concepts Claude already knows, so it does not reach the every-token-earns-its-place anchor 3.

2 / 3

Actionability

Despite being an instruction-only review skill with no inline code, the Check and Fix sections give concrete thresholds (>100px, width vs density descriptors, single-size srcset) and specific width values (400w/800w/1200w/1600w) with a clear deliverable, satisfying the actionable-guidance note for code-free skills.

3 / 3

Workflow Clarity

Check → Fix → Explain → Code Review are clearly sequenced with numbered sub-steps, but for a batch scan of all <img> elements the only verification is a loose 'describe how to confirm the fix in DevTools' rather than an explicit validate-and-confirm checkpoint, capping it at 2.

2 / 3

Progressive Disclosure

The body is a concise overview with a single clearly signaled one-level-deep pointer ('see references/rule.md'), and that reference file is confirmed to exist, matching the well-organized overview-plus-reference anchor.

3 / 3

Total

10

/

12

Passed

Description

85%

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 is specific, explicitly triggered, and clearly niched to srcset/responsive-image review, scoring well across most dimensions. Its only real weakness is trigger-term breadth, which leans on the rule title rather than the full spread of phrasings a user would naturally say.

DimensionReasoningScore

Specificity

Names multiple concrete actions — 'reviewing image assets, markup, and CDN or build transforms' and 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together' — matching the multiple-specific-actions anchor rather than the partial anchor 2.

3 / 3

Completeness

Opens with an explicit 'Use when reviewing...' trigger and covers the 'what' via the check actions, clearly answering both what and when rather than leaving 'when' implied.

3 / 3

Trigger Term Quality

Includes relevant natural terms ('responsive images', 'srcset', 'CDN', 'image assets') but is framed around the internal rule title and misses common user phrasings like 'mobile images', 'retina', or 'image too big on mobile', so it does not reach full coverage.

2 / 3

Distinctiveness Conflict Risk

Scoped narrowly to srcset/responsive images plus CDN and build transforms, giving it a clear niche with distinct triggers unlikely to fire for unrelated skills.

3 / 3

Total

11

/

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.