stageshow skill: How to Make Clean Product UI Demos With Your AI Coding Agent

Description and use

The stageshow skill enables AI agents to produce clean, motion‑aware UI demos that can be embedded in sites. It includes installation, example prompts, automated recording, and validation, but still needs manual review and iteration.

Problem

Small teams need clean product visuals (hero animations, feature cards, how‑to clips) but AI‑generated mockups often look sloppy and heavy‑handed.

Outcome

The skill produces clean, motion‑aware UI demos that can be embedded in marketing sites, with separate desktop and phone layouts.

Workflow

• Install the skill via npx skills add benjitaylor/skills --skill stageshow
• Ask the agent for a small demo prompt (e.g., a looping hero animation)
• Agent reads SKILL.md, selects closest example, builds demo
• Agent records demo with film.mjs, checks for frame jumps and text fit
• Review motion manually, iterate if needed
• Export the resulting React component

Evidence

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.

Source

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."

Source

From your project, run: npx skills add benjitaylor/skills --skill stageshow

Source

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.

Source

The author warns it "still may not nail it in one shot," and most demos take a few rounds of feedback.

Source