Stageshow
Build faux product UI that looks like a real product, as a still illustration or an...
Install
npx skills add benjitaylor/skills --skill stageshow -g -a claude-code -y- Repository
- benjitaylor/skills470
- Category
- Design
- Updated
- 4d ago
- License
- See repository
- Context cost
- Heavyabout 4,486 tokens
- Runs scripts
- Yes, review before use
What it does
Build faux product UI that looks like a real product, as a still illustration or an animated demo with a cursor. Browser and app windows, dashboards, phones, notifications, terminals, bento grids and cursor walkthroughs, framed, masked and cropped the way a marketing page, feature card or docs hero needs them. Use whenever someone wants a fake or mocked UI, a product demo or walkthrough animation, a hero or feature-card illustration of an app, a product shot in the style of a polished marketing site, or an animated cursor doing things in an interface, even if they never say "faux UI". React and plain CSS.
Stageshow
Miniature product UI: a believable interface, framed in its space, as one still or a short animation in which one thing happens. The viewer recognizes the screen and sees the thing happen.
The one idea
It reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause.
Five ways it fails:
- Too much. Real text in every row, numbers everywhere, everything packed. The more detail, the more it looks generated.
- Wireframe. Two gray blobs and a button. Built too small, or stripped of what made it recognizable.
- Boxed. A whole window shrunk into a card with even margins: a screenshot pasted in, not a product shot.
- Flat. Every object the same weight in the same bordered card. The eye has nowhere to land.
- Bland. A gray window with a cursor, whatever the brief said. The brief's look and energy (a blueprint, glass over color, a Dynamic Island, a mascot) are the point; take what it asks for and build it to the rules, as
examples/hero-demodoes with its typed popup and terminal satellite (a satellite is a smaller second object, a receipt, phone or detail card, straddling the hero's edge).
The fix: a full, structured screen in quiet grays, real words only on what the story is about, placeholder lines for the rest, room to breathe, a crop that puts the eye where the story is. Simplify the words, not the context. An empty corner, a void under a list, rows spread to fill a pane, a window floating on a plate (a backdrop or tinted field behind it): unfinished, not calm.
These are authored illustrations, not browser automation: a.click() draws the cursor pressing, a.set() changes the scene.
