# How to use Stageshow Stageshow is Benji Taylor’s skill and React kit for making product illustrations: animated interface demos, feature cards, phone scenes, and bento grids. Give your coding agent a small, specific story, start from an existing example, then refine the framing and motion. The result is editable React code you can place on your own site. ## Watch the original demo The 24-second demo introduces the visual range: controls, phone interfaces, music playback, and a dashboard arranged as one composition. It has no audio. Play the downloaded video beside this guide, or open [Benji Taylor’s original X post](https://x.com/benjitaylor/status/2116593247854453244/video/1). ## Install the skill Use Node.js 20.19 or later for the bundled playground. In your project’s terminal, run: ```sh npx skills add benjitaylor/skills --skill stageshow ``` Follow the installer’s choices for your coding agent. Then ask the agent to use Stageshow by name. Installing the skill gives the agent the design instructions, examples, and tools; it does not automatically add a finished demo to your website. See the [official setup instructions](https://github.com/benjitaylor/skills/blob/main/stageshow/README.md). ## Make your first demo Choose one interaction and explain where people will see it. Include the product, output type, size, visual style, and final moment. Attach a product screenshot or point the agent to your existing site so it can use your actual colors, typography, and icons. Try this prompt: ```text Use Stageshow to create a looping homepage demo for my project management app. Show one task being assigned to Maya, then the assignee avatar appearing on the task. Start from the closest bundled example. Use our existing product colors and typography. Design for a 720 × 340 desktop area and a compact phone layout. Keep the result visible long enough to read. Include a useful still for reduced motion. Film and review the full loop before handing it over. ``` For a still, specify the feature and final composition. For a grid, describe the whole section so the tiles have different roles. Keep the first request focused; an entire application tour is harder to read in a small space. ## Find the right example The published playground catalog has **72 entries**: 44 scenes, 16 real-product studies, 11 kit reference sheets, and one teaching-comparison collection. The source repository has 71 example folders; the comparison collection lives separately under `teaching/`. Useful starting points include: - **Hero demo** for a short cursor-led interaction. - **Static card** for a still feature illustration. - **Feature grid** for several features presented together. - **AI answer** for a response that streams into a conversation. - **Upload** for a file moving into a drop zone and becoming a completed upload. - **Window and phone** for one event shown across two devices. - **Controls, Buttons, Cards, and Parts** to inspect the individual building blocks. Product studies demonstrate recognizable interactions from apps such as Linear, Slack, Figma, and Notion. Adapt the interaction and layout to your own product. Use the teaching comparisons to diagnose a weak result; their intentionally flawed halves are demonstrations of problems. ## Run the complete playground To browse the source examples locally, download the repository or clone it: ```sh git clone https://github.com/benjitaylor/skills.git cd skills/stageshow npm install npm run dev ``` On macOS and Linux, the documented address is `http://stageshow.localhost:1355`. On Windows, open the URL printed in the terminal, normally `http://127.0.0.1:5173`. If optional dependencies were skipped on macOS or Linux, run `npm install --include=optional`. The playground lets you pause, replay, slow down, or step through frames. Its Phone control gives examples 358 pixels of available width. Reduced motion shows the scene’s selected still. These controls make it easier to inspect an example before adapting it. ## Put a demo into your site Copy the chosen example and the `kit/` folder into your React project. Preserve imported assets and adjust relative import paths. The kit supports React 18 and later; its components bring their own CSS. Some parts and studies use `lucide-react`, so keep that dependency or adapt the icons. Ask your agent: ```text Adapt the Stageshow Upload example for our site. Keep its composition and motion structure, replace the branding and content with ours, and connect the demo to our existing design tokens. Keep the example’s assets and required dependencies intact. Add a compact layout and reduced-motion still. ``` The scenes are scripted illustrations. A cursor click draws feedback; a state change updates the pictured interface. These actions do not operate a real account or turn the demo into a working application. ## Review before publishing Check the still first: the main action should be obvious, useful text readable, and important controls visible. Then watch the complete loop, including its restart. Look for abrupt jumps, clipped menus, and content that moves before the cursor acts. The repository documents these checks: ```sh npm run typecheck npm run check:css node scripts/film.mjs '' --select '.your-demo' --gate node scripts/film.mjs '' --select '.your-demo' --width 390 --gate node scripts/film.mjs '' --select '.your-demo' --states --gate ``` Replace the URL and selector with your demo’s actual values. For a bundled example, use its direct capture URL, such as `http://stageshow.localhost:1355/?capture=hero-demo`, and select `#example`. Filming requires the supplied tooling and locally installed Chrome, or `CHROME_PATH`. A passing report still needs a visual review. See the [rehearsal reference](https://github.com/benjitaylor/skills/blob/main/stageshow/references/rehearse.md). ## Credit and source Stageshow was created by [Benji Taylor](https://benji.org/stageshow). The source is MIT licensed; retain its copyright and license notice when distributing substantial portions. Product names, icons, and other third-party assets retain their own terms. See the [repository](https://github.com/benjitaylor/skills), [license](https://github.com/benjitaylor/skills/blob/main/stageshow/LICENSE), and [asset notices](https://github.com/benjitaylor/skills/blob/main/stageshow/NOTICE.md).