claude-skill-animejs-plus

Built on freshtechbro/claudedesignskills by @freshtechbro (627 stars, MIT). All credit for the original idea to them. This fork improves and repackages it; upstream license preserved in UPSTREAM_LICENSE.

Give Claude Code practical guidance for building safe, version-aware Anime.js animations across DOM, CSS, SVG, and JavaScript objects.

For developers using Claude Code in frontend projects. It works especially well for SVG-heavy interfaces, coordinated timelines, staggered sequences, motion paths, and framework-independent animation choreography.

🤔 Why

Anime.js v3 and v4 use different APIs, but examples online often mix them.

Animation code can also fail under SSR, target missing elements, leak instances, or introduce unnecessary dependencies.

This single-file skill gives Claude Code clear implementation rules. It plugs into your existing workflow with zero runtime dependencies.

⚡ Install

mkdir -p ~/.claude/skills/animejs-plus && curl -fsSL https://raw.githubusercontent.com/freshtechbro/claude-skill-animejs-plus/main/skill/SKILL.md -o ~/.claude/skills/animejs-plus/SKILL.md

Restart Claude Code or begin a new session after installation.

🎬 Usage

Ask Claude Code for a concrete animation task:

Use the animejs skill to create a staggered card reveal for this page.
Check the installed Anime.js version first, keep it SSR-safe, and clean up
the animation when the component unmounts.

Expected output:

• Inspection of package.json, the lockfile, and existing imports
• Code matching the installed Anime.js major version
• Browser-only execution when the project uses SSR
• Guarded selectors and cached DOM queries
• Cleanup appropriate to the project and Anime.js version
• No Anime.js upgrade or additional animation dependency unless requested

The skill also guides timelines, keyframes, SVG drawing and morphing, JavaScript-object animation, grid staggers, and motion paths. For a simple hover or state transition, it directs Claude toward CSS. For React-coupled layout animation, it considers the animation system already present in the project.

🔧 What we changed vs upstream

• Added explicit Anime.js v3/v4 compatibility guidance, including checking installed versions and translating v3-style examples for v4.
• Introduced implementation safeguards for SSR/browser execution, nullable selectors, units, DOM-query caching, animation cleanup, and avoiding unrequested dependency changes.
• Clarified when Anime.js is appropriate versus simpler CSS transitions or an existing React-focused animation system.
• Reorganized the skill into more action-oriented sections and refined examples for safer, more realistic project usage.
• Added attribution to the original open-source skill and expanded coverage to motion paths.

📄 License

Released under the MIT License.

The upstream MIT license and attribution are preserved in UPSTREAM_LICENSE.