Agent skill

Waapi

Web Animations API adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

Apache-2.0Auto-check passedFrontend & Design

Install Waapi

skills CLI

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

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

GitHub CLI

$ gh skill install boraoztunc/skills waapi --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/waapi .claude/skills/waapi && 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 "waapi" agent skill from https://github.com/boraoztunc/skills/tree/main/waapi into .claude/skills/waapi/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "waapi", 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/waapi

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 waapi -a codex

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

GitHub CLI

$ gh skill install boraoztunc/skills waapi --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/waapi .agents/skills/waapi && 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 "waapi" agent skill from https://github.com/boraoztunc/skills/tree/main/waapi into .agents/skills/waapi/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "waapi", 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 waapi -a cursor

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

GitHub CLI

$ gh skill install boraoztunc/skills waapi --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/waapi .cursor/skills/waapi && 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 "waapi" agent skill from https://github.com/boraoztunc/skills/tree/main/waapi into .cursor/skills/waapi/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "waapi", 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 waapi

--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 waapi -a gemini-cli

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

GitHub CLI

$ gh skill install boraoztunc/skills waapi --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/waapi .gemini/skills/waapi && 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 "waapi" agent skill from https://github.com/boraoztunc/skills/tree/main/waapi into .gemini/skills/waapi/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "waapi", 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 waapi

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 waapi -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/waapi .github/skills/waapi && 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 "waapi" agent skill from https://github.com/boraoztunc/skills/tree/main/waapi into .github/skills/waapi/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "waapi", 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 waapi -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 waapi --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/waapi .opencode/skills/waapi && 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 "waapi" agent skill from https://github.com/boraoztunc/skills/tree/main/waapi into .opencode/skills/waapi/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "waapi", 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: waapi
GitHub stars: 395
Used in: 2 other repos
Token cost: ~805 tokens
SKILL.md length: 207 words
Files: 1
Skills in repo: 52
Repo updated: Aug 15, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Web Animations API adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

Authoring element.animate() motion
SKILL.md covers Contract, Basic Pattern, Stagger Pattern and Good Uses, plus 3 more sections
Calls npx
Animation currentTime seeking

What it does

Waapi is an agent skill from boraoztunc/skills. Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.

Its SKILL.md is about 810 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 Frontend & Design, covering Web animation and motion and Motion graphics. 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

Authoring element.animate() motion
Animation currentTime seeking
Document.getAnimations()
KeyframeEffect timing

Example prompts

“/waapi”

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
Links to these hosts (documentation or services it may open):
- developer.mozilla.org
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

Waapi loads about 805 tokens when it runs. Until then it costs about 69 tokens; SKILL.md has 207 words of instructions outside code blocks.

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

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). 207 words, ~805 tokens.

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

name: waapi
description: Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.

Web Animations API for HyperFrames

HyperFrames can seek Web Animations API animations through its waapi runtime adapter. WAAPI is useful when you want native browser keyframes with JavaScript-created timing and no GSAP dependency.

Contract

Create animations synchronously during composition initialization.
Use element.animate(...) with finite duration and iterations.
Use fill: "both" so seeked states persist.
Pause animations after creation or let the adapter pause them on first seek.
Avoid callbacks and promises for render-critical state.

The adapter calls document.getAnimations(), sets each animation's currentTime to HyperFrames time in milliseconds, then pauses it.

Basic Pattern

html

<div id="orb" class="clip orb" data-start="2" data-duration="3" data-track-index="2"></div>

<script>
  const orb = document.getElementById("orb");
  const animation = orb.animate(
    [
      { transform: "translate3d(-160px, 0, 0) scale(0.8)", opacity: 0 },
      { transform: "translate3d(0, 0, 0) scale(1)", opacity: 1, offset: 0.35 },
      { transform: "translate3d(120px, 0, 0) scale(1.08)", opacity: 1 },
    ],
    {
      duration: 3000,
      delay: 2000,
      easing: "cubic-bezier(0.2, 0, 0, 1)",
      fill: "both",
      iterations: 1,
    },
  );

  animation.pause();
</script>

Stagger Pattern

document.querySelectorAll(".token").forEach((token, index) => {
  const animation = token.animate(
    [
      { transform: "translateY(24px)", opacity: 0 },
      { transform: "translateY(0)", opacity: 1 },
    ],
    {
      duration: 620,
      delay: index * 80,
      easing: "cubic-bezier(0.2, 0, 0, 1)",
      fill: "both",
      iterations: 1,
    },
  );
  animation.pause();
});

Good Uses

Lightweight DOM motion where CSS keyframes are too rigid and GSAP is unnecessary.
Generated animations from structured data.
Simple timelines that can be represented as keyframes, delays, and offsets.

Avoid

Infinite iterations.
Depending on animation.finished to mutate render-critical DOM.
Running separate clocks with requestAnimationFrame, timers, or performance.now().
Animating layout properties when transforms and opacity can express the motion.
Assuming clip-local start time is automatic. WAAPI adapter seeks document-level animation time; model clip offsets with delay or create the animation on an element whose visibility is controlled by HyperFrames timing.

Validation

After editing a WAAPI composition:

bash

npx hyperframes lint
npx hyperframes validate

Credits And References

HyperFrames adapter source: packages/core/src/runtime/adapters/waapi.ts.
MDN Web Animations API guide: https://developer.mozilla.org/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
MDN Animation.currentTime: https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime

Files

Just SKILL.md in waapi 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

Waapi 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.

Waapi compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Waapi this skillboraoztunc/skills	395	2 repos	~805	Automated safety check: Pass	Apache-2.0	1 mo ago
Gsapalecs5am/ralphy	136	—	~2.4k	Automated safety check: Pass	Apache-2.0	15 days ago
Yuv Pilothoodini/ai-agents-skills	281	—	~4.7k	Automated safety check: Pass	None	2 mo ago
HyperFrames Animationheygen-com/hyperframes	59k	3 repos	~2.1k	Automated safety check: Pass	Apache-2.0	today
Yuv Viral Videohoodini/ai-agents-skills	281	—	~7.5k	Automated safety check: Notes	None	2 mo ago
Hyperframes Animationchmonitor/chmonitor	299	2 repos	~1.8k	Automated safety check: Pass	GPL-3.0	2 days ago

Similar skills

Gsap
alecs5am/ralphy
GSAP animation reference for HyperFrames. An agent skill from alecs5am/ralphy.
136 GitHub stars~2.4k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed
Yuv Pilot
hoodini/ai-agents-skills
Top-of-pyramid orchestrator for Yuval Avidani's YUV.AI brand work.
281 GitHub stars~4.7k tokensUpdated 2 mo ago
Frontend & DesignAuto-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
Yuv Viral Video
hoodini/ai-agents-skills
Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…
281 GitHub stars~7.5k tokensUpdated 2 mo ago
Media & CreativeAuto-check: notes
Hyperframes Animation
chmonitor/chmonitor
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus…
299 GitHub starsUsed in 2 repos~1.8k tokens
Media & CreativeAuto-check passed
Motion Frames
sanqiufong/slides-from-anything
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels.
132 GitHub starsUsed in 1 repo~910 tokens
Media & CreativeAuto-check passed

Questions about Waapi

What does Waapi do?

Web Animations API adapter patterns for HyperFrames. An agent skill from boraoztunc/skills. Waapi is an agent skill from boraoztunc/skills. Web Animations API adapter patterns for HyperFrames.

When should I use Waapi?

Waapi fits situations like: authoring element.animate() motion; animation currentTime seeking; document.getAnimations(); keyframeEffect timing.

How do I install Waapi in Claude Code?

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

How do I install Waapi in Codex?

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

Can I use Waapi 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 waapi -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/waapi, .gemini/skills/waapi, .github/skills/waapi and .opencode/skills/waapi in your project.

What does Waapi need to run?

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

Does Waapi access the network?

SKILL.md names 1 domain. As links in the text: developer.mozilla.org. This is read from the text; nothing was executed.

Is Waapi 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 Waapi use?

Waapi 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 Waapi use?

About 805 tokens (SKILL.md is roughly 3.2k 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 Waapi?

Skills that share tags, products or a category with Waapi: Gsap (alecs5am/ralphy, 136 stars), Yuv Pilot (hoodini/ai-agents-skills, 281 stars), HyperFrames Animation (heygen-com/hyperframes, 59k stars) and Yuv Viral Video (hoodini/ai-agents-skills, 281 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Waapi?

boraoztunc (a GitHub user) maintains it in boraoztunc/skills, which has 395 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 Waapi

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

Web Animations API for HyperFrames

Contract

Basic Pattern

Stagger Pattern

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 Waapi