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.

52

Quality

58%

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

53%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 lean, well-structured overview that appropriately offloads detail to a single reference file, but the body itself lacks executable guidance and explicit verification steps for the review workflow.

Suggestions

Add at least one concrete, copy-paste-ready example in the body (e.g. a CSS background-position sprite snippet or a DevTools check command) instead of deferring all detail to the reference.

Include an explicit verification step in the Code Review section, such as 'Confirm in DevTools Network panel that request count dropped and the sprite loads once'.

Turn the prose 'see references/rule.md' into a proper markdown link for clearer navigation.

DimensionReasoningScore

Conciseness

The body is short and largely avoids over-explaining concepts Claude already knows, though the lead sentence and Quick Reference bullets restate basic sprite/HTTP facts that could be trimmed.

4 / 5

Actionability

Guidance stays high-level ('Create CSS sprites for icons and small images, or migrate to SVG icons') with no executable code, commands, or concrete steps in the body itself; actionable detail is deferred entirely to the reference file.

2 / 5

Workflow Clarity

The Check/Fix/Explain/Code Review sections give a rough sequence for a review task, but there are no validation checkpoints or verification steps for confirming the fix in DevTools beyond a passing mention.

3 / 5

Progressive Disclosure

The body is a concise overview with a clearly signaled one-level-deep pointer to references/rule.md (a real file), and the section structure aids navigation; minor gap is that the reference is named in prose rather than as a linked path.

4 / 5

Total

13

/

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 clearly answers both what and when with a sprite-specific trigger and a thoughtful multi-factor check list. It would benefit from more natural trigger synonyms and sharper action verbs beyond the review framing.

Suggestions

Add natural trigger synonyms a user would say, e.g. 'CSS sprites', 'combine small images', or 'icon sprites'.

Replace generic 'reviewing' with concrete actions like 'audit sprite usage, create CSS sprites, or recommend SVG icon alternatives'.

Tighten the 'when' clause to specific situations (e.g. 'Use when auditing frontend image delivery or when many small icons cause excessive requests').

DimensionReasoningScore

Specificity

It names the domain (image sprites) and a few concrete actions ('reviewing image assets, markup, and CDN or build transforms'), but the actions are framed around reviewing/checking rather than producing or fixing, so coverage is moderate rather than comprehensive.

3 / 5

Completeness

It has both a clear 'what' (review assets/markup/transforms and check encoded size, rendered size, loading strategy, above-the-fold impact together) and an explicit 'Use when...' trigger clause, though the 'when' is somewhat broadly scoped.

4 / 5

Trigger Term Quality

It includes relevant terms like 'image sprites', 'image assets', 'markup', 'CDN', and 'build transforms', but omits common natural variations a user might say ('CSS sprites', 'icon sprites', 'combine images') and any file extensions, leaving keyword coverage partial.

3 / 5

Distinctiveness Conflict Risk

The sprite-specific framing plus the bundled check dimensions make it reasonably distinct from sibling image skills, with only minor overlap risk against general image-optimization or lazy-loading skills.

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.

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.