text-to-lottie Skill for Claude: What It Does and How to Install It

Makes Claude write Lottie animations and check them frame by frame in a local Skia Skottie player.

Installs: 10.9K; on skills.sh
Stars: 5.7K; on GitHub
Files: 22; besides SKILL.md
Updated: Jul 2026; last repo commit

text-to-lottie makes Claude write Lottie animation JSON and check it in the official local Skia Skottie player. Claude routes your request to one of 12 recipe guides, such as logo, typography, lower thirds, loaders and icons, UI microinteractions, SVG animation, diagrams, data and stats, product promos and visual effects. It writes public/projects/<project>/<scene-N>/lottie.json and inspects exact frames before it finishes.

It needs the player project from the same repo, Node.js with npm and a browser. The output is plain Lottie JSON, and the README shows how to use it on web, React Native, iOS, Android and Flutter, or import it into After Effects. By default the scene exposes only a background color control, so ask for the controls you want.

Good for

Designers who want logo, icon or title animations from a prompt
Developers who need Lottie JSON for web, iOS, Android, React Native or Flutter
Teams animating stats, charts, diagrams or product promos
Anyone animating an SVG or logo they already have

Install text-to-lottie

Claude Code

Copy this prompt.

Install the text-to-lottie skill in Claude Code. Run this command:

npx skills add diffusionstudio/lottie

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

The skill needs the official player project to check its work. The second method creates that project; SKILL.md says to use it when it is missing. The dev server defaults to port 3030 and moves to the next free port, so use the URL Vite prints. There is no Claude app route because the skill needs a local dev server and a browser.

From the project README. Source.

What's in the skill

When it loads

Create, edit, or fix Lottie/Bodymovin JSON animations for the local Skia Skottie player. Use for text-to-Lottie, SVG/logo/type animation, loaders/icons, state feedback, UI microinteractions, lower thirds, diagrams, data/stat/chart animations, product promos, scene/camera motion, visual effects, scene edits, slots/controls, and Skottie debugging.

Sections in SKILL.md

Operating Model
Reference Loading
Workflow
Inline Rules
Design Defaults (always apply)
Scene Rules
Verification
Maintenance Evals

Key facts

Author: diffusionstudio (repo owner)
License: MIT
Installs on skills.sh: 10,933 (Nov 2, 2026)
GitHub stars: 5,664 for the whole diffusionstudio/lottie repo (Nov 2, 2026)
Last repo commit: Jul 25, 2026
What it includes: 23 files including SKILL.md: 18 reference files and 4 eval files (no scripts)
Needs: The player project from the same repo, run with npm run dev, and a browser to inspect frames
Works in: Claude Code, Codex or any coding agent that supports skills, per the README
Output: Lottie JSON at public/projects/<project>/<scene-N>/lottie.json, with optional controls.json

What it includes

Pick a recipe from a table of user intents
Twelve recipes: logo, typography, lower thirds, loaders and icons, UI microinteractions, SVG animation, camera and scene motion, diagrams, data and stats, product promo, visual effects, starter projects.
Read · Route the request
Always read player-contract.md first
Covers setup, scene layout, target scene policy, the context endpoint, frame pinning, slots and controls, and native text.
Read · Read the player contract
npx degit, npm install and npm run dev if missing
Creates a player project and starts its dev server (references/player-contract.md).
Runs code · Set up the player
lottie.json, and controls.json when useful
Scenes live under public/projects. Claude re-reads the file just before overwriting, because the UI can write slot edits back.
Write · Write the scene
Subtract before adding: no chrome, one surface tone, one divider style
SKILL.md calls these defaults non-negotiable, with a chrome and container budget of 0.
Read · Design defaults
Transparent for logos, icons, loaders, overlays, lower thirds and SVG assets
Full-frame standalone scenes get a background layer with a bgColor slot and a controls entry.
Read · Background policy
Validate the JSON, run the player, check frame 0, the midpoint and op - 1
Uses node -e JSON.parse, GET /__context and ?frame=N pages in the browser.
Runs code · Verify
Four eval files, not read during normal work
Trigger, routing, reference-loading prompts and an output rubric, used only when changing the skill.
Read · Maintenance evals

From the official docs

Permissions

Medium risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It installs and runs a project's dependencies
npm install runs for the player project, then npm run dev starts a local server. Use a new folder and read package.json first. github.com
It can overwrite a scene file
SKILL.md says to overwrite main-project/scene-1 only if it is still the untouched placeholder, and to re-read a file before overwriting. Keep the project in version control. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. Work in a fresh project folder.
Talks to	github.com (degit downloads diffusionstudio/lottie). The npm registry (npm install). localhost (the player's dev server)
Scopes	Claude runs npx degit, npm install and npm run dev to set up and start the player Claude writes lottie.json and controls.json under public/projects, and may add images and fonts there Claude validates JSON with node -e and queries the dev server at /__context

Questions

What does the text-to-lottie skill do?

It makes Claude author Lottie JSON animations and check them in a local Skia Skottie player. It covers logos, SVG animation, typography, loaders, icons, UI microinteractions, lower thirds, diagrams, data and stats, product promos and effects.

How do I install text-to-lottie?

Use the install box at the top of this page. It adds the skill with the skills CLI and shows how to create the player project the skill needs.

Does it work in Claude Code and Codex?

The README says it is for Claude Code, Codex or any other coding agent that supports skills. SKILL.md says to keep the skill portable and avoid host-specific commands.

Do I need an API key?

The README and SKILL.md do not mention one. The skill needs Node.js, npm and a browser for the player.

Can I use the animation outside the player?

Yes. The output is Lottie JSON. The README has snippets for web with lottie-web, React Native Skia, iOS, Android and Flutter, and says you can import it into After Effects.

How do I get editable controls?

Ask for them. The README says outputs usually expose only a background color control unless you request more.

Can I upload it to the Claude app?

No. The skill needs a local player project, a dev server and a browser, so use a client that can run commands on your machine.

Is it safe?

Installing it copies SKILL.md, reference files and eval files, with no scripts. Using it makes Claude run npx degit, npm install and npm run dev, which download code and start a local server, and write scene files in the player project. Review those commands and run it in a fresh folder.

Information

updated Nov 2, 2026

Repository: diffusionstudio/lottie
Folder: skills/text-to-lottie

diffusionstudio/lottie skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

text-to-lottie SKILL.md · github.com
diffusionstudio/lottie README · github.com
player-contract.md · github.com