from dotlottie-web493
Guidelines and patterns for implementing performant dotLottie/Lottie animations on the web (vanilla JS and React), including workers, state machines, and themin
Provides practical implementation guidance for using dotLottie runtimes to render Lottie animations in web projects. Covers package selection, basic and advanced integration (React hooks and components), Web Worker usage for performance, state machines for interactivity, theming via slots, and debugging tips.
Use when building or optimizing Lottie/dotLottie animations in web apps (vanilla JS, React, Next.js) — especially when performance, interactivity, or theming are required. Useful for adding animated UI elements with low bundle impact and high runtime performance.
Useful for front-end assistants and build tooling agents that can edit JS/TS/React code and run browser/SSR-aware tests (Code-focused agents like Copilot, Cursor, or frontend-specialist LLMs).
dotLottie-web is a well-documented skill for implementing Lottie animations on the web, covering vanilla JS, React, Web Workers, state machines, and theming. The SKILL.md is comprehensive with clear code examples and performance best practices. The bundled script (remove-dev.mjs) is a cleanup utility using zx/globby that was skipped during testing due to .mjs extension handling. No security concerns found — no network calls, credentials, or destructive patterns.
Skill is primarily a reference/guidelines skill rather than a tool-execution skill. The remove-dev.mjs script is a dev utility that's tangential to the core skill purpose. SKILL.md references a references/dynamic-slots.md file that was not fetched.
