5-second example rendered by this skill from examples/rink · 1280×720
About this skill
What Lookbook adds on top of greensock/GSAP: the footage, which was generated for Lookbook (a still image animated into film, with the matte cut from every frame), and the layout, template and Footage Heroes kit, all written for Lookbook. GSAP (free under its Standard License) loads from a pinned CDN with SRI; the fonts are from Google Fonts. Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.
Example request
Make a Disco Rink hero for our events app with our name, headline, ticket details and buttons, and record the video for our socials.
How it works
Your agent
- 1
Collect the words
Every number, price and claim must come from the person.
- 2
Write hero.json
Copy
<skill>/examples/rink/hero.json(Rink, an app for tickets to roller jams and dance nights) and replace every value. - 3
Build
It lists every problem at once (a missing field, a word too long for its place, a bad link) and writes nothing until they're fixed.
- 4
Check
It serves the page on localhost and opens it at 390, 768, 1280 and 1920 px wide and with reduced motion.
- 5
Look at it
Open the address it prints.
- 6
Record the video (optional)
Writes
out/preview.mp4(1920×1080, 30 fps, five seconds, with the film's sound) andout/poster.png(the last moment). - 7
Put it on the site
Either use
out/index.htmlas the page, or pasteout/embed.htmlinto an existing page and copyout/assets/next to it (or change the fourassets/paths to where you host them).
- 1
You get
- out/preview.mp4
- out/poster.png
- out/index.html
- out/embed.html
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the video (the scripts find it; set
CHROME_PATHif they don't). - ffmpeg for the video (
brew install ffmpeg,winget install ffmpeg,apt install ffmpeg; or setFFMPEG_PATH). - A web server for the page. Opened straight from disk (
file://) browsers won't let the page draw the film, and it shows the still;node scripts/serve.mjs outserves it on localhost. - Internet access when the page is opened: GSAP and the fonts load from jsDelivr (pinned, with an integrity hash) and Google Fonts. Without GSAP the hero shows its still with every word in place.
Last checked Oct 26, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The page shows a still picture instead of the film
It was opened from disk; run
node scripts/serve.mjs outand open the address. If it still shows the still, the section'sdata-fh-stillattribute says why (reduced-motion,no-webgl,autoplay-blocked,film-failed,film-slow,no-timeline).The film doesn't play on the live site but did locally
The film is on another domain without CORS headers. Serve
assets/from the same site as the page, or addAccess-Control-Allow-Originon the CDN.The build says a field is too long
Shorten the words. Each headline line is sized for up to 8 characters; wide letters (M, W) take more room, so look at the result.
What’s in the download
- SKILL.md11.7 KBthese instructions.
- examples/
- examples/rink/1.29 KB1 file
- scripts/
- scripts/kit/the Footage Heroes kit the four scripts run (
build.mjs,runtime.jsfor the browser,frame.css,check.mjs,serve.mjs,record.mjs,cdp.mjs);scripts/kit/KIT.mdsays how it fits together. - scripts/kit/build.mjs13.6 KB
- scripts/kit/cdp.mjs4.90 KB
- scripts/kit/check.mjs5.48 KB
- scripts/kit/frame.css2.24 KB
- scripts/kit/KIT.md4.52 KB
- scripts/kit/record.mjs7.23 KB
- scripts/kit/runtime.js7.94 KB
- scripts/kit/serve.mjs2.55 KB
- scripts/build.mjs146 Bchecks
hero.jsonagainsttemplate/fields.jsonand writes the page, the embed and the assets. - scripts/check.mjs146 Bserves the page and checks it at four widths and with reduced motion.
- scripts/chrome.mjs3.63 KBfinds Chrome, Chromium or Edge.
- scripts/record.mjs148 Brenders the words frame by frame and lays them on the film with ffmpeg:
preview.mp4with sound andposter.png, or one still. - scripts/serve.mjs146 Bserves a built hero on localhost to look at.
- template/
- template/fields.json3.87 KBevery field of
hero.jsonwith its limit, plus the film's length and the hero's colours and fonts. - template/hero.html10.9 KBthe design: its CSS, the layer behind the flamingo, the layer in front, and the GSAP timeline.
- NOTICE.md1.25 KB
- TESTED.json225 B
19 files · 81.8 KB · installs to ~/.claude/skills/disco-rink-hero for Claude Code and ~/.agents/skills/disco-rink-hero for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View all
What you get
- A one-page hero and a paste-in embed with your name, words, numbers and links
- The flamingo and its light ribbons cut out of every frame and drawn through the headline
- The intro animation tied to the film's own clock, so words and picture stay in step
- A phone layout: the headline stays in the frame, the introduction and buttons move into a block underneath
- Stills of the last frame for reduced motion, no WebGL, blocked autoplay or a slow connection, so it is never blank
- A 1080p MP4 with the film's sound and a poster, rendered frame by frame
- Checks at 390, 768, 1280 and 1920 px for overflow, overlaps, links and script errors
- Open-source licenses for every part it builds on
Good fit
- Event, ticketing and nightlife brands can open on a pink flamingo in a gold jumpsuit spinning on roller skates under a mirror ball.
- Brands with a short two-line message can set it in shiny gold while the flamingo and its rainbow light ribbons skate straight across the words.
- Venues with real ticket details can show an admit-one ticket with up to three small label and value pairs, and a big number that counts up.
Not for
- Swapping in your own video: the matte is made for this film, and the scene (a flamingo roller-skating under a disco ball) is the design
- Changing the colors, fonts or layout through settings (every word, number and link is yours; the look is fixed)
- Long headlines: each field has a length limit the build enforces
- Sound on the live page (browsers only autoplay muted video; the MP4 keeps the sound)
- Full landing pages below the hero (see the Landing Pages series)
Compatibility
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Written for any agent that reads SKILL.md folders. Added Oct 26, 2026. Commercial use of everything you make is included.
Reviews
No reviews yet
Be the first to rate it. Anyone who installs this skill can leave a review.
Reviews come from people who installed this skill.
Write a reviewFAQ
Will the flamingo hide part of my headline?
For a moment, yes. It skates through the headline on purpose and moves on, so pick words that still read when one letter is covered. Each of the two lines takes up to 8 characters, spaces included, and wide letters such as M and W take more room.
What does the admit-one ticket hold?
A top line, the event name in up to 18 characters, up to three small label and value pairs and a stub number. The event name is one line that never wraps, so keep it to 18 characters or fewer.
Does the big number have to count up?
No. Give it a value alone and it stays put. Add a count and it counts up from 0 to that number during the film; the value should then be the same number written out, which is what the still and the phone show. Use a real figure.
Which agents is Disco Rink Hero 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.