reelkit-cli 0.8.0 → 0.10.2

package/README.md

@@ -1,6 +1,8 @@
 # Reelkit
 
-A CLI and a Claude skill for making short-form video. Claude plans the video and writes the motion design; `reelkit` searches a shared asset library, records voiceover, generates what is missing, checks the composition and renders it on your machine with Remotion.
+A CLI and a Claude skill for making short-form video. Claude plans the video and writes the motion design; `reelkit` searches a shared asset library, records voiceover, generates what is missing, checks the composition and renders it on your machine with HyperFrames.
+
+Rendering uses `@hyperframes/engine` with Reelkit's seekable React adapter. Author compositions and library components in TSX, importing animation primitives from `reelkit/frame` and the kit from `reelkit/kit`. The build produces an HTML page; HyperFrames captures its frames and encodes video with FFmpeg. Fonts are bundled locally, including Hebrew. Use `REELKIT_CHROME_PATH` to select a browser; an installed Chrome is detected automatically, with a downloaded headless browser as the fallback. Previously published components have their legacy imports upgraded when pulled.
 
 ## Requirements
 
@@ -23,6 +25,16 @@ reelkit auth login
 
 It installs for every agent it finds on your machine. Name one with `--agent claude`, or use `--agent all`. `reelkit init` and `reelkit auth login` keep the installed skill up to date on their own; set `REELKIT_NO_AUTO_INSTALL=1` to turn that off.
 
+## Studio pane in Claude Code
+
+In Claude Code 2.1.287 or newer the installed skill is also a mod: a Reelkit pane opens beside the conversation when a project is in reach (`/reelkit-studio` opens it by hand, `/reelkit-studio my-video` on a named project). It has five tabs:
+
+- **Timeline**: scene clips with a filmstrip, on-screen text, the voice with a mark per word and the music with its beats. **Play with timeline** opens `out/studio.html` in your browser, the render playing over that timeline with a draggable playhead, zoom and frame-by-frame keys.
+- **Plan**, **Music**, **Components**: what the project holds, read from its files.
+- **Browser**: search the shared library; **Use** hands the pick to Claude.
+
+The pane only reads the project. Its buttons write a request into the prompt for you to send. The mod lives in `skill/hooks`; check it with `claude plugin validate skill` and `claude plugin test skill`.
+
 ## Use
 
 Ask Claude to make a video. The skill takes it from there. To drive it by hand:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reelkit-cli",
-  "version": "0.8.0",
+  "version": "0.10.2",
   "description": "CLI and Claude skill for making short-form video with a shared asset library.",
   "license": "MIT",
   "author": "Daniel Livshin",
@@ -9,7 +9,7 @@
     "short-form",
     "reels",
     "tiktok",
-    "remotion",
+    "hyperframes",
     "cli",
     "ai-agents",
     "claude-code",
@@ -22,8 +22,8 @@
   },
   "exports": {
     ".": "./src/contract/index.ts",
-    "./kit": "./src/remotion/kit/index.ts",
-    "./root": "./src/remotion/Root.tsx",
+    "./kit": "./src/hyperframes/kit/index.ts",
+    "./root": "./src/hyperframes/Root.tsx",
     "./validate": "./src/render/validate.ts",
     "./component-preview": "./src/render/component-preview.ts",
     "./testing": "./src/testing/fake-api.ts",
@@ -32,7 +32,9 @@
     "./context": "./src/context.ts",
     "./commands/*": "./src/commands/*.ts",
     "./testing/conformance": "./src/testing/conformance.ts",
-    "./static-check": "./src/render/static-check.ts"
+    "./static-check": "./src/render/static-check.ts",
+    "./frame": "./src/hyperframes/frame.tsx",
+    "./host": "./src/hyperframes/host.tsx"
   },
   "files": [
     "bin",
@@ -51,20 +53,57 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@fontsource/alef": "^5.2.0",
+    "@fontsource/amatic-sc": "^5.2.0",
+    "@fontsource/archivo-black": "^5.2.0",
+    "@fontsource/assistant": "^5.2.0",
+    "@fontsource/bebas-neue": "^5.2.0",
+    "@fontsource/bungee-shade": "^5.2.0",
+    "@fontsource/cinzel": "^5.2.0",
+    "@fontsource/creepster": "^5.2.0",
+    "@fontsource/david-libre": "^5.2.0",
+    "@fontsource/frank-ruhl-libre": "^5.2.0",
+    "@fontsource/fredoka": "^5.2.0",
+    "@fontsource/great-vibes": "^5.2.0",
+    "@fontsource/heebo": "^5.2.0",
+    "@fontsource/inter": "^5.2.0",
+    "@fontsource/jetbrains-mono": "^5.2.0",
+    "@fontsource/kanit": "^5.2.0",
+    "@fontsource/karantina": "^5.2.0",
+    "@fontsource/kaushan-script": "^5.2.0",
+    "@fontsource/lilita-one": "^5.2.0",
+    "@fontsource/modak": "^5.2.0",
+    "@fontsource/montserrat": "^5.2.0",
+    "@fontsource/mrs-saint-delafield": "^5.2.0",
+    "@fontsource/noto-sans-hebrew": "^5.2.0",
+    "@fontsource/orbitron": "^5.2.0",
+    "@fontsource/outfit": "^5.2.0",
+    "@fontsource/permanent-marker": "^5.2.0",
+    "@fontsource/playfair-display": "^5.2.0",
+    "@fontsource/roboto": "^5.2.0",
+    "@fontsource/roboto-slab": "^5.2.0",
+    "@fontsource/rubik": "^5.2.0",
+    "@fontsource/rye": "^5.2.0",
+    "@fontsource/sacramento": "^5.2.0",
+    "@fontsource/secular-one": "^5.2.0",
+    "@fontsource/sora": "^5.2.0",
+    "@fontsource/suez-one": "^5.2.0",
+    "@fontsource/syne": "^5.2.0",
+    "@fontsource/unbounded": "^5.2.0",
+    "@fontsource/varela-round": "^5.2.0",
+    "@fontsource/yellowtail": "^5.2.0",
+    "@hyperframes/engine": "0.8.137",
+    "@puppeteer/browsers": "^3.2.3",
     "@react-three/fiber": "^9.8.1",
-    "@remotion/bundler": "^4.0.532",
-    "@remotion/google-fonts": "4.0.532",
-    "@remotion/renderer": "^4.0.532",
-    "@remotion/three": "4.0.532",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/three": "^0.186.0",
     "commander": "^15.0.0",
+    "esbuild": "^0.28.2",
     "ink": "^8.0.0",
     "ink-spinner": "^5.0.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "remotion": "^4.0.532",
     "three": "^0.186.1",
     "tsx": "^4.23.15",
     "typescript": "^5.9.3",

package/skill/.claude-plugin/plugin.json

@@ -0,0 +1,7 @@
+{
+  "name": "reelkit",
+  "version": "0.1.0",
+  "description": "Reelkit studio: a pane with the film's timeline, plan, music, components and the library, and a browser player for the render.",
+  "author": { "name": "Daniel Livshin" },
+  "types": "./types/index.d.ts"
+}

package/skill/SKILL.md

@@ -1,17 +1,29 @@
 ---
 name: reelkit
-description: Produce short-form and explainer videos from an idea plus the user's own screenshots, logo, clips or footage. Searches a shared asset library first, generates only what is missing, and renders locally with Remotion. Use when the user wants to create, edit or assemble a video, turn an app or idea into a demo, or make a promo.
+description: Produce short-form and explainer videos from an idea plus the user's own screenshots, logo, clips or footage. Searches a shared asset library first, generates only what is missing, and renders locally with HyperFrames. Use when the user wants to create, edit or assemble a video, turn an app or idea into a demo, or make a promo.
 ---
 
 # Reelkit
 
-You make the video. The `reelkit` CLI gives you the tools: it holds no model and makes no creative decisions. You write the plan and the motion code yourself, check them with the CLI, and show the user your work at two checkpoints before anything is rendered.
+You make the video. The `reelkit` CLI gives you the tools: it holds no model and makes no creative decisions. You write the plan and the motion code yourself and check them with the CLI. Show the plan and preview for approval when those decisions are still open; an explicit request to render, or approval already given in the conversation, authorizes that work. For a scoped edit or integration test, continue from the existing project instead of restarting the creative briefing.
+
+Read the material before choosing a treatment. Own routine editing decisions and explain the few that matter: the hook, visual thread, pacing and music direction. Ask only when missing information would materially change the result. Respect the user's chosen style and message; quality comes from a purposeful edit, not a quota of cuts, animations or effects.
+
+For footage, talking heads, screen recordings, mixed media, or an open creative brief, read `reference/studio-editing.md`. It explains how to choose the approach and what this CLI can actually edit. For final verification and platform variants, read `reference/delivery-review.md`.
+
+For image or video cutouts, editable Blender product shots, custom 3D materials, or native Higgsfield motion workflows beyond the kit, read `reference/higgsfield-production.md`. It maps the external tools, their connection requirements and the inspected media handoff back to Reelkit.
+
+To implement a chosen style, read its row in `reference/style-recipes.md` for action, timing, sound and proof. `reference/style-components.md` maps the shared components and built-in kit to shot roles; inspect the selected source before using its props.
+
+This skill targets `reelkit-cli` 0.10.2 and its HyperFrames kit. Check the installed version with `reelkit --version`; in a source checkout, invoke its `bin/reelkit.mjs` with Node. Use the matching CLI before authoring with `reelkit/frame`.
 
 Every command takes `--json` for machine-readable output and exits non-zero with a one-line reason when something is wrong. Read the reason and act on it.
 
 ## Setup (once per machine, then once per video)
 
-1. `reelkit whoami`. If it says you are not logged in, run `reelkit auth login --start` (it returns at once and never opens a browser; plain `reelkit auth login` would wait for a person and block you). Show the user the link it prints (the code is already in it) and wait for them to say they have approved it, then run `reelkit auth login --finish`. If that says it is not approved yet, ask the user again and re-run it. (Plain `reelkit auth login` opens a browser on the user's machine when run in a terminal; `--no-browser` stops that. Still prefer `--start`.)
+Local checks, previews and renders need no account.
+
+1. For work that searches or pulls the shared library, generates media, or records voiceover, run `reelkit whoami`. If it says you are not logged in, run `reelkit auth login --start` (it returns at once and never opens a browser; plain `reelkit auth login` would wait for a person and block you). Show the user the link it prints (the code is already in it) and wait for them to say they have approved it, then run `reelkit auth login --finish`. If that says it is not approved yet, ask the user again and re-run it. (Plain `reelkit auth login` opens a browser on the user's machine when run in a terminal; `--no-browser` stops that. Still prefer `--start`.)
 2. Run `reelkit init <project-name> --aspect 9:16` (`16:9` or `1:1` for other shapes), then work in the folder it prints.
 
 The folder holds everything: `plan.json`, `assets/`, `src/` (your composition and any components you pull), `out/`.
@@ -28,20 +40,20 @@ Add `--footage` for a video the motion design should be laid over. User files st
 If the user points at an existing video ("make one like this", a link or a file), it is a reference: you learn how it is built and make something new in that spirit. Read `reference/references.md`, then `reelkit ref download <url-or-file>` and `reelkit ref analyze <id>`, and look at the frames it saves. Take its structure, pace and motion; never its footage, music or words. A link is fetched on the user's machine and they are responsible for the right to download it; ask before running `reelkit ref analyze` without `--no-transcript`, because the audio (never the video) is sent to Reelkit to be transcribed.
 
 ### 2. Look
-Read `reference/styles.md` and agree the video's look with the user: one of its looks, or their own. If they already described what they want, match it and confirm in one sentence. Ask anything still open in one message, each question with a default. If any on-screen text will be Hebrew, read `reference/hebrew-rtl.md` now: it changes how words may enter and how lines are written.
+Read `reference/styles.md` for techniques that fit the material, and `reference/art-styles.md` when the picture should be drawn. Recommend a direction with a short reason; present a catalogue only if the user asks to compare looks. If they already described what they want, use it. Bundle only consequential open questions. If any on-screen text will be Hebrew, read `reference/hebrew-rtl.md` now: it changes how words may enter and how lines are written.
 
-Ask whether the video has a narrator. If it does not (a product, feature or brand launch carried by music and sound effects), follow `reference/launch-film.md` and write `"voice": "none"` in the plan; the voice step (4) and the captions question below are skipped.
+Infer whether the video needs a narrator from the request and source. Ask only if that choice is consequential and still unclear. For a product, feature or brand launch carried by music and sound effects, follow `reference/launch-film.md` and write `"voice": "none"` in the plan; skip voice generation. Existing recorded speech needs the footage workflow in `reference/studio-editing.md`, not a replacement narrator.
 
-Ask whether they want captions, and which kind: none, one word at a time (`word`), or a few words at a time (`phrase`, the default). "A few words at a time" is `phrase`, never `word`; see `reference/captions.md`. Write the answer into the plan as `captions`.
+Honor the requested captions: none, one word at a time (`word`), or a few words at a time (`phrase`, the default for generated narration). "A few words at a time" is `phrase`, never `word`; see `reference/captions.md`. Use no speech captions in a silent film. Write the choice into the plan as `captions`.
 
-Then read `reference/continuity.md` and offer the user three concepts for the video, each one sentence about the picture (not the product) with a different central idea, and say what carries each scene change. They pick one; write it into the first scene's `notes` beside the look.
+When the central visual idea is still open, read `reference/continuity.md` and propose the strongest fitting concept. If the user wants alternatives, offer up to three concepts, each one sentence about the picture and what carries the changes. If they already chose a concept or asked for a scoped revision, use that direction. Write the chosen idea into the first scene's `notes` beside the look.
 
 ### 3. Plan
 For a film with no narrator, write the plan in the launch-film shape (`"voice": "none"` and a `seconds` for every scene, see `reference/launch-film.md`) and skip the voice choice below.
 
-Read `reference/scriptwriting.md` and `reference/scene-treatments.md` (and `reference/clips.md` if any scene might be a video clip). Write the chosen look into the first scene's `notes`. Run `reelkit assets voices` (women first), pick THREE voices that fit the idea, audience and language, the first a female voice (the default) and at least one male, and show the user the three with one short line each (name, gender, accent, character). Ask which they want, saying the first is used if they do not mind; on no answer or "you choose", use the first. For a film in Hebrew offer the voices marked `he` first, then say that any other voice can also read Hebrew with the current model.
+Read `reference/scriptwriting.md` and `reference/scene-treatments.md` (and `reference/clips.md` if a scene needs a video clip). Write the chosen look into the first scene's `notes`. For generated narration, run `reelkit assets voices` and choose a voice that fits the language, tone and user's preference. Reuse an already chosen voice. Offer a short comparison only when the user asks or the voice is a consequential open decision; do not require a gender mix. For Hebrew, consider voices marked `he` first.
 
-Before writing it, ask the user for real material: screenshots of the product, the real numbers, the logo and the exact product name, and use what they give you (no third-party brand marks). Act each claim out in a small product surface instead of stating it (`reference/kit.md`, "Act the product out"), and choose which claims are highlighted and which are merely mentioned: at most three highlighted in 30 seconds. Prefer 15 to 40 seconds and state the length in the plan's first scene's notes, with the film's one accent colour and a plan of dark and light grounds scene by scene. A film with a narrator-less launch shape also follows `reference/launch-film.md`, section "Structure and briefing".
+Use the real material already supplied: screenshots, footage, numbers, logo and exact names. Ask for a missing item only when the shot depends on it. Demonstrate product claims with real screens and interactions (`reference/kit.md`, "Act the product out"); a personal story or documentary does not need an invented product surface. Keep a small number of main ideas, state the intended duration and visual thread in the first scene's `notes`, and choose grounds by meaning and contrast. A short promo often fits 15 to 40 seconds; honor a different requested length. A film with a narrator-less launch shape also follows `reference/launch-film.md`.
 
 Write `plan.json`:
 
@@ -70,7 +82,7 @@ Write `plan.json`:
 }
 ```
 
-- 3 to 8 scenes. Scene ids are short, unique, lowercase with dashes.
+- 3 to 8 scenes with generated narration; 3 to 16 with `voice: "none"`. These are current plan-schema limits, not an ideal number of edits. Scene ids are short, unique, lowercase with dashes.
 - `treatment` is `motion-graphic`, `illustration`, `clip` or `footage-overlay`. With footage, `mode` is `"footage"` and every scene is `footage-overlay`; otherwise `mode` is `"motion"` and no scene is.
 - `imagePrompt` is set only for `illustration` scenes, with 3 to 6 `imageTags`. Set `shareable` to true only when the prompt is fully generic: no brand, product, person or detail specific to this user.
 - `clipPrompt` is set only for `clip` scenes (a generated or reused video clip is the scene's picture; the rest of the scene uses `imageTags` and `shareable` as an illustration does). Clips are scarce: most videos have none or one or two.
@@ -82,10 +94,10 @@ Write `plan.json`:
 
 Run `reelkit plan check`; it prints the estimated length to tell the user. Fix everything under "Fix these". Act on "Worth improving" unless you have a good reason not to.
 
-**Checkpoint.** Tell the user, in one sentence, that new components you write are shared with the Reelkit library for review after the render (their code, a description and an example, nothing else), and that they can say no: then use `reelkit init <name> --private` (it also keeps the images, clips and graphics generated for the video out of the library, whatever `shareable` says) or `reelkit render --no-share`, or set REELKIT_NO_SHARE=1. Show the user the look, the title, the estimated length, and each scene's narration, the exact on-screen text and one line on the visual, in plain words about what they will see. Wait for a clear yes. A question or a comment is not approval: answer it and ask again.
+**Checkpoint.** Tell the user, in one sentence, that new components you write are shared with the Reelkit library for review after the render (their code, a description and an example, nothing else), and that they can say no: then use `reelkit init <name> --private` (it also keeps the images, clips and graphics generated for the video out of the library, whatever `shareable` says) or `reelkit render --no-share`, or set REELKIT_NO_SHARE=1. Show the user the look, the title, the estimated length, and each scene's narration, the exact on-screen text and one line on the visual, in plain words about what they will see. If the plan is not already approved, wait for a clear yes. A question or a comment is not approval; answer it without treating it as permission to render.
 
 ### 4. Voice
-`reelkit assets voiceover --all`. It records each scene and prints the real length of the video. If the user wants a different voice, change `voiceId` in `plan.json` and run it again with `--redo`.
+For generated narration only, run `reelkit assets voiceover --all`. It records each scene and prints the real length of the video. If the user wants a different voice, change `voiceId` in `plan.json` and run it again with `--redo`.
 
 ### 5. Images and clips
 Read `reference/asset-reuse.md`. For each illustration scene, search first:
@@ -95,29 +107,42 @@ Each result starts with a match percentage: how likely it is good enough to reus
 For each clip scene, read `reference/clips.md`, then search `reelkit assets search "<what the clip shows>" --kind clip` and pull a 60% match (`reelkit assets pull <id> --scene <sceneId>`), or generate: `reelkit assets gen clip --scene <sceneId>` (add `--green` for a green-screen subject). It waits for the clip, which takes minutes; check what is left with `reelkit whoami`.
 
 ### 6. Composition
-Read `reference/kit.md`, `reference/remotion-composition.md`, `reference/motion-design.md`, `reference/continuity.md`, `reference/captions.md`, `reference/beat-sync.md` and, for a narrated film, `reference/voice-sync.md`.
+Read `reference/hyperframes-composition.md` for the seekable HyperFrames timing and media rules. Consult `reference/kit.md` for the components you need, `reference/motion-design.md` and `reference/continuity.md` for new shots, `reference/captions.md` when adding captions, `reference/beat-sync.md` for music timing, and `reference/voice-sync.md` for narrated visuals.
 
 - **Fit the picture to the voice** (narrated films; the whole method is in `reference/voice-sync.md`). The voice is the clock: write the narration first, record it (step 4), and only then place visuals from the real word times with `onWord(s, "word")` (the frame to start an entrance so it lands on its word; `wordFrame` is the word's own frame, `onWordBeat` lets it land on a beat only within 3 frames after the word). Never count words by hand. One visual event per stressed word and at most one every 0.5 s; the thing a word names is on screen within 3 frames of the word starting, never before the previous sentence ends; numbers count up to finish on their word; a list ticks on each item's word; scene changes fall in the gaps between sentences, never inside one; the last word of a sentence is held for the gap, not longer; sound effects for a word's visual sit under the voice at 0.3 or less. `reelkit check` fails on a word the scene never says, and `reelkit preview` renders a frame 4 frames after each word you timed: each of those should already show the thing that word names.
 - Choose the music before you write the composition, and read `reference/beat-sync.md`: `reelkit assets search "<mood and tempo>" --kind music`, then `reelkit assets pull <id> --music`. Scene changes then land on its beat by themselves; bring each element in on a beat inside a scene as that file shows.
 - Search the library before writing a component: `reelkit assets search "<what it shows>" --kind component`. To use one, `reelkit assets pull <id>`: it lands in `src/` and the command prints the import line and an example.
+- When the brief is open ("make it impressive", a launch film, a showreel) and you want to see how others asked for such a video, search the prompt gallery: `reelkit assets search "<kind of video>" --kind prompt`, then `reelkit assets pull <id>` to read the whole prompt in `prompts/`. These are other people's prompts with their author and source: borrow the structure (what they specified: length, beats, style, constraints), never the wording, and never show one in the film. Prompts appear only with `--kind prompt`.
 - Read `reference/sound-design.md`, then find the few sounds the video needs: `reelkit assets search "whoosh" --kind sfx`, `reelkit assets pull <id>`. The pull prints how to reference the file.
-- For one hero moment with real depth (extruded type, a screen floating in space, a ring of cards), read `reference/three-d.md`; everything else stays 2D.
+- For a brand reveal, a transformation, or a shot with real depth, read `reference/brand-motion.md` and `reference/three-d.md`. Choose the move by what it explains, preserve the supplied identity, and share its event frames with the sound cues. Keep reading-heavy shots in 2D; a requested brand film or showreel may use several purposeful 3D moments.
 - For what sits behind the whole film (a video, a picture that changes, or an animated ground), read `reference/backgrounds.md`; pick one ground and keep it.
 - Before writing a new component, read `reference/component-authoring.md`.
-- Write `src/Video.tsx` and any component files beside it. `Video.tsx` may import only `react`, `remotion`, `reelkit/kit` and sibling components (`./Name`).
+- Write `src/Video.tsx` and any component files beside it. `Video.tsx` may import only `react`, `reelkit/frame`, `reelkit/kit` and sibling components (`./Name`).
 - `manifest.json` is the exact object passed to `Video` as the `manifest` prop. Media is referenced as `urls[path]`, where `path` is the file's path in the project, such as `urls[scene.voiceoverKey]` or `urls["assets/lib/<id>/clip.mp3"]`.
 
-Self-review loop after the first `reelkit preview`, on `out/preview/sheet.jpg`: no text smaller than about 28 px at 1080 wide, every claim has a visible demonstration, the grounds alternate as the plan said, and the hero object is present in every scene it should be; fix and preview again, at most two rounds. Run `reelkit check` and fix every error until it passes. Read its "Worth improving" notes as well: they say when no library component was used, when every scene is type and shapes, and when the opening has no picture. Then `reelkit preview` (the first preview on a machine downloads a browser once and can take a minute) and look at every frame in `out/preview/`: each scene has two, `early` (30% into the scene) and `late` (90%), so look at both frames of each scene. Look for: text cut off or overflowing, text overlapping other text or the captions, text too small or too low-contrast for a phone, an empty or broken frame, content hidden behind another layer, and any number, price or quote on screen that is not in the plan. A frame is one moment: an element mid-animation is not a problem, but anything that should be fully on screen by the late frame and is not is. Fix real problems and preview again. Go round at least twice, and finish with the studio test in `reference/motion-design.md`. `reelkit preview` also reports continuity: how many scene changes carry something across. Fix every `cut` it names, or keep it as a deliberate choice (a burst of fast hits, the end card); see `reference/continuity.md`.
+Run `reelkit check` and fix every error. Treat "Worth improving" notes as diagnostics: a deliberate cut or a calm shot can be correct. Run `reelkit preview` (the first preview on a machine may download a browser), inspect the contact sheet and each scene's early, late, word-timed and boundary frames. Check cropped or overlapping text, phone readability, missing media, hidden layers, false claims and identity changes. A mid-animation frame is not a defect by itself; inspect the landing and hold. Fix observed problems, then recheck changed shots. Repeat only for a change or unresolved defect; finish with `reference/delivery-review.md`. Continuity notes should prompt a reason for a cut, not force every shot to morph.
 
-You only ever see frames, never the moving video, so the frames are your eyes. `reelkit preview` writes `out/preview/sheet.jpg`, one labelled picture of all of them: look at it first, then at every frame singly. And whoever built a video is the worst judge of it. If you can start a separate agent, give it only the user's original request and the preview frames (not your explanations) and ask for a score out of 100 per scene, a list of flaws, and a concrete fix for each, in numbers ("raise the title 60 px", "hold the label 0.4 s longer"). Fix, preview, and have the same reviewer look again until every scene passes 90. If two rounds leave a scene under 70, stop and show the user the gap instead of spending more rounds.
+Use frames to inspect layout and the moving video to judge timing and sound when playback is available. `reelkit preview` writes `out/preview/sheet.jpg`, one labelled picture of all of them: look at it first, then at every frame singly. And whoever built a video is the worst judge of it. If independent review is available and authorized, give the reviewer the original request and the preview frames without your explanations. Ask for observable defects and concrete fixes: a cropped logo, unreadable label, missed landing or unintended empty state. Fix those defects and recheck the changed shots; stop iterating when the requested result is achieved.
 
-**Checkpoint.** Show the user the preview frames (both of each scene). Wait for a clear yes. For changes, edit the code, `reelkit check`, `reelkit preview`, and show them again.
+**Checkpoint.** Show the preview frames when the user is choosing the final treatment. If they have already approved rendering or explicitly requested this edit and render, continue within that scope. For requested changes, edit the code, run `reelkit check` and `reelkit preview`, and inspect the updated frames.
 
 ### 7. Render
 `reelkit render`. Give the user the path it prints.
 
+Verify the finished export using `reference/delivery-review.md`; previews alone do not prove audio presence or synchronization. Report the deliverable path, the main creative choices and any verification limitation. Create extra platform variants only when requested or necessary for the stated destinations.
+
 If the render fails, read the error, fix the composition, and run `reelkit check` before rendering again.
 
+## The studio pane
+
+In Claude Code 2.1.287 or newer this skill also loads a mod (`hooks/register.tsx`, read `reference/studio-pane.md` before changing it). It opens a Reelkit pane beside the conversation whenever a project is in reach, and `/reelkit-studio [project folder]` opens it by hand. The pane reads the project's files and follows your `reelkit` commands and edits, so it is current after each step:
+
+- **Timeline**: the film as an editor's timeline (scene clips with a filmstrip from the preview frames, on-screen text, the voice with a mark per word, the music with its beats) and the selected scene's narration. **Play with timeline** writes `out/studio.html` and opens it in the browser: the render playing over the same timeline, with a playhead to drag, zoom, and frame and scene keys. Before a render it steps through the preview frames.
+- **Plan**, **Music**, **Components**: the plan as written, the track, voice and sound effects, and each component in `src/` with its description and source.
+- **Browser**: searches the shared library by kind.
+
+The pane never changes the project by itself. Its buttons (Edit this scene, Change the plan, Use, Render) write a request into the prompt for the user to finish or send; treat such a request as any other from the user. After a preview or a render, tell the user in one line that the pane shows it and that **Play with timeline** plays it.
+
 ## Rules
 
 - Search before generating. Reuse beats regenerate.
@@ -125,7 +150,7 @@ If the render fails, read the error, fix the composition, and run `reelkit check
 - The user's own files (images, footage, sounds) stay private: pass `--share` only when they ask you to contribute a file. Components are the opposite, by default: new components you write are sent to the library for review after the render (source, description and example only), unless the user says no; then use `reelkit init <name> --private` or `reelkit render --no-share` (or REELKIT_NO_SHARE=1).
 - Pass the user's facts through unchanged. Never invent a number, statistic, price or quote.
 - Keep components driven by props, not hardcoded, so they can be reused: nothing of this user's text in them, and every new component starts with a one or two sentence comment saying what it shows and when to use it (`reference/component-authoring.md`).
-- One stage at a time. Do not write composition code before the user has approved the plan, and do not render before they have approved the preview.
+- Resolve open creative decisions before committing to them. Preserve earlier approvals and explicit requests to edit or render; do not add a new approval step for work already authorized.
 - Never say a video is done without having looked at its frames and checked that the file exists.
 - If a command reports that a quota is used up, tell the user what ran out and when it resets. Do not work around it. A message that says to wait a minute or an hour ("Too many searches", "Too many uploads started") is a throttle, not a used-up quota: wait and retry once instead of stopping.
 - Reply in the user's language.

package/skill/THIRD_PARTY.md

@@ -1,6 +1,6 @@
 # Third-party sources
 
-Some guidance in these skills, and some starter-kit components, are adapted from three open-source motion-design skills. The first two target a different renderer (HTML pages captured with Playwright), so their engines, scripts and workflows are not used here; only renderer-independent design principles were taken and rewritten for Remotion.
+Some guidance in these skills, and some starter-kit components, are adapted from three open-source motion-design skills. The first two target a different renderer (HTML pages captured with Playwright), so their engines, scripts and workflows are not used here; only renderer-independent design principles were taken and rewritten for Reelkit’s HyperFrames adapter.
 
 - **Barty-Bart/motion-graphics** (`skills/motion-broll`), MIT License, Copyright (c) 2026 Bart.
   https://github.com/Barty-Bart/motion-graphics
@@ -12,16 +12,16 @@ Some guidance in these skills, and some starter-kit components, are adapted from
 
 - **haidrrrry/claude-remotion-skill** (`remotion-motion-graphics`), MIT License.
   https://github.com/haidrrrry/claude-remotion-skill
-  This one targets Remotion, so more carried over. Adapted into the starter kit (`src/remotion/kit`): the layer stack (background mesh, grade, grain, vignette), the combined entrance, the word-by-word reveal, Ken Burns with pan, spring and easing presets, and the starting palettes. Adapted into the skills: the animation rules, hero-colour rule, hit-hold-build rhythm, safe zones and common layout bugs. Its setup, render and sound-effect steps are not used; this project has its own pipeline.
+  This one targets Remotion, so more carried over. Adapted into the starter kit (`src/hyperframes/kit`): the layer stack (background mesh, grade, grain, vignette), the combined entrance, the word-by-word reveal, Ken Burns with pan, spring and easing presets, and the starting palettes. Adapted into the skills: the animation rules, hero-colour rule, hit-hold-build rhythm, safe zones and common layout bugs. Its setup, render and sound-effect steps are not used; this project has its own pipeline.
 
 - **A "CapCut-style animated captions" skill** supplied by the project owner as pasted text, source repository not stated.
   It burns captions in with FFmpeg subtitle files, which this project does not do. Adapted into the kit's `Captions` component (the pop, highlight and karaoke modes) and the `captions` skill (words per screen, timing, safe zones, contrast, shake and flash limits). Its engagement statistics were left out because they are unsourced.
 
-Used in: `motion-design`, `remotion-composition`, `scriptwriting`, `scene-treatments`, the starter kit, and the preview checklist in `SKILL.md`.
+Used in: `motion-design`, `hyperframes-composition`, `scriptwriting`, `scene-treatments`, the starter kit, and the preview checklist in `SKILL.md`.
 
 ## The 3D typeface
 
-- **Inter** (Bold weight), by the Inter Project Authors (https://github.com/rsms/inter), SIL Open Font License 1.1. It is the one typeface bundled for the kit's `Text3D`, converted to three.js's typeface JSON (the Latin letters, digits, punctuation and a few symbols) and kept as data in `src/remotion/kit/inter-bold-typeface.ts`. The three npm package ships no typeface files, so the glyph outlines were taken from the Inter font files in the `@fontsource/inter` package; the outlines are unchanged apart from scaling to 1000 units to the em. The licence text, as shipped with that package:
+- **Inter** (Bold weight), by the Inter Project Authors (https://github.com/rsms/inter), SIL Open Font License 1.1. It is the one typeface bundled for the kit's `Text3D`, converted to three.js's typeface JSON (the Latin letters, digits, punctuation and a few symbols) and kept as data in `src/hyperframes/kit/inter-bold-typeface.ts`. The three npm package ships no typeface files, so the glyph outlines were taken from the Inter font files in the `@fontsource/inter` package; the outlines are unchanged apart from scaling to 1000 units to the em. The licence text, as shipped with that package:
 
 ```
 Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
@@ -119,4 +119,36 @@ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
 ```
 
-The 3D layer also depends on `three` (MIT), `@react-three/fiber` (MIT) and `@remotion/three` (Remotion's own licence, the same as `remotion`).
+The 3D layer depends on `three` (MIT) and `@react-three/fiber` (MIT). Rendering uses `@hyperframes/engine` (Apache-2.0). Fonts are bundled locally from Fontsource; each family retains its original font licence in its installed package.
+
+## Additional production references
+
+The style recipes and external-production guide summarize the project owner’s supplied CapCut studio-editing reference and reviewed official Higgsfield and HyperFrames documentation. They adapt relevant craft and identify runtime boundaries; external editor code and services are not bundled. Sources: https://higgsfield.ai/skills, https://higgsfield.ai/plugins/blender, https://github.com/heygen-com/hyperframes/tree/main/skills.
+
+## Art-style catalog
+
+`reference/art-styles.md` adapts the fifteen style films and prompts in **Vincentwei1021/mg-styles-15**, https://github.com/VincentWei1021/mg-styles-15. The motion recipes are translated for Reelkit rather than bundling the original renderer. Its MIT notice follows:
+
+```
+MIT License
+
+Copyright (c) 2026 Vincentwei1021
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/skill/commands/launch-film.md

@@ -4,4 +4,4 @@ description: Make a voiceless product launch film with Reelkit
 
 Use the reelkit skill and follow `reference/launch-film.md` to make a launch film with no voice for this product: $ARGUMENTS
 
-Ask for the product's screens and logo first.
+Use the product's supplied screens and logo. Ask only for material a planned shot still needs; continue from the existing project for a revision.

package/skill/hooks/hooks.json

@@ -0,0 +1 @@
+{ "modules": ["./register.tsx"] }