The stageshow skill is a new add-on for AI coding agents that helps them build "faux UI": simplified product screens, feature cards, bento grids and short cursor animations for landing pages and docs. It was released on 31 October 2026 by designer Benji Taylor, and if you run a small product or make content about software, it's worth a look. This is a research-based walkthrough based on the project's GitHub repo and the author's launch write-up.
What problem it solves
Most small teams need product visuals: a hero animation, a feature card, a "here's how it works" clip. You can ask an AI agent to mock one up, but as the author puts it, the results "often look sloppy and heavy-handed." Stageshow writes down the many small design decisions so the agent can make them too.
The skill is built around one rule from its SKILL.md: "It reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause." It also lists five common failures to avoid: too much detail, a bare wireframe, a whole window "boxed" into a card, a flat layout where nothing stands out, and a bland look that ignores the brief.
How to install it
From your project, run:
npx skills add benjitaylor/skills --skill stageshow
The author says this works with common coding agents such as Claude Code, Codex and Gemini. Then ask for something small: one interaction, in one product, at one size. The write-up's own example prompt is:
A small looping demo for our homepage hero: someone assigns an issue to a teammate.
The agent reads the skill, starts from the closest example, builds the demo, then films it and fixes what it finds. What you get is an ordinary React component you can drop into your site.
What's inside
- SKILL.md: the core idea, the failure list and a seven-step workflow (medium and place, look, story, start from an example, and so on).
- kit/: a small set of React parts (stage, windows, phones) that supports React 18 and later, with no third-party animation runtime.
- examples/: dozens of "gold" examples, including studies of real products like Figma, Linear, Slack and Raycast.
-
scripts/:
film.mjsrecords a demo and makes a contact sheet so the agent can check its own work, plus checks for one-frame jumps and text that doesn't fit.
There's also a local playground. It needs Node 20.19 or later:
npm install
npm run dev
A practical setup for a small team
- Install the skill in the repo where your marketing site lives.
- Pick one feature you explain often, like booking, invoicing or a dashboard view.
- Ask for a 10 to 16 second loop (the length the skill recommends) at the size it will actually appear.
- Ask for a compact phone version too; the skill designs a separate 358px-wide layout rather than squeezing the desktop one.
- Review the motion yourself. The README is clear: "No automated clean result replaces watching the motion."
Honest caveats
The author warns it "still may not nail it in one shot," and most demos take a few rounds of feedback. These are illustrations, not automation: a scripted click only draws the cursor pressing. And the repo notes that each skill carries its own licence and third-party asset notices, so check those before using real brand marks.
We cover new AI tools for small businesses and creators in plain English at AI News. If you'd rather have the automation built for you, see AIFix.
Top comments (0)