# Create Product UI Illustrations and Animated Demos

Product illustrations can look unfinished when layout, typography, and motion lack consistent structure. Stageshow provides React components, reference scenes, and capture tools for realistic product visuals.

## Install

```bash
npx skillstore add benjitaylor/stageshow
```

## Metadata

- Status: approved
- Slug: benjitaylor-stageshow
- Skillstore revision: r1
- Version status: missing
- Tree hash: a31b7ae96d97f0f456b72ac7c79acce3ec78904175ce88d68e95bbaea76f3869
- Author: benjitaylor
- GitHub username: benjitaylor
- License: MIT
- Repository: https://github.com/benjitaylor/skills/tree/802057409787133703c56001080169e347305572/stageshow
- Ref: 2248333d85aa37e3eccaa477a113c86a0285b02e
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, filesystem, network, env\_access, scripts
- Quality score: 76
- Public page: https://skillstore.pages.dev/skills/benjitaylor-stageshow
- Manifest: https://skillstore.pages.dev/api/skills/benjitaylor-stageshow/manifest

## Capabilities

- Compose product scenes with reusable browser windows, phones, notifications, terminals, and interface controls.
- Script simulated cursor movement, typing, clicks, scrolling, and dragging through the Act API.
- Animate changing values, expanding panels, connected objects, and streaming text with dedicated motion components.
- Define wide and compact scene layouts, playback behavior, and poster states for reduced motion.
- Capture PNG stills and contact sheets with Playwright and an installed Chrome or Chromium browser.
- Check scene geometry, layout fit, motion discontinuities, and CSS namespace collisions with included scripts.

## Use Cases

- Design Product Launch Visuals: Create a focused product illustration with authentic interface structure, deliberate cropping, and a clear result.
- Embed Feature Walkthroughs: Integrate a scripted cursor demo into an existing React page with compact layouts and a meaningful poster state.
- Illustrate Documentation Workflows: Show one interface task through a short sequence, then capture stills or contact sheets for documentation review.

## Prompt Templates

### Build a Still Illustration

```
Use Stageshow to create a still illustration of [product screen] for a [width] by [height] space. Start from the closest reference scene.
```

### Animate One Interface Task

```
Create a Stageshow demo showing [task] in three to five beats. Use measured cursor targets, a visible result, and a meaningful reduced-motion poster.
```

### Adapt an Existing Product

```
Adapt the closest Stageshow scene to [product] using our typography, colors, and components. Provide separate wide and compact layouts without shrinking interface text.
```

### Rehearse and Verify a Demo

```
Review [demo] at desktop and mobile widths using Stageshow capture tools on a trusted local preview. Inspect motion, report defects, and document unchecked states.
```

## Limitations

- Scenes illustrate interfaces; simulated clicks do not automate real applications or provide production business logic.
- Integration requires React, react-dom, lucide-react, and the relevant CSS; capture tools also require Node.js, Playwright, and Chrome or Chromium.
- Automated checks do not replace visual review, responsive layout work, or assessment of complete animation loops.
- Contact-sheet labels need escaping, and the capped security review leaves additional static matches awaiting manual adjudication.

## Best Practices

- Start from the closest reference scene and preserve its structure before replacing the product look and content.
- Design compact layouts explicitly, measure cursor targets, and choose a poster that shows the result.
- Capture only trusted previews, inspect complete loops visually, and treat automated checks as supporting evidence.

## Anti Patterns

- Treating simulated interactions as real browser automation or a production application.
- Shrinking an entire desktop scene into a mobile column instead of composing a compact layout.
- Approving a demo from one still image or an automated pass without reviewing its full motion.

## Security Audit

- Audited at: 2026-11-01T14:40:56.957\+00:00
- Summary: All 400 presented static findings are false positives involving illustration code, assets, dependency metadata, or expected local tooling. One additional finding identifies unescaped scene labels that can inject HTML into contact sheets; no evidence found of keylogging, credential theft, or audit manipulation. The analyzer capped review at 400 of 2,018 matches; the remaining 1,618 are unconfirmed and require manual review before automatic publishing. Static review was capped at 400/2018 representative findings; omitted static matches are unconfirmed, so automatic publishing stays disabled until manual review.

## Stats

- Views: 0
- Downloads: 0
- Favorites: 0
- Popularity score: 0