Klik Remotion Method logo

Klik Remotion Method

Community
t3knobox
klik-remotion-method

The Klik production method — takes a user from prompt to COMPLETE animated video (motion graphics + typography) in Remotion. Runs a fixed discovery questioning sequence into a single source of truth, then a visual storyboard the user approves as PIXELS, then a frozen execution plan built on Opus. Trigger whenever the user asks to produce a full video — "make a promo/launch/brand video", "create an animated video for X", "turn this script into a video" — or when a project contains *_animation_SSOT.md / *_storyboard.html / *_execution_plan.md / PROGRESS.md artifacts (at the root or in a klik/ planning folder) mid-production, or the user asks to update or check progress on such a project. Do NOT run the full method for single-scene tweaks or one-off animation edits — the klik-anim skill (with klik-cam for camera work) alone covers those. This method decides WHAT gets made and in what order; klik-anim governs HOW every frame moves and klik-cam governs the camera.

Overview

Publishert3knobox
Repositoryklik-anim-skill-creation
Skill nameklik-remotion-method
Stars
89
Forks
19
Bundled files
11
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 11 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by t3knobox on GitHub. Read the source before you install it.

Installation

Install the Klik Remotion Method AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/t3knobox/klik-anim-skill-creation/tree/main/klik-remotion-method
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/t3knobox/klik-anim-skill-creation.git /tmp/klik-anim-skill-creation
mkdir -p .claude/skills
cp -r /tmp/klik-anim-skill-creation/klik-remotion-method .claude/skills/klik-remotion-method
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Klik Remotion Method in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Klik Remotion Method on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Klik Remotion Method is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Klik Motion Method

Prompt → discovery → visual storyboard → execution plan → build → QA. Keep it lean: this file is the spine; load ONE reference file for the stage you are in.

The gate model

Prose gates facts. Pixels gate aesthetics. A document can settle duration, codec, or an asset list; it cannot settle typography, composition or footage strategy — those are only real once seen. From the storyboard onward the user approves rendered frames, not descriptions, and klik-anim §A9 binds you first: never show the user anything you have not rendered and looked at yourself. A look-pass cannot catch durations — the arithmetic checks (reading holds, feasibility) run beside it, never instead of it.

The three-layer contract

  • klik-anim — element craft laws (Part A, incl. §A8 only-the-user's-words, §A9 look-before-showing, §A12 reading-hold arithmetic, §A14 device ledger, §A15 boundary continuity), Remotion layer (B), style hooks (C: pacing dial C0.5, style interview C2), pre-flight (Part D). Loaded for build/QA. Never overridden.
  • klik-cam — camera movement: the camera dial C0, camera grammar (signature variation, focus discipline, 3D hygiene), CAM checklist. Loaded whenever the piece's camera dial is above 1.
  • This method — the orchestration: sequence, artifacts, gates, personas. Never restate skill content in artifacts — cite section numbers.

Pipeline map

StagePersonaArtifact (in klik/)Gate
1 Discovery — items 1–8Producer (1–4) · Asset Wrangler (5) · Copy Editor (6) · Music Supervisor (7) · DP (8)<project>_animation_SSOT.mdText — user approves the SSOT
2 Storyboard — item 9Storyboard Artist<project>_storyboard.html + boards/ stillsPIXELS — user approves real stills
3 Execution planTech Director<project>_execution_plan.mdText — user approves, then FROZEN; switch to Opus
4 BuildAnimatorcompositionsPIXELS — proof scene first, then per-scene
5 QAQA (fresh context)final renderklik-anim Part D pre-flight + klik-cam checklist + board match

Reference files: references/discovery.md · references/storyboard.md · references/execution-plan.md · references/build-qa.md · references/reference-analysis.md (load whenever the user supplies a reference, any stage). Templates: templates/SSOT.template.md · templates/storyboard.template.html · templates/EXECUTION_PLAN.template.md · templates/PROGRESS.template.md. Tooling: scripts/analyze-audio.py (dependency-free: BPM/downbeat grid + the MUSIC MAP — sections, energy tiers, spectral lead, attack/sustain, per-source rhythm patterns, and JSON events/levels for deterministic reactive comps — consumed by klik-anim §A16 and klik-cam CAM-5. Optional stem mode via demucs, if installed, isolates kick/snare/hats/vocals/bass/ guitar/piano; degrades gracefully to 3-band analysis without it) · scripts/measure-motion.py (QA side of the same loop: frame-diffs a RENDER into its actual energy curve — event/rest contrast, floor-relative rest ratio vs klik-anim §A6, and per-bar correlation against the recorded arc/tier curve, klik-anim §A18 — run at the Stage-5 arithmetic pass).

The questioning sequence is law

Discovery follows the SSOT's numbered intake in order, always. The user may answer anything ahead of time (references early, script early) — record it in its section, then return to the sequence where they left off. The next question is always the SSOT's first ⬜ item. Ask in batches within a section; confirm anything inferred. Never generate an artifact the user already has — every section asks "do you have one?" before making one.

Context architecture (BMAD-style)

Artifacts are the context transfer — a handoff succeeds only if the document carries everything the next agent needs.

  • Main conversation (Fable 5): discovery + storyboard — elicitation is dialogue; personas frame the questioning, one conversation.
  • Fresh context (Opus): execution-plan synthesis and build — inherit ONLY the artifacts. The model/session switch IS the handoff.
  • QA is always a separate context that did not author the code — an author reviewing its own work rubber-stamps (role bleed). QA reads artifacts + render and judges.

Planning documents live on disk

  • Everything is written to disk the moment it is drafted — an in-chat plan cannot gate anything. Folder: user-assigned, else auto-create klik/ at the project root (don't ask; say you did). Rendered gate material lives in klik/boards/ so a resumed session can see what was approved.
  • PROGRESS.md (from template, created at discovery start) tracks pipeline position, per-scene status, and the change log. Update at every gate, every scene built, every user "update progress". It is state; the SSOT is truth; the plan is contract — never merge them.
  • Artifact headers carry Status: DRAFT | APPROVED. The user's approval flips them — never flip one yourself. Post-approval changes are dated amendments.

Resuming

Read PROGRESS.md first, then verify it against the artifacts AND the code and renders — artifacts drift (a real resume found the plan saying AT-PROOF-GATE while PROGRESS said all-built). Reconcile every artifact to match reality before any new work. The ladder is authoritative:

  1. No SSOT → Discovery, item 1.
  2. SSOT with ⬜ intake items → Discovery, first ⬜.
  3. SSOT approved, board missing or DRAFT → Storyboard.
  4. Board approved, plan missing or DRAFT → Execution plan.
  5. Plan approved, unbuilt scenes → Build (respect the proof gate).
  6. All scenes built → QA.

House rules

  • Cheap pixels early beat expensive pixels late. Stills at --scale=0.5 cost seconds; discovering the typography was wrong after a build costs the build. Never defer a visual decision to save a render — that economy has already failed once.
  • Nothing is throwaway. Board mockups use the brand tokens; approved cards become posed comps; the build animates those comps.
  • One reference file in context at a time; during build, one scene row at a time (plus klik-anim + SSOT).
  • Iterate cheap: stills over clips, --scale=0.5, --frames=a-b; full-res only at QA.
  • Right-size. A 15s single-scene ask doesn't need the method — say so and work under klik-anim (+ klik-cam) alone. Short videos compress the board, never skip it.
  • Model split: planning phases on Fable 5; build on Opus — say so at the plan gate, with the plan's token estimate (band, excludes iterations).
  • Session limits: for ~30s+ videos the user WILL hit limits a few times — warn at discovery start; artifacts + PROGRESS.md make resume lossless.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Klik Remotion Method AI skill do?

The Klik production method — takes a user from prompt to COMPLETE animated video (motion graphics + typography) in Remotion. Runs a fixed discovery questioning sequence into a single source of truth, then a visual storyboard the user approves as PIXELS, then a frozen execution plan built on Opus. Trigger whenever the user asks to produce a full video — "make a promo/launch/brand video", "create an animated video for X", "turn this script into a video" — or when a project contains *_animation_SSOT.md / *_storyboard.html / *_execution_plan.md / PROGRESS.md artifacts (at the root or in a klik/...

Why use Klik Remotion Method on TypingMind?

Because you install it once and use it with any model. Klik Remotion Method is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Klik Remotion Method in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/t3knobox/klik-anim-skill-creation/tree/main/klik-remotion-method. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Klik Remotion Method?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Klik Remotion Method?

As many as you like. As long as a model supports skills, you can use Klik Remotion Method with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Klik Remotion Method AI skill free?

It is published on GitHub by t3knobox. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇