Phase 1   Content Creation
   1.1  Identify User Input
   1.2  One-time output of script.md + outline.md
        (Voiceover script + development plan)
   ▼
[Checkpoint Plan]      ← Must pause. Align on 5 items at once:
                         Script / Outline / Theme / Assets / Development Mode
   ▼
Phase 2   Web Development
   2.1  Scaffold (based on selected theme)
   2.2  Chapter 1 = Main thread + complete version (mandatory anchor)
        ▼
        [Hard Node] User acceptance of Chapter 1 ← Cannot skip
        ▼
   2.3  Chapters 2~N (per selected mode: A Chapter-by-Chapter / B Sequential / C Parallel)
   ▼
[Checkpoint Audio]     ← Must pause. Whether to synthesize audio
   ▼
Phase 3   Audio Synthesis (Optional)
   ▼
Phase 4   Screen Recording + Post-production

my-video/
├── article.md          # Required if user provides original text — Do NOT delete! Source of screen information during development
├── script.md           # Required: Bilibili-style voiceover script (determines beats)
├── outline.md          # Required: Development plan (chapter split + content per step + information pool)
└── presentation/       # Vite + React + TS project generated by scaffold
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx     # Visual implementation
    │   ├── <Chapter>.css
    │   └── narrations.ts     # ★ Single source of truth for step count + voiceover text
    ├── scripts/
    │   ├── extract-narrations.ts   # Scan all narrations.ts → audio-segments.json
    │   └── synthesize-audio.sh     # Call mmx to synthesize mp3
    ├── audio-segments.json         # Output of extract (review before synthesis)
    └── public/audio/<id>/<N>.mp3   # Optional: Synthesized audio

Content plan completed, deliverables:
  📄 article.md     {retained if user provided original text}
  📄 script.md      {X} words / ~{T} minutes
  📄 outline.md     {N} chapters / {M} steps + per-chapter information pool + asset list at the end

Chapter Overview:
  1. <id>     <Chapter Title>    <S> steps ~<T>s
  2. ...

Next, align on 5 items at once:

  1. Do you need to modify the script (script.md)?
     You can edit the file directly, or tell me the modification direction verbally.

  2. Do you need to modify the development plan (outline.md)? Focus on:
     - Is chapter split / step count / estimated time reasonable (reasonable judgment: 30~60s per chapter)
     - Is screen content per step clear
     - Does the "information pool" in the first paragraph of each chapter have enough article details for screen design
     - Is the asset list at the end complete

  3. Which theme to choose? My recommendations:
     ★ <Recommendation 1: nameZh (id)> — Because <bestFor match>; <descriptionZh summary>
     ★ <Recommendation 2 / Recommendation 3>
     Other options: <Remaining themes, nameZh + one sentence>
     I can also help you create a new theme (see themes/THEMES.md for details).

  4. How to prepare real assets? Rough list of images needed for this video: <list rough items>
     a) I will pick from <existing asset path>   b) You provide them yourself   c) Use placeholder for all

  5. Which development mode to choose?

     **Chapter 1 must be completed in main thread + user acceptance regardless of mode** (mandatory anchor).
     Differences start from Chapter 2:

     A) Default · Chapter-by-Chapter Confirmation (Recommended)
        Pause for acceptance after each chapter is completed → Low risk / most stable rhythm
     B) Sequential Development After Chapter 1 (No Parallel)
        Complete Chapters 2~N sequentially in main thread then accept uniformly → Medium speed / suitable for agents that do not support parallel tasks
     C) Parallel Development After Chapter 1 (subagent)
        Use subagent to complete Chapters 2~N in parallel → Fastest / user controls parallel count (how many chapters at once)
        ⚠️ Style differences between chapters are expected (theme constraints ensure consistency)

bash .cursor/skills/web-video-presentation/scripts/scaffold.sh \
  ./presentation \
  --theme=<user-selected theme id>

bash .cursor/skills/web-video-presentation/scripts/scaffold.sh --list-themes

rm -rf presentation/src/chapters/01-example

Chapter 1 <id> is completed, dev server is running at localhost:5173.

Acceptance Focus:
  □ Is the visual vibe correct? Does it meet the expectation of <theme nameZh>?
  □ Is the rhythm correct? Are some steps too fast / too slow / too thin on information?
  □ Is content-driven animation in place? Or are some steps just mindless entrance animations?
  □ Dual-source principle: Does the screen have details that "are not mentioned in voiceover but can be linked to article"?
  □ Anti-AI check: Are there purple-pink gradients / rounded colored borders / fake illustrations / emojis?

Tell me any issues, and I will modify accordingly. Let me know "continue" when it's OK, and I will proceed with Chapters 2 and beyond according to the selected mode.

Web page completed, {N} chapters {M} steps, dev server is running at localhost:5173.

Do you want to synthesize audio for "auto-play screen recording"?
  ✓ Synthesize → Scan narrations.ts of all chapters to generate audio-segments.json,
           call mmx-cli to synthesize each step into an mp3 file in public/audio/.
           After synthesis, use ?auto=1 mode for one-take screen recording (audio and video are naturally synchronized).
           If mmx is not installed locally, you will be asked which TTS to use.
  ✗ Do not synthesize → Skip Phase 3, proceed directly to Phase 4 for manual screen recording + post-production dubbing.

cd presentation
npm run extract-narrations   # Scan all narrations.ts → audio-segments.json

After synthesis, tell user: Output location / total number of segments / which segments have abnormal duration (too long = split the step;
too short = thin copy) — Give one last chance to calibrate rhythm. Then enter Phase 4.

---