Agent skill

Animejs

Anime.js adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

Apache-2.0Auto-check passedMedia & Creative

Install Animejs

skills CLI

$ npx skills add boraoztunc/skills --skill animejs -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills animejs --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/animejs .claude/skills/animejs && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "animejs" agent skill from https://github.com/boraoztunc/skills/tree/main/animejs into .claude/skills/animejs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animejs", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/boraoztunc/skills/tree/main/animejs

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add boraoztunc/skills --skill animejs -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills animejs --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/animejs .agents/skills/animejs && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "animejs" agent skill from https://github.com/boraoztunc/skills/tree/main/animejs into .agents/skills/animejs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animejs", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add boraoztunc/skills --skill animejs -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills animejs --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/animejs .cursor/skills/animejs && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "animejs" agent skill from https://github.com/boraoztunc/skills/tree/main/animejs into .cursor/skills/animejs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animejs", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/boraoztunc/skills.git --path animejs

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add boraoztunc/skills --skill animejs -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills animejs --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/animejs .gemini/skills/animejs && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "animejs" agent skill from https://github.com/boraoztunc/skills/tree/main/animejs into .gemini/skills/animejs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animejs", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install boraoztunc/skills animejs

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add boraoztunc/skills --skill animejs -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/animejs .github/skills/animejs && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "animejs" agent skill from https://github.com/boraoztunc/skills/tree/main/animejs into .github/skills/animejs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animejs", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add boraoztunc/skills --skill animejs -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills animejs --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/animejs .opencode/skills/animejs && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "animejs" agent skill from https://github.com/boraoztunc/skills/tree/main/animejs into .opencode/skills/animejs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animejs", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: animejs
GitHub stars: 397
Used in: 2 other repos
Token cost: ~828 tokens
SKILL.md length: 233 words
Files: 1
Skills in repo: 52
Repo updated: Aug 15, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Anime.js adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

Writing Anime.js animations
SKILL.md covers Contract, Basic Pattern, Timeline Pattern and Module Builds, plus 4 more sections
Calls npx; reaches cdn.jsdelivr.net
Timelines inside HyperFrames compositions

What it does

Animejs is an agent skill from boraoztunc/skills. Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Media & Creative, covering Motion graphics and Translation. It works with HeyGen. The repository describes itself as: Claude Code skills for copywriting, SEO, design, and more. The licence is Apache-2.0.

When your agent uses it

Writing Anime.js animations
Timelines inside HyperFrames compositions
Registering animations on window.hfAnime
Making Anime.js seek-driven and deterministic

Example prompts

“/animejs”

Requirements

Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 645553c. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- cdn.jsdelivr.net
Also links to:
- animejs.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Animejs loads about 828 tokens when it runs. Until then it costs about 73 tokens; SKILL.md has 233 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~73
When it runs · the whole SKILL.md, loaded when a task matches: ~828

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from boraoztunc/skills at commit 645553c, republished under its Apache-2.0 licence (© boraoztunc). 233 words, ~828 tokens.

Download SKILL.mdSave it as .claude/skills/animejs/SKILL.md (or your agent's skills folder).

name: animejs
description: Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

Anime.js for HyperFrames

HyperFrames can seek Anime.js instances through its animejs runtime adapter. The composition owns the animation objects; HyperFrames owns the clock.

Contract

Create animations or timelines synchronously during composition initialization.
Set autoplay: false so Anime.js does not advance on its own clock.
Register every returned animation or timeline on window.__hfAnime.
Use finite durations and loop counts.
Avoid callbacks that mutate DOM based on wall-clock time, network state, or unseeded randomness.

The adapter seeks every registered instance with instance.seek(timeMs), where timeMs is HyperFrames time in milliseconds.

Basic Pattern

html

<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
<script>
  const anim = anime({
    targets: ".mark",
    translateX: 280,
    rotate: "1turn",
    opacity: [0, 1],
    duration: 1200,
    easing: "easeOutExpo",
    autoplay: false,
  });

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>

Timeline Pattern

html

<script>
  const tl = anime.timeline({
    autoplay: false,
    easing: "easeOutCubic",
  });

  tl.add({
    targets: ".title",
    translateY: [40, 0],
    opacity: [0, 1],
    duration: 650,
  }).add(
    {
      targets: ".accent",
      scaleX: [0, 1],
      duration: 450,
    },
    250,
  );

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(tl);
</script>

Module Builds

If you use an ES module build, the adapter does not care how the instance was created. It only needs the returned object to expose seek(), pause(), and preferably play():

html

<script type="module">
  import { animate } from "https://cdn.jsdelivr.net/npm/animejs/+esm";

  const anim = animate(".chip", {
    x: "18rem",
    duration: 900,
    autoplay: false,
  });

  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>

Good Uses

Small SVG and DOM flourishes where Anime.js syntax is compact.
Imported Anime.js examples that can be made seek-driven.
Multiple independent micro-animations pushed into the same registry.

Use GSAP for complex scene sequencing unless the user specifically asks for Anime.js. GSAP is still the primary HyperFrames authoring path.

Avoid

Leaving autoplay at the Anime.js default.
Depending on anime.running auto-discovery instead of explicit window.__hfAnime.push(...).
Infinite loops. Compute a finite repeat count from the composition duration.
Building animations in timers, promises, event handlers, or after async asset loads.

Validation

After editing a composition that uses Anime.js:

bash

npx hyperframes lint
npx hyperframes validate

Credits And References

HyperFrames adapter source: packages/core/src/runtime/adapters/animejs.ts.
Anime.js documentation for autoplay, pause(), and seek(): https://animejs.com/documentation/

Files

Just SKILL.md in animejs of boraoztunc/skills.

Open the folder on GitHubat commit 645553c

Used in 2 other repositories

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in boraoztunc/skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Animejs next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Animejs compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Animejs this skillboraoztunc/skills	397	2 repos	~828	Automated safety check: Pass	Apache-2.0	1 mo ago
Video Storytellingnateherkai/hyperframes-student-kit	1.2k	—	~4.9k	Automated safety check: Pass	Custom licence	11 days ago
HeygenHybridAIOne/hybridclaw	158	—	~2.4k	Automated safety check: Pass	MIT	today
Remotion To Hyperframeschmonitor/chmonitor	299	1 repos	~2.5k	Automated safety check: Pass	GPL-3.0	3 days ago
Video Translatecalesthio/OpenMontage	66k	—	~2.7k	Automated safety check: Pass	AGPL-3.0	5 days ago
Video Template Frame Pentagram Statnexu-io/open-design	100k	—	~381	Automated safety check: Pass	Apache-2.0	today

Similar skills

Video Storytelling
nateherkai/hyperframes-student-kit
Design and build the visual layer of a long-form talking-head video as one persistent world the camera moves through, instead of a sequence of separate graphics.
1.2k GitHub stars~4.9k tokensUpdated 11 days ago
Media & CreativeAuto-check passed
Heygen
HybridAIOne/hybridclaw
Prepare guarded HeyGen Direct API requests for avatar video generation, video translation, asset discovery, and status polling.
158 GitHub stars~2.4k tokensUpdated today
Media & CreativeAuto-check passed
Remotion To Hyperframes
chmonitor/chmonitor
Port an existing Remotion (React) composition to HyperFrames HTML.
299 GitHub starsUsed in 1 repo~2.5k tokens
Media & CreativeAuto-check passed
Video Translate
calesthio/OpenMontage
Translate and dub existing videos into multiple languages using HeyGen.
66k GitHub stars~2.7k tokensUpdated 5 days ago
Media & CreativeAuto-check passed
Video Template Frame Pentagram Stat
nexu-io/open-design
Use this plugin when the user wants a "Pentagram Stat Frame" HyperFrames motion video — Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar.
100k GitHub stars~381 tokensUpdated today
Media & CreativeAuto-check passed
HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
59k GitHub starsUsed in 3 repos~2.1k tokens
Media & CreativeAuto-check passed

Questions about Animejs

What does Animejs do?

Anime.js adapter patterns for HyperFrames. An agent skill from boraoztunc/skills. Animejs is an agent skill from boraoztunc/skills.js adapter patterns for HyperFrames.

When should I use Animejs?

Animejs fits situations like: writing Anime.js animations; timelines inside HyperFrames compositions; registering animations on window.hfAnime; making Anime.js seek-driven and deterministic.

How do I install Animejs in Claude Code?

Run `npx skills add boraoztunc/skills --skill animejs -a claude-code`. Or copy the skill folder (animejs in boraoztunc/skills) into .claude/skills/animejs in your project. Claude Code loads it when a task matches its description.

How do I install Animejs in Codex?

Run `npx skills add boraoztunc/skills --skill animejs -a codex`. Or copy the skill folder (animejs in boraoztunc/skills) into .agents/skills/animejs in your project. Codex loads it when a task matches its description.

Can I use Animejs in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add boraoztunc/skills --skill animejs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/animejs, .gemini/skills/animejs, .github/skills/animejs and .opencode/skills/animejs in your project.

What does Animejs need to run?

Going by SKILL.md and its folder, Animejs needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Animejs access the network?

SKILL.md names 2 domains. In commands or code: cdn.jsdelivr.net; the agent is likely to contact it when it follows the instructions. As links in the text: animejs.com. This is read from the text; nothing was executed.

Is Animejs safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Animejs use?

Animejs is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Animejs use?

About 828 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Animejs?

Skills that share tags, products or a category with Animejs: Video Storytelling (nateherkai/hyperframes-student-kit, 1.2k stars), Heygen (HybridAIOne/hybridclaw, 158 stars), Remotion To Hyperframes (chmonitor/chmonitor, 299 stars) and Video Translate (calesthio/OpenMontage, 66k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Animejs?

boraoztunc (a GitHub user) maintains it in boraoztunc/skills, which has 397 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on August 15, 2026.

Source: boraoztunc/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Animejs

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Anime.js for HyperFrames

Contract

Basic Pattern

Timeline Pattern

Module Builds

Good Uses

Avoid

Validation

Credits And References

Files

Used in 2 other repositories

Compare with similar skills

Similar skills

More from boraoztunc/skills

Related

Questions about Animejs