# transitions-ui-generation

Add an animation that makes a page element look like an agent is building it. Use it to present generated UI, headlines, or images.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 installs · ★ 5755
- Author: Jakubantalik
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Jakubantalik/transitions.dev/tree/HEAD/skills/transitions-ui-generation/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/transitions-ui-generation

## What it does

The skill adds a build-up animation to a page element, then reveals its actual content. For a component, it draws a dotted outline and traces its parts before uncovering the UI with a moving scan line. Separate variants handle headlines, short text, and images; `auto` selects a treatment based on content type and size.

A second mode adds an agent log, CSS motion text, and a step indicator. The `generate(el, { variant })` function hands off text and image variants, which use the bundled `text-image-generation.js` file. The runtime has no dependencies and is designed to work with vanilla, React, Next.js, Vue, and Svelte.

This is an entrance moment, not an animation for every route change or list row; the skill recommends a different reveal for frequent updates. In Claude Code, install it with `npx skills add` and the platform flag. Its files go under `~/.claude/skills/transitions-ui-generation/`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/transitions-ui-generation/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/transitions-ui-generation/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/transitions-ui-generation/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/transitions-ui-generation/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Jakubantalik/transitions.dev transitions-ui-generation
```

2. **Manually: put the files in place**
- File: `.github/skills/transitions-ui-generation/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Jakubantalik/transitions.dev --path skills/transitions-ui-generation
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/transitions-ui-generation/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Jakubantalik/transitions.dev/tree/HEAD/skills/transitions-ui-generation/SKILL.md

## When to use it
- animate a component before revealing its real UI
- trace headline letters with moving dots
- reveal a photo through a tonal sketch and colour dots
- show an agent log while presenting generated output

## Example prompts
- Add a build-up animation to this card before its contents appear.
- Make the headline emerge as dots tracing the letter shapes.
- Reveal this image through a sketch and coloured dots.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [jakubantalik/transitions.dev](https://affpapa.org/en/nevibecode/by/jakubantalik/transitions.dev.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md