KishoreCR728/project-video

Project-to-Video

Turn any project into a premium marketing video. The skill runs inside the project's repository (or against a URL), analyzes what the product actually is, and produces a Remotion video grounded in real features and real UI.

Golden rule: the pipeline is ANALYZE → STORYBOARD → APPROVE → BUILD → RENDER. Never write Remotion code before the storyboard is approved by the user.

AUTO MODE: If the user's request contains "full auto", "no interruptions", "one go", "autopilot", or otherwise clearly asks for an uninterrupted end-to-end run, switch to auto mode: skip the storyboard approval pause (write video/storyboard.md, state that you're proceeding under auto mode, and continue straight to build), auto-decide any open questions using sensible defaults (explainer archetype, 1080×1920 @ 30fps, brand tokens by the standard priority order), and only stop for genuine blockers (site unreachable, render errors that survive 3 fix attempts). Booting a local dev server still requires explicit user authorization — but treat "full auto" itself as that authorization if the user provided the run command or the repo has an unambiguous standard dev command (npm run dev, docker compose up). In auto mode, still deliver the storyboard alongside the MP4 so the user can review after the fact and request scene-level changes.

Phase 0 — Detect inputs

Establish what you have to work with, in priority order:

1. Live URL (production or UAT/staging) — best source. Ask the user for it if not given.
2. Local dev server — if the repo is present but nothing is running, offer to boot it. Read package.json / docker-compose.yml / Makefile / README to find the dev command. Ask the user to confirm before starting anything (env vars, ports, and databases vary). If it can't be booted, fall back to code-only analysis.
3. Code only — analyze the repo statically; visuals will be pure SVG recreations.

Also ask (or infer from context):

• Which archetype? (explainer / demo / launch / teaser — see references/video-archetypes.md)
• Which aspect ratio(s)? Default: 1080×1920 vertical, 30 fps. Offer 16:9 and 1:1 as extra renders.
• Any brand tokens? Check for a design-token JSON in the repo; else extract colors/fonts from the live site; else use assets/brand-theme.json defaults.

Phase 1 — Analyze the project

Goal: a video/project-brief.md file that every later claim traces back to.

Static analysis — read README, docs/, landing page copy in the repo, route/page structure, feature modules, product name and tagline.

Live analysis (if a URL exists) — run scripts/capture-screens.mjs with Playwright to:

• Screenshot the key pages (home/hero, dashboard, 3–5 core feature screens) at the target aspect ratio and at desktop size
• Record short (3–6s) screen captures of 1–2 core flows if the archetype is demo or launch
• Extract the site's actual colors, fonts, and headline copy

Write video/project-brief.md containing: what the product is, target audience, top 5–7 features (each with the evidence source), visual identity (colors/fonts/logo), and the list of captured assets with file paths.

Rule: no invented features, no exaggerated claims. If it's not in the repo, docs, or live site, it doesn't go in the video.

Phase 2 — Storyboard (mandatory approval gate)

Read references/video-archetypes.md for the chosen archetype's scene structure and duration, then fill in references/storyboard-template.md scene by scene using ONLY material from the project brief.

• Narration is on-screen text, not voiceover. Keep on-screen lines short (max ~8 words per line, max 2 lines at once) and pace them so each is readable (~0.35s per word minimum on screen).
• Budget frames per scene up front so the total exactly matches the archetype duration.
• For each scene, mark which visuals are SVG and which are real UI captures in device frames (hybrid style — see standards doc).
• Include a music & sound suggestion section at the end (genre, BPM feel, where accents land). Do not source or embed audio files.

Save as video/storyboard.md, present it to the user, and STOP. Do not proceed until the user approves or edits it. (Exception: in AUTO MODE, present the storyboard summary and continue immediately without waiting.)

Phase 3 — Build the Remotion project

After approval, read references/remotion-standards.md in full — it contains the required animation values, transition rules, and the hybrid SVG + screenshot device-frame patterns. Then scaffold:

video/
├── remotion.config.ts
├── src/
│   ├── index.ts            # registerRoot
│   ├── Root.tsx            # <Composition> per aspect ratio
│   ├── config.ts           # fps, durations, per-scene frame budget
│   ├── theme.ts            # ALL colors/fonts/spacing — single source of truth
│   ├── scenes/             # one file per storyboard scene
│   ├── components/         # DeviceFrame, CountUp, AnimatedChart, ConnectorLine, ParticleField, TextReveal…
│   └── assets/screens/     # Phase 1 captures (imported via staticFile)

Hard rules:

• Every color, font, radius, and shadow comes from theme.ts. No hardcoded values in scenes.
• Scene durations come from config.ts and must sum to the archetype total.
• All diagram/chart/icon graphics are inline SVG. Real product UI appears only inside DeviceFrame components using the Phase 1 screenshots — never fake a product screenshot with SVG when a real one exists.
• TypeScript throughout, Remotion 4.x, @remotion/transitions for scene changes.

Phase 4 — Preview, render, deliver

1. npx remotion studio — verify every animation, check text readability at real playback speed, confirm timing.
2. Fix issues, then npx remotion render <CompositionId> out/<archetype>-vertical.mp4.
3. Render additional aspect ratios if requested.
4. Deliver: MP4(s), storyboard.md, project-brief.md, and the editable project. Mention that theme.ts and config.ts are the two files to tweak for re-branding or re-timing.

Reference files

• references/video-archetypes.md — scene structures + durations for explainer (60s), demo (75–90s), feature launch (30s), teaser (15s). Read during Phase 0/2.
• references/storyboard-template.md — the per-scene table format. Read during Phase 2.
• references/remotion-standards.md — animation values, transitions, hybrid device-frame patterns, SVG rules. Read fully before Phase 3.
• scripts/capture-screens.mjs — Playwright capture script. Run during Phase 1 (node scripts/capture-screens.mjs <url> <outDir>; requires npm i playwright + npx playwright install chromium).
• assets/brand-theme.json — fallback brand tokens; override with project-extracted values whenever possible.