Communitygithub.com

josueh04/product-video-skills

Back every sentence of a video's narration (audio/lines.tsv) and every screen it shows with a citation into the pinned source code (role/path:line@sha) or a docs URL, mark what is visible in the UI versus backend-only, flag restricted or unreleased features, and cut or rewrite anything unbacked; writes the video's TRUTH.md and checks it with truth_check.py. Use it whenever a script or narration is drafted or edited, before voice is generated, before a build, when someone asks "can we say this?", "is this true?", "does the product really do X?", when a reviewer asks for a feature or a claim the product may not support, and when a source document (pitch deck, PRD, marketing page) makes claims the video wants to repeat.

¿Qué es product-video-skills?

product-video-skills is a Claude Code agent skill that back every sentence of a video's narration (audio/lines.tsv) and every screen it shows with a citation into the pinned source code (role/path:line@sha) or a docs URL, mark what is visible in the UI versus backend-only, flag restricted or unreleased features, and cut or rewrite anything unbacked; writes the video's TRUTH.md and checks it with truth_check.py. Use it whenever a script or narration is drafted or edited, before voice is generated, before a build, when someone asks "can we say this?", "is this true?", "does the product really do X?", when a reviewer asks for a feature or a claim the product may not support, and when a source document (pitch deck, PRD, marketing page) makes claims the video wants to repeat.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/josueh04/product-video-skills/tree/HEAD/skills/product-truth

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Product truth

A product video that shows something the product cannot do is worse than no video. In the production these skills come from, the costliest moments were all truth failures: a hand-built badge with the wrong size and the wrong product name, a workflow narrated as "waiting for the call result" when the product only returns results through a separate trigger, a test call relabeled as a confirmed booking that nobody had verified end to end, and a company document whose headline contradicted the positioning the team had agreed on. Each one was caught late, by a reviewer, and cost a version.

This skill makes the check explicit and mechanical: every line and every screen gets a row in TRUTH.md with a source, and truth_check.py refuses a video where any row is missing, stale or unbacked.

Inputs

  • videos/<video>/audio/lines.tsv (the narration, one sentence per line id)
  • videos/<video>/SOURCES.md (from source-recon: the screens and their code)
  • videos/<video>/BRIEF.md, COVERAGE.md, CLAIMS.md (what the video must explain, the positioning, phrases to avoid, claims that need approval)
  • product.yaml: positioning, never_say, names (canonical name to legacy strings), banned_terms
  • sources/<role>/ and sources.lock (pinned by source-recon; if missing, run source-recon first, because citations must point at the locked commit)

1. List the claims

Split every line of lines.tsv into the claims it makes. "Acme Tasks reads your calendar and moves overdue tasks to tomorrow" is two claims: it reads the calendar, and it moves overdue tasks. Add one claim per screen and per on-screen action from SOURCES.md and the chapters ("clicking Plan my day opens the planner with three suggestions").

Write the questions those claims raise, phrased so code can answer them: what triggers this, what is stored, which options exist, what the user sees and where, what happens only on the server.

2. Answer them from code and docs

Launch read-only subagents in parallel, one per product area (frontend behaviour, each backend, docs), with the prompt in references/product-facts-prompt.md. Point them at sources/<role>/, never at the user's checkout, so their line numbers match the lock. They answer only from code or docs, cite every fact, and say "not found" instead of guessing.

3. Classify each claim

visibilitymeansthe video can
uiRendered by the frontend; cite the template or i18n lineshow it and narrate it
backendTrue on the server, nothing on screen shows itnarrate it, never draw a UI for it
docsOnly the docs say itnarrate it with the docs URL; check the code agrees when it can
mockA designed piece, not product UI (a phone call screen, an end card, generated text)show it, marked as designed in the BRIEF
verdictmeans
backedthe source says exactly this
approvedneeded sign-off (restricted, unreleased, a claim CLAIMS.md lists) and the reviewer gave it in CLAIMS.md
needs-approvaltrue, but restricted, gated, unreleased or listed in CLAIMS.md; waiting for the reviewer
rewritepartly true; you propose backed wording in the notes
cutnot true, or no source found
unbackednot checked yet
mockwith visibility mock only

Only backed and approved pass for narrated lines. A restricted feature (visible only to some roles, plans or internal teams), a feature behind a flag, or one on an unmerged branch is needs-approval until the reviewer says yes in CLAIMS.md, and the BRIEF notes that it is restricted. That happened in the source production: a feature only internal staff could see was shown at the reviewer's request, and marked.

4. Fix what does not hold

  • Rewrite a partly true sentence into the strongest version the source supports. Keep the meaning the writer wanted; change the mechanics to the real ones.
  • Cut what has no source. Do not soften it into something vague; vague claims are still claims.
  • Never let a label drift. A designed piece marked "illustrative" must not lose that label for aesthetics later without re-checking the claim the unlabeled version makes.
  • Positioning wins over documents. If a deck or PRD says something never_say or CLAIMS.md forbids, the rule wins and the sentence changes.
  • Current names only. Use the canonical names in product.yaml names, even when the live UI or the code still shows a legacy string. Grep lines.tsv, specs and templates for every legacy string and every banned_terms entry (competitors, third-party vendors the team keeps off screen, real customers) and fix each hit.

5. When a request conflicts with the product

When the brief or the reviewer asks for something the code does not support, do not build a fake and do not silently drop it. Ask one closed question with options and a recommended default, and keep at most three such questions per round, because open-ended lists of vetoes go unanswered and the silence becomes a decision nobody made. The "only what's real" pattern:

The brief shows Acme Tasks booking the meeting room itself. The code only creates the task and links the room's calendar (frontend/src/rooms/LinkRoom.tsx:22@1a2b3c4); booking happens in the calendar app. Which one?

  1. Only what's real (recommended): show the link step and say "links the room's calendar".
  2. Show the calendar app's booking screen as a designed piece, labeled, and narrate it as the calendar's step.
  3. Drop the beat.

Record the answer in CLAIMS.md and set the verdict from it.

6. Write TRUTH.md

# Truth: <video>

Locked: frontend main@1a2b3c4, backend main@5d6e7f8. Checked: 2026-01-12.

| id | sentence | source | visibility | verdict | notes |
|---|---|---|---|---|---|
| N1 | Acme Tasks plans your day from your calendar. | frontend/src/planner/plan.ts:31@1a2b3c4; https://docs.example.com/planner | ui | backed | |
| N2 | Overdue tasks move to tomorrow at midnight. | backend/jobs/rollover.py:12-30@5d6e7f8 | backend | backed | not shown on screen |
| screen:board | Board with three tasks, one overdue | frontend/src/pages/board/BoardPage.tsx:14@1a2b3c4 | ui | backed | |
| screen:call | Phone call with the customer | (designed) | mock | mock | marked in BRIEF |

## Open questions
1. <closed question with a recommended answer>

One row per line id of lines.tsv, with the sentence copied exactly (the check compares them, so editing a line after the truth pass fails until you re-verify it). One row per screen, with id screen:<name> matching SOURCES.md. Several citations go in one cell, separated by ;.

7. Check it

PVS_HOME="$(cd "$(cd "${CLAUDE_SKILL_DIR}" && pwd -P)/../.." && pwd)"
"$PVS_HOME/bin/pvs-py" "$PVS_HOME/skills/product-truth/scripts/truth_check.py" <video_dir>

It fails on a line without a row, a changed sentence, a verdict other than backed or approved on a narrated line, a citation whose role is not locked, whose sha is not the locked one (the code moved; re-verify), whose file is not in the export, or whose line is past the end of the file. Fix every failure; do not edit the check.

Report to the user: how many lines and screens are backed, what you rewrote and cut (with the reason), what waits for approval, and the open questions.

Individual skills in this repo

This repo contains 14 individual skills — each has its own dedicated page.

josueh04/product-video-skills

Extract, once per product, everything every video of it reuses and write it to kit/ and product.yaml (design tokens, font subsets as woff2, icon subsets as SVG from the product's own icon packages, logos in light, dark and app-tile variants from the repo, a fictional cast proposed once for veto and then frozen, the canonical-names map, pronunciations, banned terms and the read-only tool list). Use it when a product is set up or its kit is missing or incomplete, when a video needs an icon, font or logo that is not in kit/ yet, when someone asks for demo names, fake customers, phone numbers or emails, when a brand word is mispronounced or an old product name shows up, and when checking that demo data is fictional.

josueh04/product-video-skills

Interview the user about a product, then create products/<slug>/ with its own git history, a filled product.yaml and linked skills, fetch its sources and build its kit. Run only when the user types /product-new.

josueh04/product-video-skills

Check a rendered product video before anyone else sees it: worker-pattern flicker, black frames, loudness and true peak, clipping, clicks at clip edges, overlapping narration, speech to text against the script, banned terms and legacy names, camera zoom, contact sheets, frame strips at transitions and parity against the approved version; then write qa/REPORT.json, the only thing deliver.py accepts. Use it after every HyperFrames render, whenever someone asks "is the render clean", "QA this", "check the video", "check the audio", "why does it flicker", "there is a click", "compare v3 with v2", "did the approved part change", or before showing, sending, uploading or delivering any MP4, even when the request does not say QA. Also use it to triage a defect a reviewer reported in a render.

josueh04/product-video-skills

Write a product video's narration and turn it into voice clips with word timings, pronunciation fixes, sound effects and even loudness. The script becomes a table of moments and then audio/lines.tsv (one clip per sentence, with role and speed columns); tts.py voices it with ElevenLabs or the free macOS say voice, maps brand respellings back to the on-screen spelling, normalizes every clip and writes audio/timings.json for the composer; make_sfx.py builds typing tracks from real keystrokes and places recorded click and pop sounds. Use it whenever a video needs a script, narration, voice-over, lines.tsv, timings.json, TTS, a new take, a voice or casting choice, a pronunciation fix ("it says the name wrong"), a changed sentence, a tone note ("too hype", "sounds cut off"), audio levels, a click at the end of a clip, typing or click sounds, or when the build stage asks for the voice. Also use it for silent loops, which still need a moment table and SFX.

josueh04/product-video-skills

The animation rules that keep HyperFrames' parallel render workers from dropping, flashing or flickering elements, plus a static lint (lint_motion.py) that finds the violations in a video's template before it costs a render. Use it whenever you write or edit GSAP tweens, timelines, cursors, camera moves, typing, scrolls or pop-ups in a HyperFrames composition or a video's src/template.tpl, whenever a render shows flicker, stutter, an element that vanishes on some frames, a title that flashes, or a "WORKER PATTERN" line from scan_render.py or qa.py, and whenever the preview looks right but the MP4 does not. Also use it to review someone else's timeline code before rendering.

josueh04/product-video-skills

Pin a product's source code (read-only exports in sources/ plus sources.lock), confirm that the pinned commit is what runs in production, and map every screen of a video brief to its route, components, i18n strings and state, written to the video's SOURCES.md. Use it whenever a video needs to know where a screen lives in the code, when sources/ is missing or stale, before ui-spec-from-code or product-truth start on a video, after the product's frontend changed ("what changed", "which videos are affected", "refresh the sources", "is this checkout current", "which commit is in prod"), and when there is no code and you need an inventory of the no-code references (recordings, recovered captures, docs) a screen can be rebuilt from.

josueh04/product-video-skills

Compose a narrated product demo in HyperFrames: the stage (the product UI rebuilt at its real viewport and scaled to 1080p, camera, rack focus with veil, chapter titles, cursor and clicks, typing, streaming text, pop-ups, toasts, scrolls, end screen and lockup) and the build.py that anchors every beat to a word of the narration. Use it whenever you write or edit a video's video/build.py, src/template.tpl or src/app.css, place a beat on a word, add a chapter, a click, a pop-up or a push-in, frame a screen, build the end screen or lockup, snapshot setup beats, or render a draft or delivery MP4 of a product video in this workbench. Also use it when someone says "the cursor is off", "too zoomed in", "too fast", "it feels chaotic", "the title flashes", "sync the UI to the voice", or asks for a walkthrough, demo or pitch video of a UI.

josueh04/product-video-skills

Gather pixel references for UI that the code cannot show, or to check a rebuild against the real thing, using frames and timed OCR text from screen recordings, captures recovered from past Claude Code session transcripts, a local instance of the app built like production, and web research for third-party apps, plus side-by-side parity images and contact sheets. Use it whenever someone hands over a screen recording (.mov or .mp4) of the product, when a screen has no usable source code (a stale checkout, another company's UI such as a sign-in page, calendar or CRM, runtime output from a backend not in the repos), when asked "what does it really look like", "match the recording", "how long does that animation take in the app", "compare our render to the real app", or when screenshots from an earlier session might already exist. Never uses the reviewer's personal browser.

josueh04/product-video-skills

Turn a product's real frontend code into 1:1 rebuild specs for a video, one read-only subagent per screen, each returning static HTML, CSS with every variable resolved to its literal value and cited (role/path:line@sha), every state, transitions with exact durations and easings, icons from the code's own icon sets, and the exact i18n strings; plus resolve_tokens.py to write the product's design tokens to kit/tokens.css. Use it whenever a screen of the product has to appear in a video, when writing or fixing video/src/app.css or the template markup, when someone asks for exact sizes, colors, fonts, paddings, animations or icons of a screen, when a rebuilt screen "looks off" next to the real app, and when the design tokens or theme of a product need extracting. Framework adapters cover Angular with PrimeNG (proven), React, Vue, Tailwind and plain HTML (unproven).

josueh04/product-video-skills

Say where this session stands in the Product Video Skills workbench (setup state, which product and video the current folder belongs to, the stage of every video) and the exact next command to type. Also answers "how do I..." questions about the workbench from its docs.

josueh04/product-video-skills

Coordinate the build of one or more signed videos of the current product with subagents (source recon, product truth, UI specs, voice, one builder per video), re-run QA itself, then deliver. A light coordinator that never builds itself. Run only when the user types /video-build.

josueh04/product-video-skills

Start a new video of the current product - create videos/<video>/, write BRIEF.md, the feature coverage matrix (COVERAGE.md) and the claims sheet (CLAIMS.md), propose chapters, then stop for the reviewer's sign-off. Never builds. Run only when the user types /video-new.

josueh04/product-video-skills

Turn a batch of reviewer feedback on the product's videos into one table per video, fix every video that got notes in parallel (one subagent each) while keeping approved parts, re-run QA and parity, bump versions and deliver. Run only when the user types /video-review.

josueh04/product-video-skills

Check this machine and install the pinned video toolchain of the Product Video Skills workbench (HyperFrames CLI, its rendering Chrome and its agent skills from the same release, the Python environment, the speech model for QA), then run the self-check. Safe to run again. `/video-setup check` only reports.

Skills relacionados