animot-presentation-generator

A Claude Code skill that generates complete animated presentations for the Animot app from a text prompt or structured markdown.

Features

• Generate full Animot project JSON from a topic description or structured markdown
• Morphing animations — elements with the same ID automatically animate between slides
• AI image generation via Gemini API (optional)
• Multiple canvas formats: HD 16:9, TikTok 9:16, Instagram 4:5, Square 1:1, Twitter, 4:3
• Rich element types: text, code, shapes, arrows, counters, charts, icons, motion paths
• Background effects: particles, confetti
• Property sequencing, staggered waves, spring easing for polished motion

Installation

Via npm (recommended)

npx @animot/presentation-generator

This automatically installs the skill into your Claude Code skills directory (~/.claude/skills/ for global or .claude/skills/ for project-level).

Manual installation

Copy the skill files into your project's .claude/skills/animot-presentation-generator/ directory:

mkdir -p .claude/skills/animot-presentation-generator
cp SKILL.md .claude/skills/animot-presentation-generator/
cp -r scripts/ .claude/skills/animot-presentation-generator/scripts/
cp -r references/ .claude/skills/animot-presentation-generator/references/

Usage

Once installed, the skill triggers automatically in Claude Code when you ask to:

• "Generate a presentation about [topic]"
• "Create slides from this markdown file"
• "Make a TikTok presentation about [topic]"
• "Build an animated slideshow for [topic]"

Example prompts

Create a 7-slide presentation about Docker vs Podman

Generate an Instagram carousel about CSS Flexbox

Build a TikTok presentation from my content.md file

Image generation (optional)

For slides with custom images, the skill uses the Gemini API. Set your API key:

echo "GEMINI_API_KEY=your-key-here" >> .env
npm install @google/genai

Included files

| File | Purpose | |------|---------| | SKILL.md | Complete skill documentation (triggers, schema, animation system, layout rules) | | scripts/generate-image.mjs | Generates images via Gemini 2.5 Flash API | | scripts/build-project.mjs | Embeds file: image paths as base64 data URLs in JSON | | references/css-flexbox-grid.json | Gold standard 8-slide presentation example |

Output

Generated presentations are saved as JSON files that can be imported into the Animot app at animot.io via Editor > Menu > Import JSON.

Uninstalling

npm uninstall @animot/presentation-generator

The preuninstall hook automatically removes the skill from your Claude Code skills directory.

License

MIT