Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add robcsaszar/frontend-kit --skill with-svg-animationgit clone --depth 1 https://github.com/robcsaszar/frontend-kitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/robcsaszar/frontend-kit/with-svg-animation)<a href="https://agentmods.dev/skills/robcsaszar/frontend-kit/with-svg-animation"><img src="https://agentmods.dev/badge/skills/robcsaszar/frontend-kit/with-svg-animation/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/robcsaszar/frontend-kit/with-svg-animation"><img src="https://agentmods.dev/badge/skills/robcsaszar/frontend-kit/with-svg-animation.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00120 | $0.01409 |
| Opus 5.5 | $0.00048 | $0.00564 |
| Sonnet 5.5 | $0.00024 | $0.00282 |
| Haiku 4.5 | $0.00012 | $0.00141 |
Grade A, and why
with-svg-animation scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 64 lines — stays where its author put it; the contents beside it link to each section on GitHub.
with-svg-animation
You already know how to animate SVG. What you reliably fail to do is raise these conditions when the user hasn't named them — a vague request produces a plausible answer that breaks on the user's actual artwork. This body is a pre-flight, not a tutorial.
Pre-flight — answer before writing any code
Read the actual path data; if you can't see it, ask for it. Never answer from the request alone — every trap below is invisible in the request and obvious in the markup.
- Is the thing being animated the root
<svg>, or an element inside it? Inner elements needtransform-box. - Does the target
dcontain more than oneMcommand? One<path>can hold several disconnected subpaths. - Is the artwork stroked or filled? A draw-on animation only animates a stroke; a filled logo needs stroke-then-crossfade, or a mask wipe instead.
- How many elements animate at once, and is it scroll-linked? Dash and
dare paint-level, not compositable — dozens of them on a mid-range phone is a different problem than one logo, and answering "many" or "scroll-linked" puts you under the paint budget in the last NEVER before you write anything.
Already broken? Match the symptom
| Symptom | Cause |
|---|---|
| Shape swings across the canvas instead of pivoting | transform-box missing on an inner element |
| Strokes start together but finish at different times | One <path>, several subpaths — dash pattern restarts per subpath |
| Morph hard-cuts halfway instead of tweening | Command sequences don't match, so interpolation fell back to discrete |
| Reveal edge drifts or scales with the artwork | clip-path and transform on the same node |
Traps
Dash patterns restart at every subpath. A single <path> whose d has three M commands is not one continuous dash run — each subpath gets its own copy of the pattern, so all three start together and finish at different times. It reads as a glitch. Split the d into one <path> per subpath (a mechanical edit at each M) to get per-stroke control and staggering. pathLength does not rescue the single-path version.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 64 lines · 120 tokens per session scan A 30755ca2030b
with-svg-animation is a skill published in the GitHub repository robcsaszar/frontend-kit (1 stars, last pushed 1mo ago), licensed MIT. It adds 120 tokens to every session and 1,409 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
oat-css
Our preferred CSS framework — ultra-lightweight, semantic HTML UI library (8KB). Style web UIs with semantic HTML and minimal classes. Override with app-level SCSS only when necessary.
shadcn-sveltekit-design
Use when building, redesigning, beautifying, or refactoring SvelteKit pages and reusable components with shadcn-svelte, Bits UI, or the shadcn-svelte MCP. Trigger on landing pages, dashboards, marketing sites, app shells, forms, navbars, tables, dialogs, charts, sidebars, auth screens, blocks, responsive layouts…
svelte-styling
Svelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components.
dryui-build
Experimental DryUI layout-only skill that extracts responsive page structure from design images as abstract colored blocks with strict shell areas, fixed page container queries, and visual self-checks. Use when testing design-image to layout-skeleton extraction.
dryui-build
Experimental DryUI fixture-first page skill for image-to-app layout tests. Use when testing stage 1 page classification, stage 2 constrained DryUI implementation, and stage 3 build repair.
dryui-build
Experimental DryUI page-layout skill that builds colored block page prototypes with mobile-first container queries. Use when testing page layout, responsive regions, dashboards, shells, or full-page structure before detailed UI styling.