Chapter Progress Bar
根据视频字幕(.srt)或时间戳,用 HyperFrames 生成章节进度条透明 overlay, 支持 Chapter、Dash、Minimal、Text Highlight、Customize、Crab 六种视觉风格, 并在 macOS 上交付轻量、剪辑软件兼容的 HEVC Alpha MOV。用于章节划分、进度条设计、 透明视频预览、渲染与交付;除非用户明确要求,否则不要使用 Remotion。
Install
npx skills add serenawangCU/chapter-progress-bar --skill chapter-progress-bargit clone --depth 1 https://github.com/serenawangCU/chapter-progress-bar.git /tmp/chapter-progress-bar
mkdir -p ~/.claude/skills
cp -r /tmp/chapter-progress-bar/. ~/.claude/skills/chapter-progress-barPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Chapter Progress Bar v3.0 用 HyperFrames 制作章节进度条透明 overlay。默认交付是完整画布、无音频、带真实透明通道的 HEVC Alpha MOV;不要把原视频嵌入 overlay,也不要默认使用 Remotion。 ## 关键原则 1. **默认实现:HyperFrames HTML。** 先读 `/hyperframes`,按需再读 `/hyperframes-core`、 `/hyperframes-animation` 与 `/hyperframes-cli`。遵守 HyperFrames 的检查、预览、审批和项目历史规则。 2. **默认交付:HEVC Alpha MOV。** HyperFrames 的透明 WebM 可能在剪辑软件里被显示为黑底, 因此 macOS 上不要把 WebM 当成默认成片。 3. **轻量交付流程:** HyperFrames 临时渲染透明 ProRes 4444 MOV,再用 macOS `avconvert` 转成 HEVC Alpha MOV;验证最终 Alpha 后删除大体积 ProRes 中间文件。 4. **不嵌入原视频。** 成片只包含进度条和透明区域,方便用户在剪辑软件里叠加。 5. **先确认章节,再制作。** 用户给 SRT 时先分析自然段落并列出章节,得到确认后再写 composition。 6. **不要默认使用 Remotion。** 只有用户明确指定 Remotion 时才使用。`src/` 下旧 TSX 文件仅供视觉参考, 不要复制、执行或作为新项目实现。 ## 参考资料 - [styles.md](./references/styles.md):六种风格、布局和视觉参数。 - [component.md](./references/component.md):HyperFrames 文件结构、章节数据、渲染和 Alpha 验证命令。 - [export_alpha_mov.sh](./scripts/export_alpha_mov.sh):macOS 一键渲染、HEVC Alpha 转换、验证和中间文件清理。 - [previews/](./previews/):各风格旧预览图,只作为视觉参考。 ## 一、确认输入 只追问尚未明确的信息。用户回复“默认 / skip / 都行”时采用以下默认值: - 章节来源:SRT 或用户提供的时间戳。 - 风格:Chapter(米色分段条 + 章节名)。 - 位置:顶部。 - 比例:横屏 16:9,1920×1080,30 fps。 - 配色:已播放 `#C09070`,未播放 `#EDE4D4`。 - 条高:62px,另加约 10px 透明渐隐阴影;用户要求更窄时优先改高度,不缩放整张画布。 - 输出:无音频的透明 HEVC Alpha MOV。 ### SRT 模式 1. 读取字幕最后一条的结束时间作为总时长。 2. 按话题转换找自然章节,不要机械均分。 3. 列出 `时间戳 + 简短章节名`,先让用户确认。 4. 短章节标题优先缩写,例如 `1. HTML 做 PPT`,避免文字被分隔线裁切。 ### 时间戳模式 直接使用用户提供的章节,但确认总时长覆盖到最后一章。每章结束时间等于下一章开始时间, 最后一章结束时间等于视频总时长。 ## 二、创建或恢复 HyperFrames 项目
Details
- Skill name
chapter-progress-bar- Repository
- serenawangCU/chapter-progress-bar
- Repo updated
- 9 October 2026
FAQ
What does the Chapter Progress Bar skill do?
根据视频字幕(.srt)或时间戳,用 HyperFrames 生成章节进度条透明 overlay, 支持 Chapter、Dash、Minimal、Text Highlight、Customize、Crab 六种视觉风格, 并在 macOS 上交付轻量、剪辑软件兼容的 HEVC Alpha MOV。用于章节划分、进度条设计、 透明视频预览、渲染与交付;除非用户明确要求,否则不要使用 Remotion。
How do I install the Chapter Progress Bar skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add serenawangCU/chapter-progress-bar --skill chapter-progress-bar. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Chapter Progress Bar popular?
It lives in serenawangCU/chapter-progress-bar, which has 42 GitHub stars and 8 forks.
Related skills
Text to 3d
44hec-ovi/text-to-3D-skill
Initialize and operate a fully local text-to-3D toolkit that turns one subject description into a textured GLB, at full density or to a triangle budget, and can rig a generated character with a Mixamo-named skeleton and playable clips. Uses FLUX.2 klein through ComfyUI, TRELLIS.2 on Vulkan, and SkinTokens on ROCm. Use for starting the local generation harness, creating 3D models, meshes, GLBs or glTF assets from words, rigging or animating a generated character, preparing game or three.js assets, batching several models, or opening the local preview gallery.
Pronounce Word
47anzy-renlab-ai/pronounce
User asks how to pronounce an English word or project/product name ("how to pronounce X", "pronounce X", "X 怎么读", "X 怎么发音", "读一下 X"). Generate audio via the `say-it` CLI so the user actually HEARS the word — three times by default — instead of only writing IPA/syllable hints. The CLI consults a community-maintained pronunciation dictionary (kubectl → "koob-control", GIF → "jif", JSON → "jay-son", ...) and feeds an English-like respelling to the system TTS engine (macOS `say`, Linux `espeak-ng`, or Windows PowerShell) so project names come out the way engineers actually say them. Triggers on a
Remotion Code Motion Explainer
39vibe-motion/remotion-code-motion-explainer
Create polished, code-driven Remotion motion explainers from scripts, narration, subtitles, product specifications, reference videos, UI recordings, diagrams, or abstract concepts. Use for product launches, AI demonstrations, UI interactions, algorithms, scientific principles, electrical systems, data flows, architecture, charts, equations, and concepts best expressed with React, SVG, Canvas, WebGL, or Three.js. Prioritize continuous spatial logic, visible cause and effect, precise interaction states, editable parameters, deterministic rendering, and evidence-backed visual QA.
Music Mv
56Win-Hao/music-mv
用代码给一首歌做一支音乐 MV(不用视频生成模型):先把歌听懂(歌词时间轴、节拍、情绪起落、别人怎么理解这首歌),再定画风、画角色、写剧本和分镜、先出草图再做整片,最后照清单看片修改;也能先拆一支参考视频的风格再照着做。画面用 Canvas / p5.js / p5.brush 一帧一帧画,HyperFrames 合成歌词和歌。用户说「给这首歌做个 MV」「做一支音乐 MV / 歌词 MV / 动画 MV」「学这个视频的风格做一支 MV」,或 make a music video / lyric video for this song 时使用。不限模型,能读写文件、跑命令的 agent 都能照做。
Video Illustrator
42axtonliu/video-illustrator
Turn the user's own voice and real assets (book or course covers, screenshots, logos) plus a chosen visual style into a 20–60 second cinematic promo or concept explainer, or turn a passage, article, idea or script into an animated illustration clip, or (explainer mode) make one passage of an existing narrated video visible as a mechanism insert in 16:9 and 9:16, or (episode mode) make a whole researched, narrated science or tech explainer with real footage. One system where every mode runs the same steps and picks its look from one style atlas (a bright 3D diagram by default for explainers and
Podcast Transcript Txt
47KingJing1/podcast-transcript-txt-skill
Deterministic workflow to find and export full podcast transcripts as cleaned TXT files from YouTube URLs, episode webpages (including Xiaoyuzhou), Apple Podcasts title search, X/Twitter links, direct audio URLs, or plain episode titles. Use when users ask for 逐字稿/文字版/transcript/txt and want minimal trial-and-error.
Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.