Video Spec Builder
Turn spoken-word video ideas into a restrained on-screen spec—subtitle highlight, keyword stickers, and concept cards—so editors or agents implement one job per overlay.
Overview
Video Spec Builder is an agent skill most often used in Grow (also Validate, Launch) that defines A-roll overlay rules—subtitle highlight, keyword stickers, and concept cards—for disciplined talking-head video production
Install
npx skills add https://github.com/feicaiclub/video-spec-builder --skill video-spec-builderWhat is this skill?
- Three A-roll overlay types: subtitle highlight, keyword sticker, and concept card—each scoped to a single job
- v3.1 editorial system: hairline rules, typographic scale, no drop shadows, ornament over decoration
- Live-stage demos for spoken-word caption token cycling and on-screen labeling (e.g., SPEAKER · LIVE)
- Bilingual product framing (A-roll 出镜讲解) for cross-language creator workflows
- Composable section model (ARollSection / SubSec / Stage) agents can extend into a full video bible
- 3 A-roll overlay components (subtitle highlight, keyword sticker, concept card)
- Section 01 · A-roll spec at v3.1 editorial upgrade
Adoption & trust: 1.3k installs on skills.sh; 328 GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your talking-head videos look inconsistent because every cut invents new subtitles, stickers, and cards with no shared restraint rules.
Who is it for?
Creator-led products, course teasers, and founder-led explainers where spoken-word captions and keyword emphasis must match a fixed design system.
Skip if: Full non-linear edit timelines, B-roll-only montages, or teams that only need generic "make a viral reel" prompts without component-level specs.
When should I use this skill?
User needs structured on-screen rules for speaker-on-camera video—subtitle highlights, stickers, concept cards—or is building a video spec site like the A-roll reference sections.
What do I get? / Deliverables
You get a structured A-roll overlay spec agents and editors can follow so each on-screen element does one job with consistent typography and staging.
- A-roll overlay component spec
- Staging and labeling patterns for live speaker footage
- Extendable section structure for a full video specification
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Long-form and talking-head content compounding is a Grow motion; the skill’s output is a production spec for repeatable content ops, not app code. Subphase content fits because the artifact defines visual language for videos meant to teach, launch narratives, or nurture an audience.
Where it fits
Draft A-roll overlay rules for a 60-second landing-page hero video before hiring an editor.
Align launch trailer captions and keyword stickers with the same hairline typography spec as weekly content.
Encode subtitle highlight timing patterns so each episode uses identical spoken-word caption behavior.
Publish an internal video bible as a living spec repo section for contractors.
How it compares
A procedural overlay spec for A-roll, not a one-shot generative video prompt or a motion template marketplace dump.
Common Questions / FAQ
Who is video-spec-builder for?
Solo builders and small content teams who produce speaker-on-camera video and want agent-friendly, component-level rules before editing or codegen for preview sites.
When should I use video-spec-builder?
Use in Grow when standardizing content overlays; in Validate when prototyping explainer clips for a landing page; in Launch when shaping distribution videos that must match brand restraint.
Is video-spec-builder safe to install?
It is primarily spec and UI reference material; confirm trust via the Security Audits panel on this Prism page before adding the skill to your agent.
SKILL.md
READMESKILL.md - Video Spec Builder
.DS_Store node_modules/ skills-lock.json .agents/ /* ================================================================ sections/aroll.jsx — 01 · A-roll 出镜讲解（v3.1 编辑感升级） "克制" 版：hairline + 字号悬崖 + 0 阴影 + ornament 而非装饰 ================================================================ */ function ARollSection() { return ( <Section id="aroll" num="01" title="A-roll · 出镜讲解" desc="出镜时叠在画面上的三大件：<b>字幕高亮</b>、<b>关键词贴纸</b>、<b>概念卡</b>。<em>每个组件只做一件事</em> —— 不堆装饰、不加阴影、不层叠卡片。" > <SubtitleHighlight /> <KeywordSticker /> <ConceptCard /> </Section> ); } /* ---------- 字幕高亮 ---------- */ function SubtitleHighlight() { const tokens = ['让我们聊聊', '上下文', '工程', '不是', '提示词', '魔法']; const highlighted = [1, 2, 4]; const [active, setActive] = React.useState(2); React.useEffect(() => { const id = setInterval(() => setActive(a => (a + 1) % tokens.length), 900); return () => clearInterval(id); }, []); return ( <SubSec name="A · 字幕高亮 · Subtitle Highlight" tag="SPOKEN-WORD CAPTIONS"> <Stage pattern="dot" label="● A-ROLL · LIVE" labelR="01.A"> {/* 左上：讲者标签 */} <div style={{ position: 'absolute', top: '8%', left: '6%', display: 'flex', alignItems: 'center', gap: 10 }}> <span className="dot-pulse" /> <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>SPEAKER · LIVE</span> </div> {/* 右上：时间码 */} <div className="mono" style={{ position: 'absolute', top: '8%', right: '6%', fontSize: 11, letterSpacing: '0.2em', color: 'var(--fg-3)' }}> 00:14:22 · CC ON </div> {/* 字幕主体 */} <div style={{ position: 'absolute', left: '8%', right: '8%', bottom: '14%', display: 'flex', flexWrap: 'wrap', gap: '0 18px', fontSize: 'clamp(28px, 4.4vw, 56px)', fontWeight: 800, letterSpacing: '-0.018em', lineHeight: 1.1, }}> {tokens.map((tk, i) => { const isHot = highlighted.includes(i) && i === active; const isPast = highlighted.includes(i) && i < active; return ( <span key={i} className="cn" style={{ color: isHot ? 'var(--accent)' : isPast ? 'var(--fg)' : 'var(--fg-3)', position: 'relative', transition: 'color 280ms var(--ease-out)', }}> {tk} {isHot && ( <span style={{ position: 'absolute', left: 0, right: 0, bottom: '-12px', height: 3, background: 'var(--accent)', animation: 'lineIn 280ms var(--ease-out) forwards', transformOrigin: 'left', }} /> )} </span> ); })} </div> {/* 底部 hairline */} <div style={{ position: 'absolute', bottom: '8%', left: '8%', right: '8%', display: 'flex', alignItems: 'center', gap: 12 }}> <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>EN / CN</span> <span style={{ flex: 1, height: 1, background: 'var(--line)' }} /> <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>3 / 6 WORDS HOT</span> </div> <style>{`@keyframes lineIn { from { transform: scaleX(0) } to { transform: scaleX(1) } }`}</style> </Stage> <Params rows={[ { k: 'FONT', v: '思源黑体 800 · clamp 28-56px' }, { k: 'COLOR', v: '默认 fg-3 · 念到 accent · 念过 fg' }, { k: 'ACCENT', v: '<b>仅 3px 底线</b> · 无底色块 · scaleX in' }, { k: 'CHROME', v: '左讲者 · 右时码 · 底 hairline + 计数' }, { k: 'POSITION', v: '下 14% · 左右 8% padding' }, ]} /> </SubSec> ); } /* ---------- 关键词贴纸 ---------- */ function KeywordSticker() { const items = [ { txt: 'Context', en: true, pos: { top: '20%', left: '8%' }, tilt