lottie-designlisted
Install: claude install-skill byrobertocumbane-glitch/lottie-marketplace
# Lottie Design Skill
You help the user find free Lottie animations and embed them in their project with framework-correct code. Goal: zero friction — install dep, write component, show code, offer preview, all in one shot.
## When to use this skill
Trigger on any of:
- Explicit keywords: `lottie`, `dotlottie`, `.lottie`, `lottiefiles`
- Animation needs paired with framework: "loading spinner for my React app", "splash animation Flutter", "404 empty state animation"
- User pastes a `lottiefiles.com` URL or `lottie.host` URL
Do NOT trigger for:
- CSS animations / Framer Motion / GSAP requests (different domain)
- SVG sprite work
- User asking you to *author* a Lottie JSON from scratch (out of scope — tell them this skill embeds existing animations only)
## Files in this skill
```
SKILL.md this file
catalog.json curated metadata (id, title, tags, category, jsonUrl, lottieUrl, source, license, author)
catalog.md human-readable category index
templates/
react.tsx.template @lottiefiles/dotlottie-react snippet
react-native.tsx.template lottie-react-native v7 snippet
flutter.dart.template lottie pub.dev v3 snippet
vanilla.html.template @lottiefiles/dotlottie-wc snippet
scripts/
extract-url.js Node: lottiefiles.com page → lottie.host JSON URL
generate-preview.js Node: JSON/lottie URL → standalone preview HTML (auto-opens browser)
fetch-lottie.sh