How to Edit with Claude — Part 2: A Reusable Video Template, in Code

Watch the episode

Episode 2.2 · Workflow template

The 60-second version of this post. The full template prompt is pinned in the comments.

Watch on InstagramYouTube channel

Episode 1 of my reel series took six rounds of notes before I'd post it. Episode 2.1 was done in one. Same footage quality, same Claude, same me reviewing. Part 1 explained half of the difference: a my-style skill that describes my taste in numbers. This post is the other half, and honestly the bigger one. A template written in code, so that every edit comes out with the same bones.

Four correct answers, four different shapes

Here's the thing about Claude, Codex, Gemini, Grok, any of them: they're probabilistic. Give the same prompt four times and you get four correct answers in four different structures. For writing code that's fine, tests catch the drift. For a video it's a disaster, because "the title is two seconds longer and the captions moved up 40 px" is correct and wrong, and you only find out by watching the whole thing. Tap the toggle to see what I mean.

Part 1 gave Claude eyes and ears. This part gives it hands. The analogy I keep coming back to: a style guide tells a designer what good looks like; a component library stops them from having to redraw the button every time. my-style is the guide. my-template is the library.

One prompt, three parts

The whole template is built by one prompt, run in the same folder as my-style. It does three things in order, and it stops to ask between them. Here's the text, exactly as pinned under the reel.

PromptRead my-style and build me a reusable video template called my-template, in code: 9:16, 1080x1920, HTML + CSS + JS rendered with HyperFrames (if it's missing, check for Node.js 22+ and run "npx hyperframes doctor").

Part 11) BRAND KIT: put my fonts, colours and logo in one folder, my-template/brand, and write one brand file: my colours, my fonts by role (titles / captions / labels) and one type scale for every text size. Never invent a font, colour or logo I didn't give you. Ask me about anything missing, one question at a time.

Part 22) SCENES: build the pieces every video of mine uses as reusable blocks: hook title, word-by-word captions, name card (intro), step card, before/after, outro. Every size and timing comes from my-style and the brand file. Render a still of each on one sheet so I can approve them in one go.

Part 33) EDIT-MY-VIDEO: after I approve, use /skill-creator to make a skill called edit-my-video. Ask me which software I edit in (Premiere Pro, After Effects, DaVinci Resolve, HyperFrames or Remotion) and write step-by-step instructions for using my-template there: transcribe my clip, cut fillers and long pauses, add my captions, drop in the scenes where my words call for them (I say "Step 2" → step card), check the layout, render preview.mp4.

The brand kit: five colours, two fonts, one scale

My brand file is tiny, and that's deliberate. Five colours, two typefaces, and a rule for every text size. Claude is told it may use these and never invent one; if a scene truly needs a new colour, that's a question for me, not a decision for it.

The scale is the part I'd never have thought of before a tutorial taught it to me (that's the first row of the lessons table in Part 1). Every text size in a scene is the base size (my body text, 48 px at video scale) times one ratio to some power. Pick the ratio once per scene and it sets the vibe: golden for a dramatic hook, root-two for a tech explainer, minor third for a text-heavy card. Nobody, Claude included, types a pixel value. Try the ratios:

A script in the kit checks every scene against this and prints a warning for any size that isn't a step. Sounds pedantic; it ended an entire category of "why does this title feel slightly off" notes.

The scenes, live

This is the part I'm proudest of, so I've embedded it rather than describing it. Below are nine of the twenty-one scenes in my motion kit, playing in your browser exactly the way HyperFrames renders them: same HTML, same CSS, same GSAP timelines. Hit a scene name to jump; toggle the safe-area guide to see the Instagram UI zones every scene has to respect (top 220 px and bottom 320 px belong to the app, not to me).

Every scene follows the same grammar, and the grammar is written down in the kit so Claude builds new ones the same way:

Under the hood each scene is one HTML file: a <template> with the markup, a <style> scoped to the scene's id, and a script that adds tweens to a paused GSAP timeline. Here's the simplest one, the wordmark you saw first in the player. Thirteen lines of animation.

<template id="s01-claude-template">
  <div id="s01-claude" data-composition-id="s01-claude" data-width="1080" data-height="1920">
    <div class="scene">
      <div class="panel-top on-oat">
        <div class="panel-center">
          <h1 class="display d3 word">Claude</h1>
          <div class="bar-wrap"><span class="underline"></span></div>
          <p class="kicker line">can now learn a task</p>
        </div>
      </div>
    </div>
    <script>
      (function () {
        var root = document.getElementById("s01-claude");
        var tl = gsap.timeline({ paused: true });
        var t = Kit.cascadeIn(tl, root.querySelector(".word"), 0.08);
        t = Kit.underline(tl, root.querySelector(".underline"), t);
        Kit.cascadeIn(tl, root.querySelector(".line"), t + 0.05, { by: "word", blur: 8 });
        window.__timelines["s01-claude"] = tl;
      })();
    </script>
  </div>
</template>

Notice there's no font-family in the scene and no pixel sizes: .display.d3 and .kicker come from the kit, which comes from the brand file. Change the brand, and twenty-one scenes change with it.

The timing lives in one file

Scenes are pieces. What makes them a video is a storyboard: one JSON file that says which scene plays when, for how long, and which beat of the source it mirrors. A script reads it and regenerates the host page and the cue sheet, so nobody (me or Claude) ever hand-edits the assembled file.

{
  "reel": "DbYM0olp2t7",
  "title": "Record a Skill",
  "duration": 58,
  "scenes": [
    { "id": "s01-claude", "start": 0, "duration": 1.8, "layer": "split", "type": "wordmark",
      "says": "Claude can now learn a task", "onscreen": "Claude — can now learn a task",
      "mirrors": "shot 1: logo build" },
    { "id": "s07-hit-record", "start": 12.4, "duration": 3.2, "layer": "full", "type": "button-press",
      "says": "step one, hit record", "onscreen": "Step 01 · Hit record",
      "mirrors": "shot 6: record button screen recording" }
  ]
}

Three fields do most of the work. layer decides whether the graphic covers me (full), sits in the top half while I stay on screen (split), or floats over me with the face kept clear (overlay). says is the line from my script that plays underneath. mirrors is which shot of the reference this scene replaces, which is how the pacing from Part 1's measurements becomes a timeline instead of a table.

For my own footage there's a second file with the same philosophy, the edit decision list: clips with in/out points on word boundaries, punch-ins, inserts and captions, all as data. It's downloadable below. The rule for both files is the same one as for the brand kit: the file is the edit. If something's wrong, I fix the file and re-render; I never patch the output.

The skill that uses it

Part 3 of the prompt makes edit-my-video. It asks which software I edit in, then writes the instructions for using the template there. This matters because the template is renderer-agnostic by design: the brand file and the scene list are facts about my videos, not about a tool.

My own edit-my-video is HyperFrames-first (the whole kit you saw above is HTML), with Premiere and After Effects as the second route. How Claude drives those two apps when their versions are too old for any public MCP is the entire subject of Part 3.

Try it yourself

Before you run the prompt:

• Have my-style first. The template reads its numbers. Without it, Claude falls back to the average again, just more consistently.
• Approve the sheet before Part 3. The prompt stops after the scene stills on purpose. Say what's wrong there; it's six stills, not six videos.
• Name the software honestly. "HyperFrames" if you're fine with files and a terminal. "Premiere" if you want a timeline you can scrub. Both are fine; a vague answer gets a vague skill.

What I learned

• Consistency is a property of code, not of prompts. A better prompt made run 2 better. A template made runs 1–4 identical.
• Templates and skills are different things. The skill decides what to do (cut here, step card there). The template decides how it looks. Keep them separate and each one stays small.
• "Render a sheet" is the best review tool I have. One image of six candidates, answered with a number, beats any amount of describing.
• Six rounds to one. That's the number that convinced me this was worth writing up. It isn't magic; it's the same reason design systems exist.

In Part 3: my Premiere Pro is from 2022 and my After Effects from 2020. No MCP server supported either, so Claude built one. And then it learned to review its own edit before I ever see it.