CtrlK
BlogDocsLog inGet started
Tessl Logo

svg-inline

Use when reviewing image assets, markup, and CDN or build transforms related to Manage inline SVG size and complexity. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

56

Quality

64%

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/svg-inline/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.

The content is well-structured with a sensible Check→Fix→Explain→Review flow and good progressive disclosure to a real reference file, but it loses points for an explanatory 'Explain' section, no inline executable code, and implicit validation checkpoints.

Suggestions

Tighten or remove the 'Explain' section: the inline-SVG trade-offs are largely known to Claude and are repeated in references/rule.md's 'Why It Matters'.

Add one or two inline executable snippets (e.g. an `npx svgo` command or an `<img>` vs inline `<svg>` example) so the body is actionable without requiring the reference.

Make verification explicit in the body—pull the DevTools verification checklist up from rule.md, or add an explicit 'Validate' step to the Fix workflow.

DimensionReasoningScore

Conciseness

The body is mostly efficient with a tight Quick Reference, but the 'Explain' section re-explains inline-SVG trade-offs (parser blocking, caching, CSS styling) that Claude largely already knows, and the Check/Fix prose could be tightened into lists.

3 / 5

Actionability

Concrete thresholds and tools are named (1KB/500-byte limits, SVGO, SVGR, sprites), but the body itself contains no executable code or commands—all examples are deferred to references/rule.md—leaving the guidance described rather than copy-paste ready.

3 / 5

Workflow Clarity

Check (1-4) and Fix (1-5) provide a clear sequence, but validation checkpoints are implicit—the body only vaguely says 'describe how to confirm the fix in DevTools' rather than giving explicit verify steps (those live in the reference).

3 / 5

Progressive Disclosure

Clear overview with well-signaled one-level-deep navigation to references/rule.md (which exists and holds the code examples, tables, and verification), but the intro 'why' paragraph is duplicated near-verbatim in rule.md, a minor organization gap.

4 / 5

Total

13

/

20

Passed

Description

75%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 answers both 'what' and 'when' with concrete, natural-sounding review terms, scoring solidly above midpoint. Its main weakness is the awkward embedding of the skill title into the 'when' clause and a slight lack of crisp specificity in the trigger phrasing.

DimensionReasoningScore

Specificity

Lists several concrete review actions—'Check encoded size, rendered size, loading strategy, and above-the-fold impact together'—giving four specific dimensions, though all are check/review verbs and the title is awkwardly embedded in the 'when' clause, leaving minor gaps versus a comprehensive action list.

4 / 5

Completeness

Both 'what' (check encoded/rendered size, loading strategy, above-the-fold impact) and 'when' (explicit 'Use when reviewing image assets, markup, and CDN or build transforms...') are present, but the 'when' clause is slightly awkward and generic rather than crisply specific.

4 / 5

Trigger Term Quality

Good natural keyword coverage—'image assets', 'markup', 'CDN or build transforms', 'inline SVG', 'above-the-fold impact'—but missing common synonyms and the .svg file extension a user might naturally say.

4 / 5

Distinctiveness Conflict Risk

The 'inline SVG' niche is fairly distinct, but the broad mention of 'image assets, markup, and CDN or build transforms' creates minor overlap risk with general image-optimization or CDN skills.

4 / 5

Total

16

/

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.