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.

63

Quality

75%

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

67%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 well-structured review skill: a quick-reference of thresholds, a concrete Check procedure with specific size limits, a prescriptive Fix playbook, and a single clean pointer to references/rule.md. Its main cost is redundancy — the intro and Explain sections restate trade-offs already covered by rule.md — and it lacks runnable commands or before/after code in the overview itself.

Suggestions

Trim the intro paragraph and the 'Explain' section to one or two lines each and defer the full trade-off discussion to references/rule.md, since both currently duplicate that file's content and explain concepts Claude already knows.

Add one runnable anchor to the body, e.g., the SVGO CLI command (`npx svgo icon.svg`) or a minimal bad/good inline-SVG snippet, so the Fix steps are copy-paste executable rather than descriptive.

Close the workflow loop by making the existing 'Show before/after size comparison' an explicit verification step: re-measure the character count after extracting or sprite-ing and confirm the HTML payload actually shrank.

DimensionReasoningScore

Conciseness

The opening paragraph ("A complex illustration exported from Figma can easily be 50-200KB... balloons every page response") and the "Explain" section both restate the same trade-offs Claude already knows and that also appear in references/rule.md — noticeable duplication that could be trimmed to a pointer. Not a 2 because the Quick Reference, Check, and Fix sections are tight and actionable with no filler.

3 / 5

Actionability

Concrete, specific guidance throughout: "flag any over 1KB (approximately 1000 characters)", "Keep inline SVGs under 1KB (ideally under 500 bytes) after SVGO optimisation", and named tools (SVGO, SVGR, SVG sprites). Not a 5 because there are no runnable commands or code examples in the body (e.g., an actual SVGO CLI invocation or before/after markup), so the guidance is executable in intent but not copy-paste ready.

4 / 5

Workflow Clarity

The Check → Fix → Explain sequence is clearly laid out with numbered sub-steps for scanning, measuring, checking reuse, and reporting, and "Show before/after size comparison" acts as a verification checkpoint. Not a 5 because there is no explicit validation/feedback loop (e.g., re-measure after extraction to confirm the size reduction) and the steps are compact prose rather than a checklist.

4 / 5

Progressive Disclosure

The body is a concise overview 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`" — verified to exist, 171 lines). Not a 5 because the intro paragraph duplicates rule.md's "Why It Matters" text inline, so the split between overview and reference isn't perfectly clean.

4 / 5

Total

15

/

20

Passed

Description

83%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 follows a solid template: an explicit 'Use when...' trigger clause plus a concrete list of checks (encoded size, rendered size, loading strategy, above-the-fold impact). Its main weaknesses are the awkward embedded rule title and slightly broad scoping that risks overlap with neighboring image-related skills.

DimensionReasoningScore

Specificity

"Check encoded size, rendered size, loading strategy, and above-the-fold impact together" lists several specific concrete actions tied to the inline-SVG rule domain. Not a 5 because the core capability is expressed only through the awkward embedded rule title "related to Manage inline SVG size and complexity" rather than fully unpacked verb phrases, leaving minor coverage gaps.

4 / 5

Completeness

Both halves are explicit: the when is "Use when reviewing image assets, markup, and CDN or build transforms related to..." and the what is "Check encoded size, rendered size, loading strategy, and above-the-fold impact together" plus the named rule. It clearly matches the anchor-5 example pattern (concrete what + explicit 'Use when' with concrete trigger phrases), and is above anchor 4 where 'when' would be only implicit or weaker.

5 / 5

Trigger Term Quality

Natural terms users would say are present: "inline SVG", "image assets", "markup", "CDN or build transforms", "encoded size". Not a 5 because common variations like "SVG sprite", "optimize SVG", "SVGO", or "icons" are missing, so coverage is good but not comprehensive.

4 / 5

Distinctiveness Conflict Risk

The inline-SVG size/complexity niche has distinct triggers and would rarely fire for unrelated skills. Not a 5 because the broad framing "reviewing image assets, markup, and CDN or build transforms" overlaps with sibling image-optimization rules (e.g., image formats, lazy loading) in the same checklist family.

4 / 5

Total

17

/

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.