無料GitHub で公開

generate-video

Generates product demo videos and release walkthroughs via Remotion. Use when creating video documentation or animated demos.

tim-hub/powerball-harness

インストール方法を見る

含まれるファイル（85）

SKILL.md6.6 KB
assets/backgrounds/backgrounds.json4.9 KB
assets/sounds/sounds.json5.7 KB
package.json710 B
references/analyzer.md4.5 KB
references/asset-customization.md11.2 KB
references/best-practices.md8.6 KB
references/direction-guide.md14.6 KB
references/generator.md25.9 KB
references/image-generator.md9.0 KB
references/image-patterns.md14.5 KB
references/image-quality-check.md6.9 KB
references/MIGRATION-11.2.md7.9 KB
references/naming-conventions.md6.0 KB
references/planner.md7.6 KB
references/visual-effects.md11.0 KB
remotion/components/BackgroundLayer.tsx7.5 KB
remotion/components/EmphasisBox.tsx5.9 KB
remotion/components/index.ts1004 B
remotion/components/ProgressIndicator.tsx6.8 KB
remotion/components/README.md8.5 KB
remotion/components/TransitionWrapper.tsx5.7 KB
remotion/tsconfig.json617 B
schemas/animation.schema.json5.2 KB
schemas/assets.manifest.schema.json5.9 KB
schemas/character.schema.json16.0 KB
schemas/direction.schema.json4.5 KB
schemas/emphasis.schema.json8.6 KB
schemas/examples/scenario-example.json1.6 KB
schemas/examples/scene-example.json1.6 KB
schemas/examples/video-script-example.json5.1 KB
schemas/examples/visual-patterns/comparison-example.json1.0 KB
schemas/examples/visual-patterns/concept-example.json2.1 KB
schemas/examples/visual-patterns/flow-example.json1.8 KB
schemas/examples/visual-patterns/highlight-example.json745 B
schemas/README.md8.1 KB
schemas/scenario.schema.json3.6 KB
schemas/scene.schema.json8.2 KB
schemas/validate-schemas-basic.js2.7 KB
schemas/validate-schemas.js6.6 KB
schemas/video-script.schema.json7.6 KB
schemas/visual-patterns.schema.json14.2 KB
scripts/generate-schemas.js6.2 KB
scripts/load-assets.js14.1 KB
scripts/merge-scenes.js15.0 KB
scripts/README.md7.4 KB
scripts/render-video.js14.0 KB
scripts/template-registry.js10.0 KB
scripts/validate-scenario.js8.0 KB
scripts/validate-scene.js4.3 KB
scripts/validate-video.js13.0 KB
src/schemas/animation.ts3.7 KB
src/schemas/assets.manifest.ts2.8 KB
src/schemas/character.ts6.5 KB
src/schemas/direction.ts3.2 KB
src/schemas/emphasis.ts5.2 KB
src/schemas/index.ts423 B
src/schemas/scenario.ts2.7 KB
src/schemas/scene.ts5.5 KB
src/schemas/video-script.ts9.4 KB
src/schemas/visual-patterns.ts8.2 KB
src/types/components.ts6.0 KB
src/types/index.ts108 B
src/types/README.md4.1 KB
src/utils/converters.js5.9 KB
src/utils/converters.ts5.7 KB
src/utils/index.ts109 B
src/utils/README.md6.1 KB
templates/image-prompts/comparison.txt1.3 KB
templates/image-prompts/concept.txt2.3 KB
templates/image-prompts/flow.txt2.8 KB
templates/image-prompts/highlight.txt3.2 KB
templates/intro-3min.json8.9 KB
templates/teaser-90s.json7.0 KB
tests/asset-loader.test.js12.1 KB
tests/character-schema.test.js7.9 KB
tests/converters.test.js8.3 KB
tests/determinism.test.js11.4 KB
tests/e2e/merge-e2e.test.js13.3 KB
tests/e2e/render.test.js6.1 KB
tests/fixtures/minimal-video-script.json1.2 KB
tests/merge-scenes.test.js17.2 KB
tests/schema-validation.test.js3.7 KB
tests/validation-integration.test.js12.9 KB
tests/visual-patterns.test.js12.1 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Generate Video Skill

A collection of skills responsible for automatically generating product explanation videos.

Overview

This skill is used internally by the /generate-video command. It executes the flow of codebase analysis → scenario proposal → parallel generation.

Feature Details

Feature	Details
Best Practices	See references/best-practices.md
Codebase Analysis	See references/analyzer.md
Scenario Planning	See references/planner.md
Parallel Scene Generation	See references/generator.md
Visual Effects Library	See references/visual-effects.md
AI Image Generation	See references/image-generator.md
Image Quality Assessment	See references/image-quality-check.md

Prerequisites

Remotion is set up (/remotion-setup)
Node.js 18+
(Optional) GOOGLE_AI_API_KEY - for AI image generation

`/generate-video` Flow

/generate-video
    │
    ├─[Step 1] Analysis (analyzer.md)
    │   ├─ Framework detection
    │   ├─ Key feature detection
    │   ├─ UI component detection
    │   └─ Project asset analysis (Plans.md, CHANGELOG, etc.)
    │
    ├─[Step 2] Scenario Proposal (planner.md)
    │   ├─ Auto-determine video type
    │   ├─ Scene composition proposal
    │   └─ User confirmation
    │
    ├─[Step 2.5] Asset Generation (image-generator.md) ← NEW
    │   ├─ Determine if assets are needed (intro, CTA, etc.)
    │   ├─ Generate 2 images with Nano Banana Pro
    │   ├─ Claude assesses quality (image-quality-check.md)
    │   └─ OK → adopt / NG → regenerate (up to 3 times)
    │
    └─[Step 3] Parallel Generation (generator.md)
        ├─ Parallel scene generation (Task tool)
        ├─ Integration + transitions
        └─ Final rendering

Execution Steps

User runs /generate-video
Verify Remotion setup
Analyze codebase with analyzer.md
Propose scenario with planner.md + user confirmation
Parallel generation with generator.md
Completion report

Video Types (by funnel stage)

Type	Funnel Stage	Approx. Length	Auto-detection Criteria	Core Structure
LP/Ad Teaser	Awareness → Interest	30-90s	New project	Pain → Result → CTA
Intro Demo	Interest → Consideration	2-3 min	UI changes detected	Complete 1 use case
Release Notes	Consideration → Conviction	1-3 min	CHANGELOG updated	Before/After focused
Architecture Overview	Conviction → Decision	5-30 min	Major structural changes	Production use + evidence
Onboarding	Retention & Adoption	30s - several min	First-time setup	Shortest path to Aha moment

Details: references/best-practices.md

Scene Templates

90-second Teaser (for LP/ads)

Time	Scene	Content
0-5s	Hook	Pain or desired outcome
5-15s	Problem+Promise	Target user and promise
15-55s	Workflow	Signature workflow
55-70s	Differentiator	Basis for differentiation
70-90s	CTA	Next step

3-minute Intro Demo (for consideration)

Time	Scene	Content
0-10s	Hook	Conclusion + pain
10-30s	UseCase	Use case declaration
30-140s	Demo	Full walkthrough on actual screens
140-170s	Objection	Address one common concern
170-180s	CTA	Call to action

Common Scenes

Scene	Recommended Duration	Content
Intro	3-5s	Logo + tagline
Feature Demo	10-30s	Playwright capture
Architecture Diagram	10-20s	Mermaid → animation
CTA	3-5s	URL + contact

Detailed templates: ${CLAUDE_SKILL_DIR}/references/best-practices.md

Audio Sync Rules (Important)

Strictly follow these rules for narrated videos:

Rule	Value
Audio start	Scene start + 30f (1-second wait)
Scene length	30f + audio length + 20f padding
Transition	15f (overlap with adjacent scenes)
Scene start calculation	Previous scene start + previous scene length - 15f

Pre-check: Verify audio length with ffprobe before designing scenes

Details: ${CLAUDE_SKILL_DIR}/references/generator.md

BGM Support

Item	Recommended Value
With narration	bgmVolume: 0.20 - 0.30
Without narration	bgmVolume: 0.50 - 0.80
File location	`public/BGM/`

Details: ${CLAUDE_SKILL_DIR}/references/generator.md

Subtitle Support

Rule	Value
Subtitle start	Same as audio start
Subtitle duration	Audio length + 10f
Font	Base64 embedding recommended

Details: ${CLAUDE_SKILL_DIR}/references/generator.md

Visual Effects Library

A collection of effects for impactful videos:

Effect	Use Case
GlitchText	Hook, titles
Particles	Background, CTA convergence
ScanLine	Analysis in-progress effect
ProgressBar	Parallel processing display
3D Parallax	Card display

Details: references/visual-effects.md

Notes

If Remotion is not set up, guide users to /remotion-setup
Number of parallel generations auto-adjusts based on scene count (max 5)
Generated videos are output to the out/ directory
AI-generated images are saved to out/assets/generated/
When GOOGLE_AI_API_KEY is not set, image generation is skipped (existing assets or placeholders are used)

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

allow1

無料

Use when generating, vectorizing, or converting images to SVG — logos, icons, illustrations, or 'allow1'/'quiver' references.

日本語の概要は準備中です。原文の説明を表示しています。