Claude Lottie Skill — AI skill for Claude Code

Claude Lottie Skill

A [Claude Code](https://docs.anthropic.com/en/docs/claude-code) skill that searches [LottieFiles](https://lottiefiles.com) for brand-coherent Lottie animations and embeds them into web projects.

What It Does

Invoke `/lottie-design` in Claude Code and it will:

1. Detect your project — framework (React, Vue, Svelte, plain HTML) and brand context (from DESIGN.md, CSS custom properties, or Tailwind config)
2. Translate brand to motion — map your brand personality (minimal, playful, luxury, etc.) to LottieFiles search modifiers
3. Search LottieFiles — find animations that match both your intent and your brand
4. Present options — show 4-6 candidates with preview links, file sizes, and brand-fit assessments
5. Embed — install the right @lottiefiles/dotlottie-* package and generate framework-specific components

Single Animation

/lottie-design loading spinner

Searches for a loading animation that matches your brand, presents options, embeds your pick.

Animation Series

/lottie-design UI feedback set

Finds a cohesive set (loading, success, error, warning, info) from the same creator or with matching visual style. Generates a barrel file and reusable wrapper component.

Installation

Copy `SKILL.md` to your Claude Code skills directory:

mkdir -p ~/.claude/skills/lottie-design
cp SKILL.md ~/.claude/skills/lottie-design/SKILL.md
cp -r references ~/.claude/skills/lottie-design/references
cp -r examples ~/.claude/skills/lottie-design/examples

The skill requires these Claude Code tools: `WebSearch`, `WebFetch`, `Bash`, `Read`, `Write`, `Glob`, `Grep`.

Supported Frameworks

Framework	Package	Install Required
React / Next.js	@lottiefiles/dotlottie-react	Yes
Vue / Nuxt	@lottiefiles/dotlottie-vue	Yes
Svelte / SvelteKit	@lottiefiles/dotlottie-svelte	Yes
Plain HTML	@lottiefiles/dotlottie-wc (CDN)	No