Transitions UI generation

Plays an "agent is generating this" animation over any element on the page, then hands over to the real UI. Nothing is faked: the drawing is measured from the element itself, so the dotted outline, text lines and icons land exactly where the real ones appear.

Works in every agent that reads skills (Claude Code, Cursor, Codex, and others): install with npx skills add Jakubantalik/transitions.dev, or copy this folder into the project.

What it draws

In order, over one build (default 2400ms of drawing, about 2.6s in all):

1. Dot field. A grid of small dots ripples out from the centre, with matrix rain falling down its columns and a probe line sweeping across.
2. Construction. Guides run along the element's edges past its corners, corner handles pop in, and a size label counts up to the real size with a build timer.
3. Outline. The outline is traced from the top centre in both directions in small flowing dots, while loose dots fly in and land on it.
4. Parts. Every box, text line and icon path is traced in document order. Key elements (buttons, inputs, the largest boxes) get their own guides, handles and size label, and a targeting reticle jumps from part to part with a coordinate readout.
5. Reveal. The real UI comes in top to bottom behind a scan line, fading and sharpening on --ease-smooth-out, while the drawing is wiped away and the dots clear.

Options