LottieFiles

This skill should be used when adding analytics or event tracking to a Creator Plugin. It applies when (1) setting up event tracking in a new plugin, (2) adding new tracked events to an existing plugin, (3) the user mentions "event store", "analytics", "tracking", "telemetry", or "fireEvent" in a plugin context. Internal use for LottieFiles plugins only. When setting up tracking, ask the user if they want to track the user ID (steps 5 and 7 are optional).

This skill should be used when developing LottieFiles Creator Plugins with the Creator Plugin API. It applies when (1) creating a new Creator Plugin from scratch, (2) working on plugin code in plugin/ or src/ directories, (3) using the creator global API for scene manipulation, (4) building plugin UI with React that communicates with a plugin sandbox, or (5) the user mentions "Creator plugin", "LottieFiles plugin", "creator API", or works with files like plugin.ts or manifest.json in a plugin project context. Triggers on requests like "create a plugin", "add a feature to my plugin", "import assets into Creator", or "animate a layer".

Use when building or modifying plugin UI with @lottiefiles/creator-plugins-ui. Applies when adding React components in src/, using Button/Select/Slider/Dialog/Toast/NumberInput or other library components, setting up Tailwind CSS theming or dark mode, using the cn() utility, troubleshooting Base UI data attributes or missing styles, or updating the plugin UI theme to match Creator's interface theme.

Implement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react). Use when building, debugging, or optimizing dotLottie or Lottie animations in web projects, including vanilla JS, React, and Next.js. Covers package selection, Web Workers, state machines, theming, dynamic slot overriding, performance best practices, and common patterns.

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.