/text-to-lottie
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,
$ npx -y skills add diffusionstudio/lottie --skill text-to-lottie --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/text-to-lottie
Context preview
The summary Claude sees to decide when to auto-load this skill.
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,
SKILL.md
text-to-lottie.SKILL.mdname: text-to-lottie
description: 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.
Text To Lottie
Author production-ready Lottie JSON for the official local Skia Skottie player. The deliverable is a renderable scene in the player, not isolated JSON.
Operating Model
- Use the official player project and verify in Skia Skottie. Do not hand-roll a
custom viewer or switch renderers for verification.
- Keep the skill portable across Agent Skills clients. Avoid host-specific
commands, command modes, or orchestration conventions in skill instructions.
- Prefer fewer questions and stronger defaults. Ask only when a decision changes
the output materially, such as transparent vs full-frame background, brand constraints, target format, or supplied source assets.
- Prioritize clean, intentional, professional motion over merely satisfying the
literal prompt.
Reference Loading
This `SKILL.md` is the thin control plane. Load only one-level references that match the task. Do not open the whole reference library.
Always read `references/player-contract.md` before creating, editing, fixing, or verifying a scene. If a routed reference is unavailable, continue using the inline rules in this file.
| User intent | References to read when present | | --- | --- | | Any new/edit/fix Lottie scene | `references/player-contract.md` | | JSON structure, keyframes, slots, shapes, assets | `references/lottie-spec-map.md` | | Logo animation | `references/recipe-logo.md`, `references/motion-taste.md`, `references/design-taste.md` | | Typography, title, quote, text reveal | `references/recipe-typography.md`, `references/design-taste.md`, `references/motion-taste.md` | | Lower third, name tag, caption bar, overlay | `references/recipe-lower-thirds.md`, `references/design-taste.md`, `references/motion-taste.md` | | Loader, icon, spinner, badge animation | `references/recipe-loaders-icons.md`, `references/motion-taste.md` | | Success, error, warning, completion, empty state | `references/recipe-loaders-icons.md`, `references/design-taste.md`, `references/motion-taste.md` | | UI microinteraction | `references/recipe-ui-microinteractions.md`, `references/design-taste.md`, `references/motion-taste.md` | | Generic "animate this SVG" or SVG-to-Lottie | `references/recipe-svg-animation.md`, `references/svg-compatibility.md`, `references/motion-taste.md` | | Camera follow, pan, zoom, parallax, scene motion | `references/recipe-camera-scene-motion.md`, `references/design-taste.md`, `references/motion-taste.md` | | Diagram, technical line animation, callout, flow trace | `references/recipe-diagram-technical.md`, `references/design-taste.md`, `references/motion-taste.md` | | Data, stats, KPIs, charts, metrics, dashboard figures | `references/recipe-data-stats.md`, `references/design-taste.md`, `references/motion-taste.md` | | Product launch, feature announcement, social promo | `references/recipe-product-promo.md`, `references/design-taste.md`, `references/motion-taste.md` | | Long text, multiple ideas, list/features/steps, timeline, before/after, problem/solution, quote+proof, recap/story, product walkthrough, multi-language variations, chapters, multi-beat sequence, episode, jump/hard cuts, transition grammar | `references/chapterization-transition-grammar.md`, `references/motion-taste.md` | | Glow, glass, metal, gradient, fill, bubble/burst effects | `references/recipe-visual-effects.md`, `references/design-taste.md`, `references/motion-taste.md` | | SVG input inside logo/icon/UI/lower-third work | The task recipe plus `references/svg-compatibility.md` | | Starter brief or reusable project direction | `references/recipe-starter-projects.md`, `references/design-taste.md`, `references/motion-taste.md` | | Any "premium", "clean", "minimal", "modern", "sleek", or "polished" qualifier | `references/design-taste.md` (restraint defaults), plus the routed recipe |
For mixed prompts, choose one primary recipe from the main deliverable, then add secondary references for source format or visual treatment. Examples: SVG logo with glow uses logo as primary plus SVG compatibility and visual effects; product launch with pan/zoom uses product promo plus camera scene motion; technical SVG diagram tracing uses diagram/technical plus SVG compatibility; kinetic title with glass sweep uses typography plus visual effects.
Workflow
1. Route the task using the table above. Read only the relevant references that exist. 2. Locate the official player project and resolve the target scene using the target precedence below. Before editing, verify the resolved path is `public/projects/<project>/<scene-N>/lottie.json`; re-read that current file immediately before overwriting because the UI can write slot edits back to source. 3. Decide the background policy before authoring. 4. Write or update `public/projects/<project>/<scene-N>/lottie.json` and, when useful, `controls.json`. 5. Validate JSON, run or reuse the dev server, inspect exact frames with `?frame=N`, and fix render/design/motion issues before finishing.
Inline Rules
Design Defaults (always apply)
These few defaults are non-negotiable and apply to every designed scene. Load `references/design-taste.md` for the full reasoning, especially for any "premium", "clean", "minimal", "modern", or "card" prompt.
- Premium means subtract, not add. When a prompt says premium, clean, minimal,
modern, sleek, or sophisticated, default to restraint: remove chrome before adding it. Premium is carried by scale, weight, brightness, spacing, and timing, never by cards, borders, dividers, shadows, glow, or stacked tints.
- Chrome/container budget is `0` b
Read more
name: text-to-lottie description: 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.
Text To Lottie
Author production-ready Lottie JSON for the official local Skia Skottie player. The deliverable is a renderable scene in the player, not isolated JSON.
Operating Model
- Use the official player project and verify in Skia Skottie. Do not hand-roll a
custom viewer or switch renderers for verification.
- Keep the skill portable across Agent Skills clients. Avoid host-specific
commands, command modes, or orchestration conventions in skill instructions.
- Prefer fewer questions and stronger defaults. Ask only when a decision changes
the output materially, such as transparent vs full-frame background, brand constraints, target format, or supplied source assets.
- Prioritize clean, intentional, professional motion over merely satisfying the
literal prompt.
Reference Loading
This `SKILL.md` is the thin control plane. Load only one-level references that match the task. Do not open the whole reference library.
Always read `references/player-contract.md` before creating, editing, fixing, or verifying a scene. If a routed reference is unavailable, continue using the inline rules in this file.
| User intent | References to read when present | | --- | --- | | Any new/edit/fix Lottie scene | `references/player-contract.md` | | JSON structure, keyframes, slots, shapes, assets | `references/lottie-spec-map.md` | | Logo animation | `references/recipe-logo.md`, `references/motion-taste.md`, `references/design-taste.md` | | Typography, title, quote, text reveal | `references/recipe-typography.md`, `references/design-taste.md`, `references/motion-taste.md` | | Lower third, name tag, caption bar, overlay | `references/recipe-lower-thirds.md`, `references/design-taste.md`, `references/motion-taste.md` | | Loader, icon, spinner, badge animation | `references/recipe-loaders-icons.md`, `references/motion-taste.md` | | Success, error, warning, completion, empty state | `references/recipe-loaders-icons.md`, `references/design-taste.md`, `references/motion-taste.md` | | UI microinteraction | `references/recipe-ui-microinteractions.md`, `references/design-taste.md`, `references/motion-taste.md` | | Generic "animate this SVG" or SVG-to-Lottie | `references/recipe-svg-animation.md`, `references/svg-compatibility.md`, `references/motion-taste.md` | | Camera follow, pan, zoom, parallax, scene motion | `references/recipe-camera-scene-motion.md`, `references/design-taste.md`, `references/motion-taste.md` | | Diagram, technical line animation, callout, flow trace | `references/recipe-diagram-technical.md`, `references/design-taste.md`, `references/motion-taste.md` | | Data, stats, KPIs, charts, metrics, dashboard figures | `references/recipe-data-stats.md`, `references/design-taste.md`, `references/motion-taste.md` | | Product launch, feature announcement, social promo | `references/recipe-product-promo.md`, `references/design-taste.md`, `references/motion-taste.md` | | Long text, multiple ideas, list/features/steps, timeline, before/after, problem/solution, quote+proof, recap/story, product walkthrough, multi-language variations, chapters, multi-beat sequence, episode, jump/hard cuts, transition grammar | `references/chapterization-transition-grammar.md`, `references/motion-taste.md` | | Glow, glass, metal, gradient, fill, bubble/burst effects | `references/recipe-visual-effects.md`, `references/design-taste.md`, `references/motion-taste.md` | | SVG input inside logo/icon/UI/lower-third work | The task recipe plus `references/svg-compatibility.md` | | Starter brief or reusable project direction | `references/recipe-starter-projects.md`, `references/design-taste.md`, `references/motion-taste.md` | | Any "premium", "clean", "minimal", "modern", "sleek", or "polished" qualifier | `references/design-taste.md` (restraint defaults), plus the routed recipe |
For mixed prompts, choose one primary recipe from the main deliverable, then add secondary references for source format or visual treatment. Examples: SVG logo with glow uses logo as primary plus SVG compatibility and visual effects; product launch with pan/zoom uses product promo plus camera scene motion; technical SVG diagram tracing uses diagram/technical plus SVG compatibility; kinetic title with glass sweep uses typography plus visual effects.
Workflow
1. Route the task using the table above. Read only the relevant references that exist. 2. Locate the official player project and resolve the target scene using the target precedence below. Before editing, verify the resolved path is `public/projects/<project>/<scene-N>/lottie.json`; re-read that current file immediately before overwriting because the UI can write slot edits back to source. 3. Decide the background policy before authoring. 4. Write or update `public/projects/<project>/<scene-N>/lottie.json` and, when useful, `controls.json`. 5. Validate JSON, run or reuse the dev server, inspect exact frames with `?frame=N`, and fix render/design/motion issues before finishing.
Inline Rules
Design Defaults (always apply)
These few defaults are non-negotiable and apply to every designed scene. Load `references/design-taste.md` for the full reasoning, especially for any "premium", "clean", "minimal", "modern", or "card" prompt.
- Premium means subtract, not add. When a prompt says premium, clean, minimal,
modern, sleek, or sophisticated, default to restraint: remove chrome before adding it. Premium is carried by scale, weight, brightness, spacing, and timing, never by cards, borders, dividers, shadows, glow, or stacked tints.
- Chrome/container budget is `0` b
Generate production-ready Lottie animations with Claude Code or Codex
Repo: diffusionstudio/lottie