# HTML Demo Video Guidelines

Dex's taste for product demo / hype videos built as HTML + JS motion graphics and...

- Repository: https://github.com/humanlayer/humanlayer (12740 stars)
- Category: Media
- License: Apache-2.0
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add humanlayer/humanlayer --skill html-demo-video-guidelines -g -a claude-code -y`
Codex: `npx skills add humanlayer/humanlayer --skill html-demo-video-guidelines -g -a codex -y`
Cursor: `npx skills add humanlayer/humanlayer --skill html-demo-video-guidelines -g -a cursor -y`
Gemini CLI: `npx skills add humanlayer/humanlayer --skill html-demo-video-guidelines -g -a gemini-cli -y`

## Description

Dex's taste for product demo / hype videos built as HTML + JS motion graphics and rendered to MP4. ACTIVATE when making or revising a demo video, launch video, hype video, or animated product walkthrough. A short do / don't list, not a how-to.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# HTML demo video guidelines

Keep this list current. When Dex gives new feedback on a video, add it here in the same short form.

## Do

- Look at source footage through contact sheets to learn what the product looks like.
- Transcribe the source demos to learn how Dex talks about the feature, then write in that register.
- Build every visual as HTML / JS motion graphics and render frames from a timeline.
- When the source is Dex talking over a screen share, keep his original voice track, add music under it, and replace only the screen recordings.
- Redraw the product UI in simplified, on-brand form: real fonts, real colors, real layout, fewer details.
- Use one realistic task that runs through the whole video.
- Show real-looking work: a real code diff with syntax highlighting, and an artifact that reads like a real plan or doc.
- Show cause and effect side by side. The agent works on the left, the product reacts on the right, and both stay on screen.
- Move focus by growing the active panel and shrinking and dimming the other. Don't cut away.
- Make key UI actions easy to see: the button, the hover state, the click, the result.
- Use one short caption at a time: big, centered, near the bottom, on a dark backdrop.
- Write captions as a plain sentence that says what is happening on screen, like "teammates can comment on the diff while pi is working".
- Land a joke as a normal caption. Dry, not loud.
- Show collaboration with live cursors and named teammates.
- When the line is about the whole team's work, show the task board (kanban columns filling with teammates' tasks, one card moving across).
- End on the few core ideas drawn as a system: nodes, links, things flowing both ways, then collapse into the logo.

The rest: https://github.com/humanlayer/humanlayer/blob/HEAD/.claude/skills/html-demo-video-guidelines/SKILL.md