14-second example rendered by this skill from examples/orchardly-board · 1280×720
Example settingswhat each example above was built from
examples/orchardly-boardbrief.json
- Product
- Orchardly
- Kicker
- Product update · Boards 2.0
- Headline
- Plan a launch in four moves
- Colors
- stage #ebe6dc · app #fbf9f5 · ink #1f1d1a · accent #c8502a
examples/vantline-deploysbrief.json
- Product
- Vantline
- Kicker
- Changelog · Release lanes
- Headline
- Ship a hotfix from the board
- Colors
- stage #0a0c0f · app #111418 · ink #e9ecef · accent #5ee0a0
What you get
- A 1920×1080 MP4 of 9 to 15 seconds with sound, rendered locally
- An original soundtrack with a whoosh on every cut, a click on every click and a sting on the name, with nothing to license
- Hard cuts on downbeats, clicks on beats and the product name on the final hit
- An app interface drawn in HTML and CSS from your brief, in light or dark
- A close camera at 2.2x that always fills the frame with the interface
- A large caption pill with step numbers, confirming toasts, depth of field and grain
- A pasteable PROMPT.md for Claude Code or Codex, and two finished example briefs
- Open-source licenses for every part it builds on
Good fit
- You want a feature or changelog clip but the real interface is not ready to show.
- You need the same walkthrough in light and dark, or in several brand colour sets.
- You want a short social demo where every click is framed, captioned and confirmed.
Not for
- Recording or replaying your real app
- Interfaces other than a sidebar, top bar and card board
- Vertical 9:16 video
- Walkthroughs of more than 4 steps or longer than 15 seconds
- Voice-over, which you add yourself
About this skill
A product walkthrough film built from an interface drawn in clean HTML and CSS in your brand's colours, cut to an original beat-synced soundtrack generated on your machine. You describe the app and 3 or 4 steps in a brief. Every step is a hard cut on a downbeat to a close framing at 2.2x, so the interface text reads, with a slight 3D tilt, a shallow depth of field and film grain. A cursor clicks with a ripple, types into a modal over a blurred, darkened board, picks a label, drags a card between columns, and a toast confirms, each key moment on a beat. The title and end card sit over a blurred close-up of the app, and the product name lands on the final hit. Films run 9 to 15 seconds.
Example request
Make a 20 second walkthrough of our task board: create a task, label it, search for it, then drag it to In progress, in our brand colours.
How it works
Your agent
- 1
Make the project
Use the brand's colours if you have them.
- 2
Write the brief
Create
brief.jsonin the project. - 3
Apply the brief
It checks the whole brief and lists every problem at once: missing fields, text over its limit, colours that don't read, a card a step can't find, a drag to the column it is already in, a full column, a search that matches nothing, a film that would run over 15 s, or a music setting out of range.
- 4
Check
"ok": truemeans it can render. - 5
Look before you render
Run the
snapshotcommandapply-briefprinted. - 6
Render
It renders with the pinned HyperFrames, checks the track and its stems with
scripts/music/check.mjs(A1 to A11, see Sound effects and two-way sync), muxes it in as AAC through a true-peak limiter (-1 dBTP), and checks the MP4 has sound as long as its picture. - 7
Hand it off
Give the person
renders/walkthrough.mp4and two or three stills from step 5.
- 1
You get
- renders/walkthrough.mp4


What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. FFmpeg also checks and muxes the music. - HyperFrames runs through
npx, pinned to the version this template was tested with:npx --yes hyperframes@0.8.192. The first render downloads a headless Chrome of its own. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
fonts.googleapis.com(Geist and Geist Mono) andcdn.jsdelivr.net(GSAP). See Troubleshooting if either is blocked.
Last checked Nov 1, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
Render hangs, then shows a static frame, or reports
sub_timeline_script_failure.GSAP didn't load. If your network blocks
cdn.jsdelivr.net, runnpm i gsap@3.14.2in the project, copynode_modules/gsap/dist/gsap.min.jstoassets/vendor/, and point the<script src>inindex.htmlatassets/vendor/gsap.min.js.The text is in the wrong font.
fonts.googleapis.comwas unreachable during the render. HyperFrames caches the fonts after one successful fetch.The colours didn't change.
Run
apply-briefagain and check it printedApplied. Editingwalkthrough.csshas no effect on the colours; they come from the brief.
What’s in the download
- SKILL.md25.6 KB
- examples/
- examples/orchardly-board/3.03 KBa light project-management board, 3 columns, 4 steps,
upbeat-popat 112 bpm, 15.0 s. · 1 file - examples/vantline-deploys/3.16 KBa dark developer dashboard, 4 columns, 4 steps,
tech-minimalat 128 bpm, 15.0 s. Both products are made up. The previews on Lookbk are rendered from these two. · 1 file - scripts/
- scripts/gate/the layout gate (
gate.mjs) and its small Chrome DevTools client (cdp.mjs). - scripts/gate/cdp.mjs5.63 KB
- scripts/gate/gate.mjs19.5 KB
- scripts/music/beatgen 2, the music and sound-effects generator, with its checker (
check.mjs, standards A1 to A11), muxer (mux.mjs), an empty CC0samples/manifest and its README. - scripts/music/examples/
- scripts/music/examples/events.example.json555 B
- scripts/music/samples/
- scripts/music/samples/manifest.json371 B
- scripts/music/beatgen.mjs11.8 KB
- scripts/music/check.mjs50.0 KB
- scripts/music/dsp.mjs20.0 KB
- scripts/music/engine.mjs51.7 KB
- scripts/music/mux.mjs2.36 KB
- scripts/music/presets.mjs36.8 KB
- scripts/music/README.md23.7 KB
- scripts/music/samples.mjs4.90 KB
- scripts/music/sfx.mjs17.1 KB
- scripts/music/theory.mjs3.34 KB
- scripts/music/voices.mjs16.9 KB
- scripts/apply-brief.mjs25.3 KBchecks a brief, plays it through on the board, times it on the beat grid, generates the track, and writes it into the project.
- scripts/beat-grid.mjs13.0 KBreads the
musicblock, predicts the bars and the drop, and runs beatgen. - scripts/color.mjs1.40 KBcontrast and mixing helpers for
apply-brief. - scripts/render.mjs7.75 KBrenders, checks the track, muxes it in and checks the MP4.
- template/the HyperFrames project.
- template/hyperframes.json318 B
- template/index.html1.89 KBholds the stage and registers the timeline.
- template/package.json297 B
- template/storyboard.js100 B
- template/walkthrough.css19.2 KBis the look: the window, the board, the modal, the menu, the pill and the toast.
- template/walkthrough.js43.0 KBdraws the app from
storyboard.jsand builds the timeline. - NOTICE.md1.38 KBthird-party software this skill uses.
- PROMPT.md2.95 KBa prompt to give Claude Code or Codex to make a walkthrough for your product with this skill.
- TESTED.json5.03 KB
31 files · 418 KB · installs to ~/.claude/skills/cursor-walkthrough for Claude Code and ~/.agents/skills/cursor-walkthrough for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 9 to 15 s · 1920×1080
- Needs
- Node.js 22+, FFmpeg on the PATH, and Chrome (HyperFrames downloads its own headless Chrome on first render). Network access to Google Fonts and jsDelivr.
- Series
- Product Updates · 4 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 1, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Can it show my real screens?
No. The interface is drawn in HTML and CSS from your brief: a sidebar, a top bar, a board of cards, a modal, a menu and a toast. You choose the labels, cards and colours, so it reads as your product without needing a screen recording.
What actions can the cursor do?
Four kinds of step: create a card through a modal with typed text, search with typed text, open a card menu and pick a label, and drag a card to another column. Any step can end with a toast, and you can chain 3 or 4 steps.
How does the film fit the music?
The brief script lays the film out in bars of the generated track: a title, each step one or two bars, and an end card. Every step is a hard cut on a downbeat, each click, pick or drop moves to a beat, and the end card carries the final hit. A film runs 9 to 15 seconds.
Which agents is Cursor Walkthrough written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesBuilt on heygen-com/hyperframes
What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk wrote this package; it renders with HyperFrames (Apache-2.0) and animates with GSAP (Standard License), and uses the Geist and Geist Mono fonts (SIL Open Font License 1.1), with an original soundtrack from the bundled beatgen generator.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.