メニュー
WHAT: Remotion video production system — React-based programmatic video creation with audio sync WHEN: Building explainer videos, tutorials, or any programmatic video content
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
WHEN building any customer-facing content, funnel, page, email, call script, or offer structure THEN apply the AIDA fractal at every scale — each value ladder stage has its own AIDA cycle, each piece of content has AIDA within AIDA, and the customer journey is a Hero's Journey where the customer convinces themselves to go because they already believe themselves to be the hero.
WHAT: Dan Kennedy's framework for ascending customers through the value ladder — retention through progression WHEN: When applying direct marketing ascension knowledge
WHAT: Dan Kennedy's adaptation of Dale Carnegie's "make them feel important" for direct marketing WHEN: When applying direct marketing carnegie secret knowledge
WHAT: Dan Kennedy's Direct Marketing Diet — 6-step framework for direct marketing success WHEN: When applying direct marketing diet knowledge
WHAT: Craig Proctor's 8 Breakthrough Strategies for direct marketing success WHEN: When applying direct marketing eight breakthroughs knowledge
WHAT: Dan Kennedy's Follow-Up Framework — the 4-step structured follow-up campaign, closed loop systems, and the "no-fail" follow-up strategy. From No B.S. Direct Marketing. WHEN: When applying direct marketing follow up knowledge
| name | remotion-video-production |
| description | WHAT: Remotion video production system — React-based programmatic video creation with audio sync WHEN: Building explainer videos, tutorials, or any programmatic video content |
Remotion is a React framework for programmatic video creation. Videos are React components rendered frame-by-frame.
/tmp/remotion-test/ — Full project with node_modules, 16 scenes of audio, shot lists
src/Composition.tsx — Main composition (currently empty, build here)audio/ — Generated TTS MP3s + timing.json per sceneAUDIO_SYNC_PLAN.md — Frame-accurate duration mapping for all scenesVIDEO_PIPELINE.md — Assembly workflow (Remotion + OBS + FFmpeg)SHOT_LIST.md — Shot-by-shot breakdownSCRIPT_HJ.md — Full Hero's Journey script.claude/skills/remotion-best-practices/ — 30+ rule files for Remotion patternsimport { Audio, Series, useCurrentFrame, interpolate, staticFile } from 'remotion';
import timing from '../audio/scene1_hj/timing.json';
const Scene1: React.FC = () => {
const frame = useCurrentFrame();
return (
<Series>
{timing.map((t, i) => (
<Series.Sequence key={i} durationInFrames={t.frames}>
<div style={{opacity: interpolate(frame, [0, 15], [0, 1])}}>
{t.sentence}
</div>
<Audio src={staticFile(`audio/scene1_hj/${t.file}`)} />
</Series.Sequence>
))}
</Series>
);
};