Skip to content
Founding Lifetime: every Pro skillfirst 100 members · $169 onceUpgrade
Lookbk
Sign In

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.

Similar Skills

View all
New
video
Before After RevealClaude CodeCodexCursor+3 more agents
New
video
Notification Stack ReelClaude CodeCodexCursor+3 more agents

Details

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.

Installed it? Tell others how it went. Reviews come from people who installed this skill.

Write a review

FAQ

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.