/flick
Turn a transcript into original scene animations.
Invocation dispatch — do this first
Recognize
in Claude Code and
in Codex. Flick runs transcription, planning, Remotion building, preview, revision, and reusable-animation saving in one workflow.
What this skill does
- Gets a video, public video link, or pasted transcript.
- Creates the timestamped transcript when the source is video.
- Asks for aspect ratio, brand assets, and the user's creative opinion.
- Writes an approval plan with one proposed animation per transcript scene.
- Builds the approved scenes in Remotion with action-matched sound effects.
- Opens Remotion Studio for review, revises the affected scene, and saves selected animations for reuse.
Output directory
Create
in the user's current project. If that directory already exists, create
flick-output-YYYY-MM-DD-HHmmss/
. Use one output directory consistently for every file in that run.
The completed run contains:
text
flick-output/
transcript.json
flick-plan.md
remotion-brief.md
scene-spec.json
brand-assets/
remotion/
scenes/[approved-scene-name]/[approved-scene-name].mp4
scenes/[approved-scene-name]/poster.jpg
Reusable animation library
Flick installs
<flick-skill>/saved-animations/
automatically. Before planning, read
<flick-skill>/saved-animations/README.md
. It is Flick's shared library of editable scene templates. Use an entry only when its visual pattern clearly fits the requested scene. If nothing is a strong fit, create a new scene.
Do not open every component. After identifying a strong catalog match, inspect only that component folder and adapt it with the current transcript and approved assets. Do not reuse private or project-specific imagery from a template.
Workspace setup
Run:
text
node <flick-skill>/scripts/bootstrap.mjs --project <output-directory>
Bootstrap creates the workspace and installs Remotion, bundled FFmpeg, Whisper, yt-dlp, and Flick's bundled sound effects. It requires Node.js 20+, Python 3.9+, and network access. If Node or Python is missing, show the install guidance printed by bootstrap and ask before running a system installer.
Step 1: Create the transcript
Read references/step-1-transcript.md.
Ask exactly:
Send a video/link to transcribe, or paste a transcript.
If the user provides a local video or public video URL, use Flick's bundled timestamped-transcript pipeline:
text
node <flick-skill>/scripts/transcribe.mjs --source <file-or-url> --project <output-directory>
For a public URL, the extractor downloads its audio with yt-dlp. For either a URL or local video, it uses bundled FFmpeg and Whisper to write
<output-directory>/transcript.json
with timestamps. If the user pastes text, store it in the same
format. The transcript is always the script Flick animates.
Then ask exactly, in this order:
- What aspect ratio should this be: 9:16, 16:9, 1:1, or custom?
- Put any logo, fonts, screenshots, product images, or brand guide into
<output-directory>/brand-assets/
- What do you think? Your opinion will make your animation much better.
Gate:
exists and the user has answered those three questions.
Step 2: Plan and get approval
Read references/step-2-plan.md.
Create the proposed scene plan from
, the approved format, selected brand assets, and the user's creative opinion. Follow this step's plan format. Do not create components or
before approval.
Write
<output-directory>/flick-plan.md
. It is the user-facing creative contract. For every transcript scene, include its approved scene name, transcript line(s) and timestamps, what is on screen, text on screen, selected supplied assets, sequential or simulated interaction, sound effect, audio-coupled idea, and transition.
Show the complete plan in chat and ask:
Here are the scenes Flick will build from your transcript. Approve them, or tell me what to change.
Do not write Remotion components before approval.
Gate:
exists and the user has approved it.
Step 3: Build the approved scenes
Read references/step-3-compose.md.
Write:
text
<output-directory>/remotion-brief.md
<output-directory>/scene-spec.json
is the approved build handoff. Write it using
references/remotion-brief-template.md.
is the structured technical companion: IDs, names, transcript timing, frame ranges, components, assets, visual behavior, and sound effects.
Build from the approved
,
,
, and selected assets. Create custom components, register independent compositions, verify renders, and open Studio for review.
Use the shared catalog read at the start of the run. Select a compatible entry only when it is a strong fit, then inspect only that entry's component folder before deciding to adapt it. If no entry is a strong fit, build an original scene.
Build one named Remotion composition per approved scene under
<output-directory>/remotion/src/scenes/
. Register each independently in
; do not create an all-scenes composition. Use frame-driven Remotion motion and copy only selected user brand assets into the Remotion public folder.
Do not add background music. Use bundled sound effects only when they match a visible action: typing, click, impact, reveal, counter, or transition.
Render every named scene before review.
Gate: every approved scene has a rendered preview in
scenes/[approved-scene-name]/
.
Step 4: Preview, revise, and save
Read references/step-4-deliver.md.
Start Remotion Studio from
<output-directory>/remotion/
. Give the user the localhost URL only after Studio starts successfully, then say:
Watch it and tell me what you think. What should change, if anything?
On feedback, revise only the affected scene, render that scene again, and reopen Studio. After acceptance, ask:
Which scene animations should I save as reusable assets?
Save each selected scene's editable component, plus any required local
or
companion files, under
<flick-skill>/saved-animations/[approved-scene-name]/
. Do not save MP4s, posters, or private brand assets in the shared library.
Creative laws
- The transcript defines scene timing unless the user explicitly asks to alter it.
- Every scene must depict a concrete visual animation—not generic text over a background.
- Use only user-supplied brand assets and source material the user has the right to use.
- Do not invent generic scene names. Use names approved in .
- Do not claim a preview, render, or Studio session exists unless its command succeeded.