원클릭으로 Manus에서 모든 스킬 실행

eva-product-video

스타93

포크6

업데이트2026년 7월 8일 18:16

Produce polished, mobile-friendly product demo videos of the eva app with Remotion — 1280×720, snappy beat-synced hard cuts, energetic clap music, and footage captured from the REAL running app via agent-browser (no mockups). Use this whenever the user wants to make, update, re-cut, re-score, re-capture, or re-render an eva demo/product/launch/Twitter video or screen-recording walkthrough, or mentions the `video/` Remotion project — even if they don't say "Remotion". It encodes hard-won defaults (resolution, zoom/framing, theme, pacing, music sync, rendering, QA) so you don't repeat past mistakes.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

vvedantb

vvedantb/eva

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

eva product video

Make a high-end product video of the eva app (Linear/Notion quality) using the existing Remotion project at video/. Footage comes from the real app, captured with agent-browser.

The canonical project already exists — reuse it, don't start over.

Project: video/ · primary composition: EvaHero (video/src/EvaHero.tsx)
Render output: video/out/eva-demo.mp4
Reusable components in video/src/components/: Backdrop, AppWindow, EvaMark, HeroCaption (+ Accent), Cursor, Spotlight, StatCounter, SnapIn, tokens.
Helper scripts in video/scripts/: stills.mjs, gen-music.mjs, check-audio.mjs.

To make a NEW video: re-capture screens for the new story, edit the scene list / captions / durations in EvaHero.tsx, regenerate the music to match the cut times, render, QA.

Non-negotiable defaults (learned the hard way — change only with a reason)

These exist because each was a mistake first. Keep them unless the user overrides.

1280×720, 30fps. Not 1080p. The eva UI is a dense desktop app; at 1080p it reads "too zoomed / too big" on a phone. 720p is the mobile-friendly sweet spot for Twitter/X.
Capture at the frame's native layout, show full-bleed. Set the browser viewport to 1280×720 when capturing, then display the screenshot full-bleed at 1:1 (it fills the whole frame). This is the single biggest quality lever:
- Capturing at 2560×1440 and downscaling to 720p makes UI text ~half-size → looks "zoomed out" and unreadable on mobile.
- Cropping/zooming the camera into a region shows awkward fragments of the UI.
- A 1280-wide layout shown 1:1 = native element sizes = readable + "zoomed in" + crisp.
Real footage, finished states. Drive the actual app with agent-browser. Record already-completed work (merged tasks, diffs, PRs) — do NOT wait on live agent runs (sandboxes are stopped; live runs are slow and flaky). Stage clean inputs (e.g. type a tidy task title into the New Task modal). See references/capture-workflow.md.
Snappy, hard-cut, beat-synced. ~20s total. Cut on the beat (use <Series>, not long crossfades), pop each scene in with SnapIn, snap captions in fast. Boring = too long + too many slow crossfades.
Clap music synced to every cut. Generate an energetic drum bed (gen-music.mjs) where an accent clap lands on each scene cut. The cut times in the music script must match the scene durations in EvaHero.tsx. See references/remotion-build.md → Music.
Match eva's theme. Near-black #050606, indigo accent #818cf8, brand mark gradient purple #8B3FB8 → blue #3B7DD8, fonts Inter + JetBrains Mono. All in video/src/components/tokens.ts. Never invent brand colors.
Be honest + protect confidentiality. Use the user's OWN repo (vvedantb/eva), never client repos (Evalucom/CarePulse). Don't show the "Codebases" home (lists client repos). Flag any visible PID (the demo email, real names) before the user posts publicly. Captions describe the product truthfully — don't imply a feature the screen doesn't show.

Workflow

Work in this order; each step has a detailed reference file — read it before doing the step.

Plan the story. Default hero flow (8 scenes, ~20s): title → describe a task → Eva writes code → review & ship PR → board → projects → proof (count-up stats) → outro. Pick the scenes and one-line captions first.
Capture footage → read references/capture-workflow.md. Start the app (pnpm dev), sign in as the agent user, set viewport 1280×720, screenshot each screen into video/public/captures/.
Compose / edit → read references/remotion-build.md. Edit EvaHero.tsx: scene list, durations (multiples of the beat), captions, the cursor path for the input scene. Reuse the existing components.
Score it → read references/remotion-build.md → Music. Set CUT_SECONDS in gen-music.mjs to the scene-cut times, run it, confirm MUSIC = true.
Render + QA. You can't preview the mp4 directly (no system ffmpeg, and you can't watch video) — so QA with still frames:
```
cd video
node scripts/stills.mjs "37,131,210,300,510"   # bundle once, render these frames as PNGs
```
Read the PNGs in video/out/ to check framing, zoom, captions, cursor. Then render + verify:
```
npx remotion render EvaHero out/eva-demo.mp4 --codec=h264 --image-format=png
node scripts/check-audio.mjs   # confirms duration, 1280×720, and an embedded audio track
```
--image-format=png keeps UI text crisp. Iterate on stills until it's right, then render.

Quick reference

Need	Command (run from `video/`)
Live preview / scrub	`npm run dev` (Remotion Studio)
Render the hero video	`npx remotion render EvaHero out/eva-demo.mp4 --codec=h264 --image-format=png`
QA specific frames	`node scripts/stills.mjs "12,131,300"`
Regenerate music	`node scripts/gen-music.mjs` (after setting `CUT_SECONDS`)
Verify output file	`node scripts/check-audio.mjs`

Gotchas that cost time before

Sign-in URL is /?agent=true (boolean), not /?agent — the route validates agent as a zod boolean and /?agent throws "Expected boolean, received string". If the callback hangs on "Signing in…" with You're already signed in, just navigate straight to the target page.
Pin all @remotion/* packages to the same exact version or the bundler errors.
Music can't be auditioned by Claude. The generated beat does exactly what's asked (claps on cuts) but tell the user to listen and swap for a licensed track if they want — set MUSIC=false in EvaHero.tsx for silent.
Captions carry the message — most Twitter playback is muted, so every scene needs a caption.

Detailed how-tos: references/capture-workflow.md (footage) and references/remotion-build.md (composition, theme, music, rendering, QA).

이 저장소의 다른 Skills

같은 저장소

caveman-commit

vvedantb/eva

Ultra-compressed commit message generator. Cuts noise from commit messages while preserving intent and reasoning. Conventional Commits format. Subject ≤50 chars, body only when "why" isn't obvious. Use when user says "write a commit", "commit message", "generate commit", "/commit", or invokes /caveman-commit. Auto-triggers when staging changes.

2026-07-0893

caveman-compress

vvedantb/eva

Compress natural language memory files (CLAUDE.md, todos, preferences) into caveman format to save input tokens. Preserves all technical substance, code, URLs, and structure. Compressed version overwrites the original file. Human-readable backup saved as FILE.original.md. Trigger: /caveman-compress FILEPATH or "compress memory file"

2026-07-0893

caveman-help

vvedantb/eva

Quick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".

2026-07-0893

caveman-review

vvedantb/eva

Ultra-compressed code review comments. Cuts noise from PR feedback while preserving the actionable signal. Each comment is one line: location, problem, fix. Use when user says "review this PR", "code review", "review the diff", "/review", or invokes /caveman-review. Auto-triggers when reviewing pull requests.

2026-07-0893

caveman

vvedantb/eva

Ultra-compressed communication mode. Cuts output tokens 65% (measured) by speaking like caveman while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra, wenyan-lite, wenyan-full, wenyan-ultra. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.

2026-07-0893

clerk-backend-api

vvedantb/eva

Clerk Backend REST API explorer and executor. Browse tags, inspect endpoint schemas, and execute authenticated requests. Use when listing users, managing organizations, or calling any Clerk API endpoint.

2026-07-0893

name

eva-product-video

description

eva product video

Make a high-end product video of the eva app (Linear/Notion quality) using the existing Remotion project at video/. Footage comes from the real app, captured with agent-browser.

The canonical project already exists — reuse it, don't start over.

Project: video/ · primary composition: EvaHero (video/src/EvaHero.tsx)
Render output: video/out/eva-demo.mp4
Reusable components in video/src/components/: Backdrop, AppWindow, EvaMark, HeroCaption (+ Accent), Cursor, Spotlight, StatCounter, SnapIn, tokens.
Helper scripts in video/scripts/: stills.mjs, gen-music.mjs, check-audio.mjs.

To make a NEW video: re-capture screens for the new story, edit the scene list / captions / durations in EvaHero.tsx, regenerate the music to match the cut times, render, QA.

Non-negotiable defaults (learned the hard way — change only with a reason)

These exist because each was a mistake first. Keep them unless the user overrides.

1280×720, 30fps. Not 1080p. The eva UI is a dense desktop app; at 1080p it reads "too zoomed / too big" on a phone. 720p is the mobile-friendly sweet spot for Twitter/X.
Capture at the frame's native layout, show full-bleed. Set the browser viewport to 1280×720 when capturing, then display the screenshot full-bleed at 1:1 (it fills the whole frame). This is the single biggest quality lever:
- Capturing at 2560×1440 and downscaling to 720p makes UI text ~half-size → looks "zoomed out" and unreadable on mobile.
- Cropping/zooming the camera into a region shows awkward fragments of the UI.
- A 1280-wide layout shown 1:1 = native element sizes = readable + "zoomed in" + crisp.
Real footage, finished states. Drive the actual app with agent-browser. Record already-completed work (merged tasks, diffs, PRs) — do NOT wait on live agent runs (sandboxes are stopped; live runs are slow and flaky). Stage clean inputs (e.g. type a tidy task title into the New Task modal). See references/capture-workflow.md.
Snappy, hard-cut, beat-synced. ~20s total. Cut on the beat (use <Series>, not long crossfades), pop each scene in with SnapIn, snap captions in fast. Boring = too long + too many slow crossfades.
Clap music synced to every cut. Generate an energetic drum bed (gen-music.mjs) where an accent clap lands on each scene cut. The cut times in the music script must match the scene durations in EvaHero.tsx. See references/remotion-build.md → Music.
Match eva's theme. Near-black #050606, indigo accent #818cf8, brand mark gradient purple #8B3FB8 → blue #3B7DD8, fonts Inter + JetBrains Mono. All in video/src/components/tokens.ts. Never invent brand colors.
Be honest + protect confidentiality. Use the user's OWN repo (vvedantb/eva), never client repos (Evalucom/CarePulse). Don't show the "Codebases" home (lists client repos). Flag any visible PID (the demo email, real names) before the user posts publicly. Captions describe the product truthfully — don't imply a feature the screen doesn't show.

Workflow

Work in this order; each step has a detailed reference file — read it before doing the step.

Plan the story. Default hero flow (8 scenes, ~20s): title → describe a task → Eva writes code → review & ship PR → board → projects → proof (count-up stats) → outro. Pick the scenes and one-line captions first.
Capture footage → read references/capture-workflow.md. Start the app (pnpm dev), sign in as the agent user, set viewport 1280×720, screenshot each screen into video/public/captures/.
Compose / edit → read references/remotion-build.md. Edit EvaHero.tsx: scene list, durations (multiples of the beat), captions, the cursor path for the input scene. Reuse the existing components.
Score it → read references/remotion-build.md → Music. Set CUT_SECONDS in gen-music.mjs to the scene-cut times, run it, confirm MUSIC = true.
Render + QA. You can't preview the mp4 directly (no system ffmpeg, and you can't watch video) — so QA with still frames:
```
cd video
node scripts/stills.mjs "37,131,210,300,510"   # bundle once, render these frames as PNGs
```
Read the PNGs in video/out/ to check framing, zoom, captions, cursor. Then render + verify:
```
npx remotion render EvaHero out/eva-demo.mp4 --codec=h264 --image-format=png
node scripts/check-audio.mjs   # confirms duration, 1280×720, and an embedded audio track
```
--image-format=png keeps UI text crisp. Iterate on stills until it's right, then render.

Quick reference

Need	Command (run from `video/`)
Live preview / scrub	`npm run dev` (Remotion Studio)
Render the hero video	`npx remotion render EvaHero out/eva-demo.mp4 --codec=h264 --image-format=png`
QA specific frames	`node scripts/stills.mjs "12,131,300"`
Regenerate music	`node scripts/gen-music.mjs` (after setting `CUT_SECONDS`)
Verify output file	`node scripts/check-audio.mjs`

Gotchas that cost time before

Sign-in URL is /?agent=true (boolean), not /?agent — the route validates agent as a zod boolean and /?agent throws "Expected boolean, received string". If the callback hangs on "Signing in…" with You're already signed in, just navigate straight to the target page.
Pin all @remotion/* packages to the same exact version or the bundler errors.
Music can't be auditioned by Claude. The generated beat does exactly what's asked (claps on cuts) but tell the user to listen and swap for a licensed track if they want — set MUSIC=false in EvaHero.tsx for silent.
Captions carry the message — most Twitter playback is muted, so every scene needs a caption.

Detailed how-tos: references/capture-workflow.md (footage) and references/remotion-build.md (composition, theme, music, rendering, QA).