A design skill plus a small React kit that teaches your agent to make convincing faux product UI: still images, feature cards, cursor-driven demos and bento grids. It plans the story in a few beats, builds from solid examples, then films the result and fixes what it finds.
In short: A design skill plus a small React kit that teaches your agent to make convincing faux product UI: still images, feature cards, cursor-driven demos and bento grids. It plans the story in a few beats, builds from solid examples, then films the result and fixes what it finds. It is a free skill for people who use Claude Code, Codex or Cursor and want help with motion graphics.
Checked on · Added
| Agent / tool | Access / cost | Link |
|---|---|---|
| Claude Code | Paid Claude plan or API | claude.com/claude-code |
| Codex | ChatGPT plan or API | openai.com/codex |
| Cursor | Free tier + paid | cursor.com |
| GitHub repo | Open source · ★ 634 | benjitaylor/skills |
Image: from the GitHub README, shown with credit.
Real videos made with this skill, credited to their creators. Hover to preview.
APP DEMO0:24The author's 24-second demo: a grid of small app moments (a scheduler with Day/Week/Month tabs, a search box, a music player, a revenue chart, app icons) is clicked through by a cursor, with settings changing, tracks switching and numbers updating, all made as faux UI with the skill.
npx skills add benjitaylor/skills --skill stageshow
Install command copied from the project README. Check the README for the latest version.
A design skill plus a small React kit that teaches your agent to make convincing faux product UI: still images, feature cards, cursor-driven demos and bento grids. It plans the story in a few beats, builds from solid examples, then films the result and fixes what it finds.
Stageshow walks the agent through making a product illustration the way a designer would by hand: pick a look, plan the story in a few short beats, start from a well-built example, then build it in React. It covers…
Short excerpt from the README of benjitaylor/skills. Read the full README on GitHub.
Written by us so you can reuse it. Replace each [bracket] with your details.
The scenes are illustrations of a product, not your real app, so keep them honest to what the product does. Some bundled app icons and brand logos are not covered by the MIT licence; the NOTICE file lists them, so swap in your own before publishing. Output is React, so it fits best in a React project.
A design skill plus a small React kit that teaches your agent to make convincing faux product UI: still images, feature cards, cursor-driven demos and bento grids. It plans the story in a few beats, builds from solid examples, then films the result and fixes what it finds.
It works with Claude Code, Codex and Cursor. The code is on GitHub at benjitaylor/skills.
Free & open source (MIT for the skill folder). No account or API key. Runs with the agent plan you already pay for; filming uses Playwright with Chrome on your machine.
Run the install command from the README: “npx skills add benjitaylor/skills --skill stageshow”. Check the README on GitHub for the latest version, then follow the steps on this page.
We read 55 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine. How to check a skill before you install it →
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
SKILLA Claude Code skill that answers "how does this work?" by building the machine as one offline 3D page: it runs in the middle, panels read its live numbers, buttons open the part doing the work, and one click blows it apart. It can also record a short tour video of it.
Claude Code★ 1.1k
SKILLA clickable library of 192 named effects (motion-graphics moves, camera moves and transitions, UI parts, landing-page effects, photo looks), each with a moving sample and an example request. Its skill opens the gallery, lets you tick the ones you like and sends their specs and reference code straight to your agent.
Claude Code +1★ 849
SKILLA free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.
Claude Code★ 147
SKILL0:56Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k
SKILL0:34Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16k
SKILL0:28Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.
Claude Code +1★ 10.6kFree newsletter
New AI tools you can use right away, in plain words. Every Friday.
