svg-animations

Animate SVGs with SMIL, CSS keyframes, stroke drawing, shape morphing, and motion paths. Use when adding motion to SVGs such as spinners, logos, draw-in effects, or morphing icons, not for static drawing or icon layout.

Quality

94%

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

92%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.

An exemplary skill body: runnable code, precise gotchas that go beyond common knowledge, a clear decision rule for choosing the animation layer, and a properly disclosed one-level reference file. The only blemish is a slightly flavored opening sentence that assumes less competence than the rest of the file.

Suggestions

Tighten the opening paragraph to a single functional sentence (e.g. "Pick the right animation layer; the gotchas below bite hardest.") to free tokens for content Claude does not know.

Drop or compress "Every SVG element is a DOM node you can style, animate, and script" — it is background knowledge Claude already has.

Dimension	Reasoning	Score
Conciseness	The body is lean — compact code blocks and one-line gotchas — but the opening paragraph ("Handcrafted SVG animation. Every SVG element is a DOM node you can style, animate, and script; the craft is picking the right animation layer...") re-states basics Claude already knows and adds flavor that could be trimmed.	4 / 5
Actionability	Fully executable guidance: copy-paste-ready SVG/CSS blocks for stroke drawing and SMIL chaining, exact syntax ("begin=\"first.end\"", "calcMode=\"spline\" with 0.42 0 0.58 1"), and concrete commands like "path.getTotalLength()" covering the common cases.	5 / 5
Workflow Clarity	As a simple, non-destructive skill, the single core decision is unambiguous: "Prefer SMIL for self-contained assets (icons, logos); use CSS keyframes when the SVG is inlined and the animation should coordinate with the rest of the page", with explicit criteria for the choice.	5 / 5
Progressive Disclosure	"Read [references/recipes.md](references/recipes.md) when you need a ready-made pattern: loading spinner, animated checkmark, hamburger-to-X morph, motion along a path..." is a well-signaled, one-level-deep reference with enumerated contents; the file exists and its recipes match the listing, while the gotchas and core techniques are appropriately inlined.	5 / 5
	Total	19 / 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.

A strong description: concrete capabilities, an explicit trigger clause with natural example phrases, and a negative boundary that prevents mis-triggering. Only slightly short of perfect trigger-term comprehensiveness (missing a few natural synonyms like "animated icons" or ".svg").

Suggestions

Add one or two common synonyms users would naturally say, e.g. "animated icons or logos" or "loading spinners", to round out trigger coverage.

Mention the ".svg" file extension in the trigger clause to catch requests phrased around the file type.

Dimension	Reasoning	Score
Specificity	"Animate SVGs with SMIL, CSS keyframes, stroke drawing, shape morphing, and motion paths" names five concrete techniques with comprehensive coverage of the domain, matching the top anchor rather than 4, which expects coverage gaps.	5 / 5
Completeness	It explicitly answers both what (the five named animation techniques) and when ("Use when adding motion to SVGs such as spinners, logos, draw-in effects, or morphing icons"), with an added negative boundary ("not for static drawing or icon layout").	5 / 5
Trigger Term Quality	Natural phrases like "adding motion to SVGs", "spinners", "logos", "draw-in effects", and "morphing icons" are present, but common variations such as "animated icons", "loading spinner", or the ".svg" extension are missing, so coverage is good but not comprehensive.	4 / 5
Distinctiveness Conflict Risk	The SVG-animation niche is distinct and the explicit exclusion ("not for static drawing or icon layout") fences off the closest sibling skills, leaving minimal conflict risk.	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: f9441c8

Reviewed: 3 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.