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 delexw/claude-code-misc --skill animejsgit clone --depth 1 https://github.com/delexw/claude-code-miscWrote 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/delexw/claude-code-misc/animejs)<a href="https://agentmods.dev/skills/delexw/claude-code-misc/animejs"><img src="https://agentmods.dev/badge/skills/delexw/claude-code-misc/animejs.svg" alt="Measured on agentmods" 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.00143 | $0.03731 |
| Opus 5 | $0.00072 | $0.01865 |
| Sonnet 5 | $0.00029 | $0.00746 |
| Haiku 4.5 | $0.00014 | $0.00373 |
Grade A, and why
animejs 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 6d 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 — 464 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Anime.js v4 Animation Skill
Anime.js v4 is a modular JavaScript animation engine (10KB full / 3KB WAAPI-only). This skill ensures you write correct v4 syntax — the API changed significantly from v3.
Installation
npm install animejs
CDN (ESM):
<script type="module">
import { animate } from 'https://cdn.jsdelivr.net/npm/animejs/+esm';
</script>
Core Concept: Named Imports
v4 uses named exports, not a default anime object. Import only what you need:
import { animate, stagger, createTimeline, utils } from 'animejs';
Subpath imports for smaller bundles:
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createDraggable } from 'animejs/draggable';
import { onScroll } from 'animejs/events';
import { stagger, utils } from 'animejs/utils';
import { waapi } from 'animejs/waapi';
Quick Reference: animate()
animate(targets, parameters);
Targets: CSS selectors, DOM elements, NodeLists, JS objects, or arrays of these.
Parameters combine animatable properties + playback settings + callbacks:
animate('.box', {
translateX: 250, // CSS transform
opacity: [0, 1], // [from, to]
scale: { from: 0.5, to: 1 },
backgroundColor: '#FF0000', // color animation
duration: 800,
delay: stagger(100), // stagger per element
ease: 'outExpo', // easing function
loop: 2, // repeat 2 times (3 total plays)
alternate: true, // ping-pong
onComplete: () => console.log('done'),
});
Animatable Properties
| Category | Examples |
|---|---|
| CSS | opacity, width, height, backgroundColor, borderRadius |
| Transforms | translateX, translateY, rotate, scale, skewX |
| CSS Variables | '--my-var': 100 |
| SVG Attributes | cx, r, points, d (via morphTo) |
| HTML Attributes | value, data-count |
| JS Object Props | Any numeric property on a plain object |
What ships with it
2 files 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.
- 6d ago First seen · 464 lines · 143 tokens per session scan A db2b43fbadda
animejs is a skill published in the GitHub repository delexw/claude-code-misc (1 stars, last pushed 5mo ago), licensed MIT. It adds 143 tokens to every session and 3,731 once invoked, about $0.0007 per session on Opus 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
cf-design
UI design workflow — scan patterns, design new UI, or modify UI consistently. Use to redesign a component/page, change colors/typography/style, or extract the design system. Triggers: "make it look like", "update the styling", "redesign this", "match the existing style", "add a dark mode", "make it more minimal".
web-design-engineer
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact.…
animated-sketch-diagram
A tool for making animated diagrams and flowcharts in a hand-drawn ink style, with paper-like backgrounds, simple icons, and moving dots along connections. It produces a self-contained HTML file and can also create a looping GIF.
webflow-mcp:interactions
Create, update, list, and delete Webflow IX3 interactions (GSAP animations) through Webflow MCP. Use when the user wants click/hover/load/scroll/mouse-move animations, interaction timelines, or datainteractionstool / createinteraction payloads. Requires beta MCP + ff-ix3-interaction-apis during dogfood.
webflow-mcp:flowkit-naming
Apply Flowkit CSS naming system in Webflow. Use when creating classes, auditing existing naming, or building new components following Flowkit conventions. Flowkit is Webflow's official CSS framework with utility-first approach. Runs headlessly against a page ID — no Designer connection required, except for the…
ardot-style-guide
A design-system workflow for choosing and applying colors, fonts, spacing, and page layouts in Ardot projects.