A little stage for
every idea.

Add the skill to your agent.

Open your project’s terminal and run the command below. Follow the installer’s choices for your coding agent, then ask it to use Stageshow by name. The bundled playground requires Node.js 20.19 or later.

npx skills add benjitaylor/skills --skill stageshow

Installing the skill gives the agent its instructions and examples. Your next prompt tells it what to build. Official setup ↗

Tell one small story.

Choose one interaction, its size, and the moment viewers should remember. Give your agent a product screenshot or your existing site so it can match your fonts, colors, and icons.

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 and use our existing 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 reduced-motion still.
Film and review the full loop before handing it over.

For a still, describe the final composition. For a bento grid, describe the whole section so the tiles play different roles. Start with the Hero demo or Static card, then adapt it.

Borrow a good starting point.

Every gallery card opens the real example with playback controls. Try Phone to inspect a narrow layout, Reduced motion for its chosen still, and Step to examine individual frames. The source button takes you to the matching files.

To run the entire playground locally:

git clone https://github.com/benjitaylor/skills.git
cd skills/stageshow
npm install
npm run dev

On macOS and Linux, open http://stageshow.localhost:1355. On Windows, use the address printed in your terminal, normally http://127.0.0.1:5173. If optional dependencies were skipped on macOS or Linux, run npm install --include=optional.

Make it part of your site.

Copy the chosen example and the kit/ folder into your React project. Keep imported assets and adjust the relative paths. The kit supports React 18 and later and imports its own CSS. Keep lucide-react where the example uses it, or adapt the icons.

Adapt the Stageshow Upload example for our site. Keep its composition and motion structure, replace the branding and content with ours, and map the kit to our design tokens. Preserve the required assets and dependencies. Add a compact layout and a reduced-motion still.

Watch it all the way through.

Check the still first: readable text, a clear focal point, and no clipped controls. Then watch the whole loop, including the restart. Look for sudden jumps and interface changes that happen before the cursor acts.

npm run typecheck
npm run check:css
node scripts/film.mjs '<your URL>' --select '.your-demo' --gate
node scripts/film.mjs '<your URL>' --select '.your-demo' --width 390 --gate
node scripts/film.mjs '<your URL>' --select '.your-demo' --states --gate

Replace the URL and selector with your own. For a bundled scene, use ?capture=hero-demo and select #example. Filming requires the supplied tools and local Chrome, or CHROME_PATH. A passing report still needs your eye. Read the rehearsal guide ↗