Agent skill

Lottie

Lottie and dotLottie adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

Apache-2.0Auto-check passedMedia & Creative

Install Lottie

skills CLI

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

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

GitHub CLI

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

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

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

GitHub CLI

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

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

GitHub CLI

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

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

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

GitHub CLI

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

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

At a glance

Lottie and dotLottie adapter patterns for HyperFrames. An agent skill from boraoztunc/skills.

Embedding lottie-web JSON animations
SKILL.md covers Contract, lottie-web Pattern, dotLottie Pattern and Multiple Animations, plus 4 more sections
Calls npx; reaches cdnjs.cloudflare.com and unpkg.com
@lottiefiles/dotlottie-web players

What it does

Lottie is an agent skill from boraoztunc/skills. Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.hfLottie, or making After Effects exports deterministic in HyperFrames.

Its SKILL.md is about 850 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. It works with Lottie and 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

Embedding lottie-web JSON animations
@lottiefiles/dotlottie-web players
Registering instances on window.hfLottie
Making After Effects exports deterministic in HyperFrames

Example prompts

“/lottie”

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:
- cdnjs.cloudflare.com
- unpkg.com
Also links to:
- github.com
- developers.lottiefiles.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

Lottie loads about 850 tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 225 words of instructions outside code blocks.

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

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). 225 words, ~850 tokens.

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

name: lottie
description: Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.

Lottie for HyperFrames

HyperFrames can seek both lottie-web and dotLottie players through its lottie runtime adapter. Lottie is a strong fit because the animation timeline is already encoded in the asset; HyperFrames only needs a player object it can seek.

Contract

Load assets from local project files, usually under assets/.
Set autoplay: false.
Prefer loop: false unless the user explicitly wants a loop.
Register every returned animation or player on window.__hfLottie.
Keep the Lottie container dimensions stable with CSS.

The adapter seeks lottie-web with goToAndStop(timeMs, false) and dotLottie with frame or percentage APIs depending on player shape.

lottie-web Pattern

html

<div id="logo-lottie" class="lottie-layer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("logo-lottie"),
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "assets/logo-reveal.json",
  });

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

css

.lottie-layer {
  width: 100%;
  height: 100%;
}

dotLottie Pattern

html

<canvas id="product-lottie" class="lottie-canvas"></canvas>
<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
<script>
  const player = new DotLottie({
    canvas: document.getElementById("product-lottie"),
    src: "assets/product-flow.lottie",
    autoplay: false,
    loop: false,
  });

  window.__hfLottie = window.__hfLottie || [];
  window.__hfLottie.push(player);
</script>

css

.lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

Multiple Animations

Push each player into the same registry:

window.__hfLottie = window.__hfLottie || [];
window.__hfLottie.push(backgroundAnim);
window.__hfLottie.push(iconAnim);
window.__hfLottie.push(confettiAnim);

HyperFrames seeks them all to the same composition time.

Good Uses

After Effects exports that are already known to render correctly in lottie-web.
Logo reveals, icon loops, decorative accents, and product UI motion.
Translating Remotion Lottie usage into plain HyperFrames HTML.

Avoid

Relying on remote path URLs at render time.
Starting playback with play().
Assuming unsupported After Effects effects will survive export. Test the JSON or .lottie file in a browser first.
Loading a player asynchronously and registering it after HyperFrames validation has already inspected the page.

Validation

After editing a Lottie composition:

bash

npx hyperframes lint
npx hyperframes validate

Credits And References

HyperFrames adapter source: packages/core/src/runtime/adapters/lottie.ts.
lottie-web by Airbnb: https://github.com/airbnb/lottie-web
lottie-web loadAnimation options: https://github.com/airbnb/lottie-web/wiki/loadAnimation-options
dotLottie web player methods by LottieFiles: https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-web/methods

Files

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

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

Lottie compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Lottie this skillboraoztunc/skills	398	2 repos	~850	Automated safety check: Pass	Apache-2.0	1 mo ago
HyperFrames Animationheygen-com/hyperframes	60k	3 repos	~2.1k	Automated safety check: Pass	Apache-2.0	today
Hyperframes Animationchmonitor/chmonitor	300	2 repos	~1.8k	Automated safety check: Pass	GPL-3.0	5 days ago
HyperFrames Video Entry Pointheygen-com/hyperframes	60k	3 repos	~5.2k	Automated safety check: Pass	Apache-2.0	today
Dotlottie WebLottieFiles/dotlottie-web	892	—	~3.5k	Automated safety check: Pass	MIT	3 days ago
Remotion to HyperFrames Porterheygen-com/hyperframes	60k	3 repos	~2.8k	Automated safety check: Pass	Apache-2.0	today

Similar skills

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.
60k GitHub starsUsed in 3 repos~2.1k tokens
Media & CreativeAuto-check passed
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…
300 GitHub starsUsed in 2 repos~1.8k tokens
Media & CreativeAuto-check passed
HyperFrames Video Entry Point
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
60k GitHub starsUsed in 3 repos~5.2k tokens
Media & CreativeAuto-check passed
Dotlottie Web
LottieFiles/dotlottie-web
Implement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react).
892 GitHub stars~3.5k tokensUpdated 3 days ago
Media & CreativeAuto-check passed
Remotion to HyperFrames Porter
heygen-com/hyperframes
Ports an existing Remotion (React) composition to HyperFrames HTML with GSAP, one way, and grades the result against a tiered set of reference fixtures.
60k GitHub starsUsed in 3 repos~2.8k tokens
Media & CreativeAuto-check passed
Reference Video Replica Qc
Pluviobyte/video-production-skills
Analyze, recreate, align, and verify reference-video motion.
671 GitHub stars~1.8k tokensUpdated 2 mo ago
Media & CreativeAuto-check passed

Questions about Lottie

What does Lottie do?

Lottie and dotLottie adapter patterns for HyperFrames. An agent skill from boraoztunc/skills. Lottie is an agent skill from boraoztunc/skills. Lottie and dotLottie adapter patterns for HyperFrames.

When should I use Lottie?

Lottie fits situations like: embedding lottie-web JSON animations; @lottiefiles/dotlottie-web players; registering instances on window.hfLottie; making After Effects exports deterministic in HyperFrames.

How do I install Lottie in Claude Code?

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

How do I install Lottie in Codex?

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

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

What does Lottie need to run?

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

Does Lottie access the network?

SKILL.md names 4 domains. In commands or code: cdnjs.cloudflare.com and unpkg.com; the agent is likely to contact these when it follows the instructions. As links in the text: github.com and developers.lottiefiles.com. This is read from the text; nothing was executed.

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

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

About 850 tokens (SKILL.md is roughly 3.4k 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 Lottie?

Skills that share tags, products or a category with Lottie: HyperFrames Animation (heygen-com/hyperframes, 60k stars), Hyperframes Animation (chmonitor/chmonitor, 300 stars), HyperFrames Video Entry Point (heygen-com/hyperframes, 60k stars) and Dotlottie Web (LottieFiles/dotlottie-web, 892 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Lottie?

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

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

Lottie for HyperFrames

Contract

lottie-web Pattern

dotLottie Pattern

Multiple Animations

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 Lottie