CtrlK
BlogDocsLog inGet started
Tessl Logo

sprite-generation

Use when reviewing image assets, markup, and CDN or build transforms related to Use image sprites where appropriate. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

56

Quality

65%

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

Quality

Content

63%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, short body with excellent progressive disclosure to a real reference file, but it spends its limited tokens restating a fact Claude already knows instead of carrying any of the concrete sprite-building guidance from the reference inline. Merging the redundant Quick Reference/Explain sections and adding one inline CSS sprite snippet would materially improve efficiency and actionability.

Suggestions

Collapse the intro sentence, 'Quick Reference' bullets, and 'Explain' section into one statement — all three repeat the same sprite/HTTP-request fact Claude already knows.

Inline a minimal CSS background-position sprite example (or the sprites-vs-SVG decision table) from references/rule.md so the 'Fix' step is executable without opening the reference.

Add a verification step to 'Fix' or 'Code Review', e.g. confirm the request reduction in the DevTools Network panel, to close the workflow's feedback loop.

DimensionReasoningScore

Conciseness

The body is short but restates the same sprite/HTTP-request fact three times (intro sentence, 'Quick Reference' bullets, and 'Explain'), content Claude already knows. It is not a 2 because there is no library-style padding, and not a 4 because the Quick Reference and Explain sections add little beyond the intro.

3 / 5

Actionability

'Check if small images and icons are combined into sprites' and 'Create CSS sprites for icons and small images, or migrate to SVG icons' state concrete intent, but the body itself contains no executable examples or specific commands — the concrete CSS sprite code lives only in references/rule.md. Guidance is directionally useful yet incomplete as written.

3 / 5

Workflow Clarity

For a simple single-purpose review skill, the Check → Fix → Explain → Code Review sequence is clear and unambiguous, satisfying the simple-skill path. It falls short of 5 because the 'Code Review' section partially re-covers 'Check' and no step verifies findings (e.g., confirming the request count in DevTools as the section itself hints at).

4 / 5

Progressive Disclosure

The body is under 50 lines with well-organized sections and a single clearly signaled, one-level-deep reference ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md') that exists as a real file. This matches the anchor for a clear overview with an appropriately split reference.

5 / 5

Total

15

/

20

Passed

Description

67%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 solid description with explicit 'Use when' guidance and concrete review actions, weakened by the mechanically embedded rule title that obscures natural trigger terms like 'sprite' and 'SVG icons'. Tightening the trigger phrasing to how a user would actually phrase the need would lift completeness and trigger-term quality.

Suggestions

Rewrite the embedded label into natural trigger phrases, e.g. 'Use when the user mentions image sprites, CSS sprites, SVG icons, or combining small images to reduce HTTP requests.'

Move 'sprite', 'sprites', and 'icon' into the action clause so the natural keywords appear more than once and in user-voiced form rather than only inside the pasted rule title.

DimensionReasoningScore

Specificity

The description lists several 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' — with only minor coverage gaps. It falls short of a 5 because the embedded rule title 'related to Use image sprites where appropriate' reads as a pasted label rather than a stated capability.

4 / 5

Completeness

Both parts are present: an explicit trigger ('Use when reviewing image assets, markup, and CDN or build transforms') and a concrete what ('Check encoded size, rendered size, loading strategy, and above-the-fold impact together'). It is not a 5 because the 'when' lacks natural trigger phrases and the what is checklist-style rather than fully explicit.

4 / 5

Trigger Term Quality

Relevant keywords exist ('image assets', 'CDN', 'loading strategy', 'above-the-fold'), but the most natural trigger terms users would say — 'sprite', 'sprites', 'SVG icons', 'icon font' — appear only awkwardly inside the clause 'related to Use image sprites where appropriate'. Common variations and synonyms are largely missing.

3 / 5

Distinctiveness Conflict Risk

The sprite/above-the-fold niche is mostly distinct, but the check dimensions (encoded size, loading strategy, rendered size) overlap with other frontend image rules (lazy loading, responsive images, format choice), creating minor conflict risk with closely related skills.

4 / 5

Total

15

/

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.