Stageshow is a skill that helps your agent make better faux UI.¹ Most good models can do this now without a dedicated skill, but the results often look sloppy and heavy-handed, and that's the gap Stageshow is for.

I've made a lot of these by hand, and they take far longer than they should. No single part is especially hard, but there are a hundred small decisions and every one of them shows. Stageshow is my attempt to write those decisions down, so an agent can make them too.

npx skills add benjitaylor/skills --skill stageshow

That adds the skill for any agent: Grok Build, Claude Code, Codex, Gemini, etc. Then ask for something small: one interaction, in one product, at one size.

A small looping demo for our homepage hero: someone assigns an issue to a teammate.

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, so you can put it anywhere and change it like the rest of your code.

The skill also comes with a playground. Run it from the skill's folder:

npm install
npm run dev

It has every example in the skill, the kit's parts on their own, and a set of comparisons: the same thing done badly and done well, side by side. They're there for the agent as much as for you. "Don't shrink the whole app into a card" is easy to agree with and easy to skip, but much harder to ignore once you see both side by side.

The skill is built around one sentence:

Faux UI from agents tends to go wrong in the same few ways. The most common are too much (real words in every cell, packed tight), too little (a wireframe that doesn't read as a product) and boxed (the whole window shrunk into a card, like a pasted screenshot). Then there's flat, where everything has the same weight, and bland, where the brief's style never shows up.

Here's one demo going from the first to the last, the way the agent builds it: someone assigns a support conversation to Maya.

Left to itself, an agent drifts toward the first. It knows what a support inbox contains, so it fills every row. The skill has it keep only the words the story needs and use placeholder lines for the rest, so the inbox still looks full without asking you to read it. It also decides the crop first, so it doesn't waste time building things nobody will see.

Every demo is a stage: a canvas with a design size. Its contents are drawn from state, and a script changes that state one beat at a time. The cursor is part of the stage, and it aims at things by name.

async function script(a: Act<S>) {
  await a.click({ at: "share" }); // arcs there, presses
  await a.set({ open: true }); // resolves once painted
  await a.wait(2000); // the payoff holds
  await a.click({ at: "close" });
  await a.set({ open: false });
  await a.move({ x: 600, y: 300 }); // back where it began
}

Parts stay mounted while they transition, so they can move in and out instead of popping. Positions are measured, so the cursor lands in the right place and overlays line up at any size. And the kit handles the motion that's hard to get right by hand, like a number that rolls only the digits that changed, a card flying into a slot, or a message forming out of the text field.

There's also a camera, so a stage can push in on the important bit and pull back out. It sits on top of the scene, so you don't have to change the scene to use it.

A look is a theme, a palette and how many real words there are. They're props on the stage, and they work by swapping the kit's colours, so a scene is written once and every look follows.

A look can also come from your own design system. The kit's colours, type, radii and spacing are all design tokens, so the agent reads your product's tokens and maps them onto the kit's. The demo then uses your real colours, fonts and corner radii, and sits next to the actual product without looking like a mock-up of it.

The skill gives the agent a workflow. Most of it happens before any code is written.

Agents increasingly check their work, but usually by reading the code back or taking a screenshot once it has settled. Neither shows the motion in between, which is where the bugs often are: a pill that hops 4px on its way in, or one frame where everything has faded out. Stageshow has the agent film the demo instead, as a contact sheet of the whole sequence with a report that flags anything it can measure, and then watch the playback for what a report can't catch.

To test it, I'd give a fresh agent the skill and a short prompt, and nothing else. Then I'd give the same prompt to an agent without the skill, so I could compare the two side by side.

Whenever something looked off, I resisted fixing it myself. Instead, I'd write down what was wrong, update the skill, and run the whole round again from scratch. I did this a lot.

Below are some examples. Without Stageshow, even the best models go overboard. Sometimes the result is close, and one detail makes it look sloppy, like a clumsy cursor or a fake iOS status bar. Sometimes it's worse, with elements overlapping or out of line. With it, I get something much closer to what I'd make myself. It's opinionated, though, and a lot of it is just my taste.²

Rules alone only got so far. An agent told to run a window off the edge of the frame barely does it. Shown an example that does, it gets it right. So the skill ships with examples to copy from. Here's a tour, starting with the two things nearly every demo has: a window and a cursor.

The window is usually the hero, so its chrome is the first thing that tells you what you're looking at. Put an address bar on a native Mac app and the whole picture reads as made up. There's no kind prop: the chrome follows from what you pass, and the traffic lights sit in exactly the same spot in every one.

Glass

For a product page there are lighter browsers too. Glass is frosted, so it takes the colour of whatever is behind it.

Quiet

The quiet browser (chrome="card") is one white card under a long soft shadow, for when the rest of the page is already busy.

macOS 26

A product shown on the newest macOS gets the newer window: bigger lights, a floating sidebar and the tall toolbar.

A cursor should move like a hand: shallow arcs timed by distance, with presses you can see. Pick one style for a whole site, so every demo on a page points the same way, and the script doesn't change between them.

It also changes shape as it crosses into an element, like a real one would. Each element says which cursor it wants, so the script doesn't have to.

Then the demos themselves, all made with Stageshow, starting with hero demos: the big animated story at the top of a homepage.

Small cards that show one feature, for a grid of them.

Phones are driven by touch instead of a cursor, so the motion is different.

Sometimes a demo needs to point at something: what a point on a chart means, where an event went, which setting changed what. I try to keep these to a minimum, though. The product should still be the main thing, and each line should say one thing.

Bento grids usually go wrong by treating every tile the same. Each one gets its own little window, and the section ends up reading as a wall of screenshots. Stageshow plans the grid as one picture instead: only a third to a half of the tiles show UI, window chrome appears once, and no tile sits next to another of the same kind.

Products you already know are the hardest test, because any wrong detail jumps out. Most of these started from a single sentence.

The checks catch mistakes, not dull ideas. A demo can pass every one and still not be worth watching, so you still have to look at it yourself.

It also can't draw, so anything that needs illustration or photography is better made by hand and dropped in.

Most of the rules started as a note on a real demo, like "the shadow is too harsh" or "this title isn't centred." Once a note is in the skill, every demo after it gets it for free. You can do the same: when you correct a demo, ask the agent to add the note to the skill.

Model taste is getting better with every release, and I suspect a skill like this is only useful for a while, since much of what it teaches and includes could soon come built in.

Some of it already has. Early on in making this, the references had rules a newer model simply didn't need, like keeping the traffic lights the right size, and as the models improved those rules quietly stopped doing anything.

Others have held up across every model I've tried, mostly the ones about framing and motion. Models are perfectly capable of getting those right, but they don't seem to know that they matter until something tells them.

Until then, it helps, and every demo made with it is a small, well-built example of this kind of UI, which is the sort of thing models learn from. If it plays a small part in making itself unnecessary, that's fine by me.

If you want to give it a go:

npx skills add benjitaylor/skills --skill stageshow