synthetic-ui-demo

Installation
SKILL.md

Synthetic UI Demos

Nothing is screen-recorded. Claude Code reads the product's repo, rebuilds only the screens a scene shows as static React, and a scripted cursor and camera perform the flow in Remotion. Every click is a frame number, so a scene re-renders identically, never needs a seeded account or a live environment, and is updated by editing code when the product changes.

Reference builds (read them alongside this skill; both build without the product repos):

  • examples/ds-free-schedule-demo: one 26s flow (schedule a call) with a narrator tile. The simplest complete case. Its src/Demo.tsx is a single timeline with every cursor keyframe, click and camera move.
  • examples/ds-release-649: an 80s release-notes video, eight scenes across three apps. src/Release.tsx sequences the scenes, src/scenes/ has one file per release item, and src/room/ and src/ac/ are the screen kits.

When to use this vs. Playwright

Installs
11
GitHub Stars
2.3K
First Seen
1 day ago