Sgc Video Chapter Design

Refine chapter boundaries, titles, colors, typography, placement, and progress behavior in the bundled React video chapter editor. Use when the user wants to preview, debug, beautify, or customize a video chapter progress bar.

lovstudio 268c4b1 972 B Updated

File contents

Chapter Design

  1. Open ../../studio and run npm install, then npm run dev.
  2. Import the canonical chapter-project.json.
  3. Select the source video locally for browser preview.
  4. Keep chapter widths proportional to duration.
  5. Edit timestamps without creating overlaps or gaps.
  6. Use the segmented splice rail as the primary editing surface.
  7. Export the updated project JSON after visual approval.
  8. Validate with ../../scripts/chapter_project.py validate.

Use a restrained edit-bay visual language: precise timecode typography, high-contrast controls, one signal color, and a clearly visible playhead. Keep the chapter overlay readable at the final delivery resolution.

lovstudio/general-skills/tree/main/skills/video-chapter/skills/chapter-design commit 268c4b10b8

Frequently asked questions

npx skillmds@latest add lovstudio/sgc-video-chapter-design