svg-animations

SVG animation: SMIL, CSS keyframes, stroke path drawing, shape morphing, motion paths. Use when animating an SVG (spinners, animated logos, draw-in effects, morphing icons). Not for static SVG drawing or icon layout.

Quality

96%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

100%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 an exemplary lean skill: executable code, precise gotchas, an explicit layer-selection rule, and a single clearly-signaled reference file. It respects token budget while remaining fully actionable.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's competence: no padding about what SVG/DOM/CSS is, just one orienting sentence then straight to technique, so every token earns its place per the top anchor.	5 / 5
Actionability	Provides copy-paste-ready SVG/CSS and SMIL code blocks plus exact syntax in gotchas (e.g. from="0 25 25" to="360 25 25", path.getTotalLength(), keySplines cubic-bezier values), covering the common animation cases fully.	5 / 5
Workflow Clarity	A single-purpose, non-destructive craft skill with an unambiguous decision rule (SMIL for self-contained assets, CSS for inlined/page-coordinated animation) and gotchas acting as checkpoints; the simple-skill exception applies and no validation cap is triggered.	5 / 5
Progressive Disclosure	Clear section headers structure a ~60-line overview, with one well-signaled one-level-deep reference to references/recipes.md (a real file) whose contents are enumerated, matching the clear-overview top anchor.	5 / 5
	Total	20 / 20 Passed

Description

92%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 is specific, well-triggered, and clearly bounded with both positive and negative guidance. It is a strong, low-conflict skill description whose only minor gap is a few additional natural synonyms in the trigger terms.

Suggestions

Add a couple of natural synonyms to the trigger clause, e.g. 'animated SVG' or 'animated icons', to widen natural-keyword coverage.

Consider mentioning 'SVG SMIL' or 'CSS animation on SVG' verbatim since some users phrase the need in those terms.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete capabilities ('SMIL, CSS keyframes, stroke path drawing, shape morphing, motion paths'), matching the comprehensive-coverage anchor rather than the 4 anchor which only expects 'several' with minor gaps.	5 / 5
Completeness	Explicit 'what' (the five animation techniques) and an explicit concrete 'when' clause ('Use when animating an SVG (spinners, animated logos, draw-in effects, morphing icons)'), plus negative boundary guidance, matching the top anchor.	5 / 5
Trigger Term Quality	Natural user phrases like 'spinners, animated logos, draw-in effects, morphing icons' are present, but a few natural synonyms (e.g. 'animated SVG', 'animated icons') are missing, fitting the good-but-incomplete coverage anchor below 5.	4 / 5
Distinctiveness Conflict Risk	A clear niche (SVG animation) with an explicit 'Not for static SVG drawing or icon layout' boundary, minimizing overlap with general SVG/drawing skills and matching the minimal-conflict-risk anchor.	5 / 5
	Total	19 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: EpicenterHQ/epicenter
Path: .agents/skills/svg-animations/SKILL.md
Commit: abe10f3

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.