Tour

Your first video, step by step.

This page is for someone who has never opened the repo. In about an hour you will have the tools installed, one video's first frames on screen, and a clear idea of where everything lives.

What you need

You also need a few GB of free disk space (Remotion downloads a browser the first time) and an internet connection for the install. No video editing experience is needed, but a sense of what you want to see helps a lot.

Clone and install

1. Get the repo.

   git clone https://github.com/AnnasMustafaDev/video-studio.git
   cd video-studio

2. Install the skills. Skills are instruction packs Claude loads on demand. This copies them into ~/.claude/skills and backs up any you already have.

   node tools/install-skills.mjs

3. Install the studio. This is the Remotion project where videos are built.

   cd studio
   npm install

4. Add the official Remotion skills. They are not stored in this repo (their upstream has no licence), so you fetch them yourself. The versions are pinned in skills-lock.json.

   npx remotion skills add

5. Prove it works. This renders five frames of the showcase video and tiles them into one image. Open studio/out/stills/LibraryShowcase/contact-sheet.png to look at it.

   npm run stills -- LibraryShowcase 50,130,245,350,449

6. Optional: preview live. Opens Remotion Studio in your browser, with a timeline you can scrub. Stop it with Ctrl+C.

   npm run dev

Your first video, in seven moves

Open a second terminal at the repo root and run claude. Then work through these stages. The point is that you never ask for the whole video at once: each move ends with something you can look at and approve.

1. Write a brief. Say what the video is for, how long, which format, the mood and the exact words on screen. Prompt 40-brief-template gives you the fields. A weak brief gives you a generic video.
2. Get three directions. Ask for three genuinely different looks and no code yet. The motion-director skill does this, with prompt 10-creative-directions. Pick one, or mix.
3. Approve a storyboard. Prompt 11-storyboard returns a timed table of scenes with first and last frame, exact text, motion, easing, transition and sound cue. Read it like a script, and change anything you do not like now, while it is cheap.
4. Build one scene. Prompt 12-build-one-scene, handled by the remotion-studio skill. Claude writes only scene 1, renders stills and a contact sheet, looks at them and fixes what is wrong. This first scene sets the standard for every other one.
5. Review it strictly. Prompt 13-quality-review, ideally by a fresh agent that did not build it (motion-review). It scores the frames and lists the five worst defects with fixes. Fix them, re-render.
6. Build the rest. Prompt 14-build-next-scene, one scene at a time, reviewing as you go. Then sound (50), other formats such as 9:16 (52) and the final render with checks (53).
7. Feed lessons back. Prompt 70-post-mortem writes what you learned into the skills, so the next video starts smarter.

The full ordered list, with a diagram, is in Prompts. The Skills page says what each skill is for.

Repo map

Everything sits at the top level, so you can find it without a search.

The engines: which one when

A video can be made in more than one way. This table is the quick answer, and the default is Remotion.

How to ask Claude

Good requests name the stage, the format, the look and the exact text, and they say what not to do yet. Copy one of these and replace the placeholders.

New video: 20 s launch teaser (16:9, 30 fps) for my side project <name>.
Goal: people understand what it does in the first 5 s.
Mood: calm and confident. Look: off-white background, near-black type, one blue accent.
Exact text: "<headline>" then "<one-line promise>".
Give me three creative directions and recommend one. No code yet.

Direction B. Storyboard it.
Give me a timed scene table: first and last frame, focal point, exact text,
animation, easing, transition and sound cue per scene, plus a hits table for sound.
Keep every scene to one focal point. Stop after the table so I can edit it.

Build scene 1 only, in studio/src/videos/<slug>/.
Use components from studio/src/lib and the design tokens, nothing hand-rolled.
Render stills at the key frames and a contact sheet, open them, and fix what looks wrong.
Tell me plainly if you could not look at the images.

Strict review of the rendered frames, from a fresh pair of eyes.
Score typography, hierarchy, spacing, timing, easing, transitions, consistency and pacing
with frame evidence. Give me the five worst defects with concrete fixes and a
READY or ANOTHER ROUND verdict.

Analyse this reel: <path or link>. Break down composition, type, motion, timing and sound,
and separate what you can see from what you are guessing.
Then plan a video for <my app> with the same feel. Keep the principles, not the branding.

Glossary

The words you will meet in the prompts and in Claude's answers.

Troubleshooting and FAQ

A 7-day learning plan

One small piece per day, each with a ready prompt in prompts/learning/. By day seven you have made a title, a type sequence, a UI demo, a chart, a teaser and a sound-designed cut, and copied a style you admire.

Where to go next