Animot Generator Skill

A Claude Code skill (and standalone npm package) that generates complete Animot presentations from a text prompt. Outputs project JSON ready to import into the editor at animot.io.

What it does

• Plans the deck — picks a count, a recipe (Hook Reveal, Compare Two, Process Flow, Data Drip, Code Zoom-In, Stat Punch, Section Header, CTA Close), and a visual style.
• Generates content — slides with morphing shapes, code blocks, icons, charts, counters, arrows.
• Optionally generates images via Gemini 2.5 — embedded as base64 data URLs in the JSON.
• Polish pass — applies easing variation per element type, stagger waves, property sequencing, ambient floating, color morphs across sections.
• Outputs a generator script at animot/scripts/gen-<slug>.mjs that emits the final animot/generated/<slug>.json — so you can tweak and re-run.

Install

As a Claude Code skill (recommended)

The skill auto-loads in Claude Code when present in ~/.claude/skills/. Once installed, just describe the presentation you want and Claude does the rest.

# Drop the skill into your Claude Code skills directory
# (works on macOS, Linux, Windows — the path is the same minus the home prefix)

mkdir -p ~/.claude/skills/animot-presentation-generator
cd ~/.claude/skills/animot-presentation-generator

# Pull the latest skill bundle
npm pack @animot/presentation-generator
tar -xzf animot-presentation-generator-*.tgz --strip-components=1
rm animot-presentation-generator-*.tgz

# Done — Claude Code will auto-discover the skill on next launch.

As an npm package (use the generator scripts directly)

# If you'd rather use the generator scripts directly (no Claude Code)
npm install --save-dev @animot/presentation-generator

Using it with Claude Code

With the skill installed, Claude knows how to plan and generate Animot presentations. Sample interaction:

User: "Make a TikTok-format presentation about how Apache Kafka works"

Claude (with the skill loaded):
  → Plans 8 slides using the Process Flow recipe
  → Generates icons, dashed connecting arrows, flow markers
  → Writes animot/scripts/gen-kafka-flow.mjs
  → Runs it → animot/generated/kafka-flow.json
  → User imports the JSON in the Animot editor

Trigger phrases

The skill activates on phrases like "generate a presentation", "create slides", "make a TikTok / Instagram / square animation", "how X works diagram". It also reads structured markdown briefs.

Importing the result

1. Open the Animot editor (https://animot.io or your local instance)
2. Toolbar → Menu → Import JSON
3. Pick the .json file the skill produced
4. Done — fully editable presentation appears

Generating images

For slides that need custom illustrations, the skill uses gemini-2.5-flash-image. Requires a GEMINI_API_KEY in your project's .env or shell environment.

# The skill ships a script that calls Gemini 2.5 to generate base64 images
# (used for hero shots, custom illustrations, etc.)

GEMINI_API_KEY=$(grep GEMINI_API_KEY .env | cut -d= -f2- | tr -d '"') \
  node .claude/skills/animot-presentation-generator/scripts/generate-image.mjs \
  --prompt "minimalist illustration of a coffee bean travelling through pipes" \
  --aspect "9:16"

# Outputs a data:image/png;base64,... URL the skill embeds in the JSON.

Aspect ratios: 1:1, 16:9, 9:16, 4:3, 3:4.

Running generators directly

# When invoking the skill directly (without Claude Code):
node animot/scripts/gen-my-deck.mjs

# Output: animot/generated/my-deck.json

Scene recipes

The skill picks from named recipes that work well in practice:

Reference projects

The skill ships two gold-standard examples it studies before generating:

• references/css-flexbox-grid.json — 8-slide morphing deck
• references/how-apache-kafka-works.json — single-slide Flow mode diagram

Output format

The skill writes a Node.js generator script (so the result is reproducible and tweakable) plus the final .json at the standard paths:

animot/
├── scripts/
│   └── gen-my-deck.mjs       # programmatic generator (edit + rerun)
└── generated/
    └── my-deck.json          # importable result