Klik Motion-Graphics System

Claude skills for producing industry-standard motion graphics with Remotion.

Choose your install:

• Only want great single animations → Option A (klik-anim + klik-cam).
• Want full videos created end-to-end → Option B (all three).

Heads up — tokens & models:

• Producing videos of ~30 seconds or longer will run you out of session usage limits a few times — animations eat tokens like they’re free. Plan your deadlines around it; the method saves all planning docs (including PROGRESS.md) to disk, so a fresh session picks up exactly where you left off.
• To stretch the budget: plan and iterate (Brief/Style/Storyboard, feedback rounds) on Fable 5, then switch to Opus for the code-heavy build phase.

---

Prerequisite — Remotion’s official skills

Both Klik skills defer to Remotion’s own agent skills as the source of truth for current API behavior (klik-anim §B0: remotion-create, remotion-docs, remotion-best-practices, remotion-render, …). Install those first — the Klik skills still load without them, but every “check the docs” instruction becomes a dead reference and the agent falls back to guessing APIs.

Already have /remotion-docs in your skill list? Skip this.

npx remotion skills add        # or: npx skills add remotion-dev/skills
npx remotion skills update     # pull newer Remotion patterns later

This installs them for the current project (.agents/skills, symlinked to .claude/skills). To have them everywhere instead, copy the resulting remotion-* folders into ~/.claude/skills/ — the same place the Klik skills go below.

You don’t have to run this yourself: if klik-anim is installed and these are missing, it tells the agent to flag it and ask you which scope you want before installing anything — defaulting to project-local if you don’t care.

These are Remotion’s skills, not part of this repo — see remotion.dev/docs/ai/skills.

Optional (better music analysis): pip install demucs gives the method’s audio analyzer true stem separation (vocals/drums/bass/guitar/piano) instead of frequency-band approximation. Without it everything still works — the analyzer just says it fell back to band mode.

---

Install — Claude Code (CLI or VS Code extension)

Option A — animation craft only

git clone https://github.com/t3knobox/klik-anim-skill-creation
mkdir -p ~/.claude/skills
cp -R klik-anim-skill-creation/klik-anim \
      klik-anim-skill-creation/klik-cam ~/.claude/skills/

Option B — full end-to-end system

git clone https://github.com/t3knobox/klik-anim-skill-creation
mkdir -p ~/.claude/skills
cp -R klik-anim-skill-creation/klik-anim \
      klik-anim-skill-creation/klik-cam \
      klik-anim-skill-creation/klik-remotion-method ~/.claude/skills/

Verify

Restart the Claude Code session (or reload the VS Code window), then type / — /klik-anim and /klik-cam (and /klik-remotion-method for Option B) should appear. The skills also auto-trigger without the command on matching work.

No git on the machine? Grab the .zip(s) from dist/ and run unzip .zip -d ~/.claude/skills/.

---

Install — Cowork

1. Download from dist/: klik-anim.skill + klik-cam.skill (Option B: also klik-remotion-method.skill).
2. Drag each file into a Cowork chat → click Save skill.

Installs to your account, available in every Cowork session.

---

Update

git pull
cp -R klik-anim klik-cam ~/.claude/skills/         # re-copy what you installed
cp -R klik-remotion-method ~/.claude/skills/       # (Option B only)
npx remotion skills update                         # keep Remotion's skills current too

Restart the session. Cowork: re-save the new .skill file (overwrites by name).

---

Repo layout & editing rules

klik-anim/                  ← element-animation craft (standalone). SOURCE OF TRUTH.
  references/effects.md     ← render-verified effect & finish recipes
klik-cam/                   ← camera-movement craft (dial C0 + grammar)
klik-remotion-method/       ← method skill (depends on both)
  SKILL.md                  ← orchestrator: pipeline map, gates, house rules
  references/*.md           ← per-stage instructions, loaded one at a time
  templates/                ← SSOT / storyboard.html / EXECUTION_PLAN / PROGRESS
  scripts/analyze-audio.py  ← dependency-free BPM/downbeat/energy analysis
METHOD-FEEDBACK.md          ← field report from real runs (historical change-spec)
dist/                       ← GENERATED packages — never edit by hand
scripts/package.sh          ← rebuilds dist/ from the skill folders

To change a skill: edit its folder → ./scripts/package.sh → commit source + dist/ together. Folder names are the skill names and /commands — keep them stable or every install breaks.

More: INSTALL.md — team sharing options · CLAUDE.md — orientation for AI agents working in this repo.