# UI walkthroughs: agent skills for product UI animation and screen recording edits

> **For AI agents:** find the right skill in one call — `curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>"` returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the how-to page.

How a product interface appears: screen-recording zoom and pan, UI that builds itself, floating panels, 3D tilts and dashboard reveals. 14 skills for Claude Code, Codex and Grok, by type: workflows take a brief to a finished video, effects and styles change how it looks, prompts and guides teach the agent the craft, models run the generation.

## Skills (14)

### Effects (12)

- [Zoom to the Action](https://varg.ai/how-to/skills/zoom-to-the-action.md) — HeyGen: The full app establishes, then the camera pushes 1.5–2× into the part being used and eases back out.
- [3D Tilted Dashboard Reveal](https://varg.ai/how-to/skills/tilted-dashboard-reveal.md) — HeyGen: The dashboard rises from a steep 3D tilt to flat, like a screen lifting toward the viewer.
- [Floating UI Panels in Depth](https://varg.ai/how-to/skills/floating-ui-panels.md) — HeyGen: The interface splits into its panels, which float apart in depth with parallax, then snap back.
- [UI Builds Itself Piece by Piece](https://varg.ai/how-to/skills/ui-builds-itself.md) — HeyGen: Grey skeleton blocks pulse once, then real cards, charts and text fill in with a stagger.
- [Before/After UI Wipe](https://varg.ai/how-to/skills/before-after-ui-wipe.md) — HeyGen: A divider sweeps across one screen, turning the old version into the new one underneath.
- [Card Expands Into Detail](https://varg.ai/how-to/skills/card-expands-to-detail.md) — HeyGen: A small card grows into a full detail panel in one continuous shape change.
- [Filmed Off a Monitor](https://varg.ai/how-to/skills/filmed-off-a-monitor.md) — HeyGen: The UI looks filmed on a real display: slight perspective, focus falloff and glare.
- [Form Fills Itself](https://varg.ai/how-to/skills/form-fills-itself.md) — HeyGen: A cursor tabs through a short form; fields type, validate and the submit button resolves to success.
- [Toggle Turns the Feature On](https://varg.ai/how-to/skills/toggle-turns-feature-on.md) — HeyGen: A cursor flips a settings switch and the result appears at once elsewhere in the UI.
- [Command Palette Pop](https://varg.ai/how-to/skills/command-palette-pop.md) — Kapish Dima · remocn: ⌘K opens a palette, a few letters filter the list, the highlight moves and Enter fires the action.
- [Pinned Mock, Changing States](https://varg.ai/how-to/skills/pinned-mock-changing-states.md) — HeyGen: One product frame stays put while tabs or captions switch it through several feature states.
- [Liquid Glass UI Layer](https://varg.ai/how-to/skills/liquid-glass-ui-layer.md) — HeyGen: Frosted, refractive glass cards and toolbars float over a colorful scene or photo.

### Guides (2)

- [Video editing skills for Claude Code and AI agents](https://varg.ai/how-to/skills/varg-video-edit-library.md) — varg: 206 named edits with recipes for FFmpeg, HyperFrames, Remotion and CapCut: cuts, transitions, titles, UI, numbers.
- [Rive](https://varg.ai/how-to/skills/rive.md) — Rive: Know when to reach for Rive for interactive graphics and motion, then start from its CLI or runtime docs.