animejs · bowtiedswan — Claude Code skill: what it does, how to install
Provides Claude Code with an API reference for Anime.js v4. Useful when creating web animations, SVG morphing, and staggered timelines.
npx skills add BowTiedSwan/animejs-skills --skill animejs -a claude-code
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a claude-codeWhat animejs does
This skill supplies your coding assistant with the Anime.js v4 documentation outline. It covers core functions such as animate, createTimeline, and createTimer, alongside playback controls and easing definitions. Assistants can reference options for onScroll, text splitting, and spring configurations without guessing argument names.
Keep in mind that the reference targets Anime.js v4 modular imports like animejs/timeline and animejs/animation. If your codebase still relies on Anime.js v3 syntax, the suggested code will break your imports. The skill also documents newer v4 features, including createLayout for DOM transitions and createDraggable for drag physics.
Using the resulting scripts requires installing the animejs package from npm or importing it from a CDN bundle. The skill acts purely as agent context, keeping function signatures and callback hooks close at hand.
What it helps with
- build multi-step web animations using
createTimeline - implement SVG shape morphing with
morphTo - link element transforms to page scroll via
onScroll - configure drag physics and snapping with
createDraggable
Example prompts for the agent
- Create an Anime.js v4 timeline to animate cards with staggered delays
- Show an example of morphing two SVG paths using morphTo in Anime.js
- Set up a scroll-linked progress bar animation with onScroll
How to install animejs
1Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill animejs -a claude-codenpx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a claude-code2Manually: put the files in place
~/.claude/skills/bowtiedswan-animejs/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/bowtiedswan-animejs/
1Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a codex2Manually: put the files in place
.agents/skills/bowtiedswan-animejs/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a cursor2Manually: put the files in place
.cursor/skills/bowtiedswan-animejs/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install BowTiedSwan/animejs-skills bowtiedswan-animejs2Manually: put the files in place
.github/skills/bowtiedswan-animejs/SKILL.md1Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a gemini-cli2Platform CLI
gemini skills install https://github.com/BowTiedSwan/animejs-skillsManually: put the files in place
.devin/skills/bowtiedswan-animejs/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add BowTiedSwan/animejs-skills --skill bowtiedswan-animejs -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about animejs
How do I install animejs in Claude Code?
Run npx skills add BowTiedSwan/animejs-skills --skill animejs -a claude-code in your terminal.
What does the animejs skill do?
It equips your agent with structured reference material for Anime.js v4. The model can quickly look up methods, easings, and callback names for browser animations.
Is this skill compatible with older Anime.js releases?
The skill focuses strictly on Anime.js v4 and its tree-shakeable submodule exports. It will not provide accurate signatures for older v3 syntax.
Similar skills
Everything for Frontend and UI →animejs by other authors comes first.
