Stageshow Builds Product UI That Looks Real

Use this skill when a user wants promotional material for a product, such as a homepage hero image, feature cards, a demo animation with a cursor, or a Bento feature grid, and does not want to take screenshots of the real product. It comes from the benjitaylor/skills repo, MIT licensed. Besides SKILL.md, the repo has a set of React components you can copy (kit/), dozens of examples (examples/), and a script that turns a finished piece into a contact sheet and automatically checks it for problems (scripts/film.mjs).

What it makes is an illustrated faux UI. In a script, a.click() only draws a cursor pressing something, and a.set() only switches the screen state. It does not operate a real app.

Triggers

The user says things like "make a demo animation for my product", "make a homepage product image", "make a Bento feature card", "make a product demo where a cursor clicks around", or "the product isn't finished yet, make the promotional material first". Or they ask for a fake, simulated product UI for marketing pages and docs.

Not a good fit:

• Recording a video of the real product in use (use screen recording instead).
• No React and Node environment, and no plan to set one up.
• Plain text posters, or illustrations unrelated to the product UI.

Hard rules

1. State that the results in the demo are preset. The "AI generated" topics, articles and images in the faux UI are fixed data. When you deliver, remind the user not to describe features the product doesn't have yet as already launched.
2. Don't pass off someone else's product as the user's. Real products in the examples, such as Figma, Linear and Slack, can only be used as a reference for interaction. Don't use their names, logos or UI as if they were the user's product. The app icons in assets/app-icons.ts are not covered by the MIT license, so don't use them directly in the user's commercial material.
3. Use the user's own brand. If there is an existing product, first read its code or website, and map its colors, fonts and corner radius to the kit's variables (see references/looks.md). If there isn't one, ask first for the brand color and style. Don't default to purple and sparkle icons to mean "AI".
4. Confirm before installing. Before you install npm packages or copy kit/ into the user's project, say clearly what will be installed and where, and wait for the user's agreement.
5. Don't skip the check. Before delivery, record the full loop with film.mjs and --gate. The last line must be rehearsal passed. Looking at one still frame does not count as a check.

Install

First, check:

ls ~/.claude/skills/stageshow/SKILL.md ~/.agents/skills/stageshow/SKILL.md ~/.codex/skills/stageshow/SKILL.md 2>/dev/null || echo "not installed"
node -v   # needs 20.19 or later

If it isn't installed, tell the user you will install the skill with the skills tool. After they agree:

npx skills add benjitaylor/skills --skill stageshow

After installing, restart the agent so it recognizes the skill. To preview the examples locally, go into the stageshow folder where the skill lives:

npm install
npm run dev

On macOS and Linux, open http://stageshow.localhost:1355. On Windows, open the local address Vite prints (usually http://127.0.0.1:5173). To run the recording check, use Chrome installed on this machine (or set CHROME_PATH).

Which file to read first

Read SKILL.md first, then open only the references you need for the task:

Task	Open
How to frame and crop, which layout to pick	references/framing.md
Still-frame details: word counts, spacing, icons, colors	references/craft.md
Animation story, pacing, looping, cursor	references/motion.md
Bento grids	references/bento.md
Matching the user's product colors and fonts	references/looks.md
Component props and the Act script API	references/kit.md
Recording, checking, delivery checklist	references/rehearse.md, references/verify.md

Pick an example for the need

Find the closest example first, record one still frame as the benchmark, then copy its folder and change it to the user's product. Don't just glance at it and write from scratch.

Need	Example
Static feature card	static-card
Homepage demo animation (with cursor)	hero-demo
Dark homepage hero	dark-hero
AI chat, streaming output	ai-chat, ai-cards
Content loading, skeleton turning into real content	loading
Bento feature grid	bento, ruled-bento, staggered-bento, hero-grid
Window plus phone, telling the same story	device-pair
Mobile app	phone-touch, dynamic-island

Workflow

1. Write the plan first. Which page it goes on and how wide it is; whether it's a still frame or an animation; the focus of the picture, the action that happens, and the result it stops on; what can be left out.
2. Set the look. Map the user's product colors and fonts. Default to light mode and one accent color. A homepage hero image can use a style closer to the real content.
3. Set the story. An animation has 3 to 5 beats and runs 10 to 16 seconds. Every cursor move needs a reason.
4. Start from an example. Copy the closest example. Keep its canvas size, crop, line height and beats, and swap in the user's look and content.
5. Build the screen. Real text usually goes in only 3 to 7 places. Use placeholder bars (Bar, Text) for the rest. Add data-target to the elements the cursor touches, and measure positions with rect() instead of hard-coding coordinates.
6. Orchestrate the animation. Use the Act interface. Keep elements mounted and switch them with state, so exits can animate too.
7. Record and check. Set the poster first, since most people only see that one frame. Then record the full loop:

node scripts/film.mjs '<preview URL>' --select '.your-demo' --gate
node scripts/film.mjs '<preview URL>' --select '.your-demo' --width 390 --gate
node scripts/film.mjs '<preview URL>' --select '.your-demo' --states --gate

Each line of output is a problem a viewer would notice. Fix until the last line is rehearsal passed. Then compare it side by side with the benchmark example, and write a REHEARSAL.md: which example you referenced, what you changed, and what you did not check.

8. Derive the other assets. Once the demo passes, the homepage hero image and the Bento cards reuse the same components, colors and data. Re-frame them according to framing.md and bento.md. Don't shrink the whole window and fit it into a card.

Video export is not built into the skill. For an MP4, tell the user they need to record it separately (for example with Playwright or a screen recording tool), and say which one was used.

Common mistakes

• Too full: every line is real text and numbers are everywhere, so it looks AI-generated.
• Looks like a wireframe: only two gray bars and a button, so you can't tell what the product is.
• Boxed in: the whole window is shrunk with equal margins on all sides, which looks like a pasted screenshot.
• Same weight: every element has the same visual weight, so the eye doesn't know where to look.
• Fake AI mark: purple, sparkle icons, or a letter inside a colored square.

Output format

1. The file paths of the components, plus the file paths of the still frame and the contact sheet.
2. The last line of --gate output (once at desktop width and once at 390 width).
3. Which content is preset data, and which still needs to come from the user (real screenshots, copy, brand colors).
4. If a video was made: which tool recorded it, and where the file is.

In one line

Start from the closest example, put real text only where the story happens, and record the full loop and pass --gate before you deliver.