transitions-ui-generation — Claude Code skill for generation effects
Add an animation that makes a page element look like an agent is building it. Use it to present generated UI, headlines, or images.
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a claude-codeWhat transitions-ui-generation 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/.
What it helps with
- 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 for the agent
- 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.
How to install transitions-ui-generation
1Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a claude-code2Manually: put the files in place
~/.claude/skills/transitions-ui-generation/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/transitions-ui-generation/
1Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a codex2Manually: put the files in place
.agents/skills/transitions-ui-generation/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a cursor2Manually: put the files in place
.cursor/skills/transitions-ui-generation/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Jakubantalik/transitions.dev transitions-ui-generation2Manually: put the files in place
.github/skills/transitions-ui-generation/SKILL.md1Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a gemini-cli2Platform CLI
gemini skills install https://github.com/Jakubantalik/transitions.dev --path skills/transitions-ui-generationManually: put the files in place
.devin/skills/transitions-ui-generation/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about transitions-ui-generation
How do I install transitions-ui-generation in Claude Code?
Run npx skills add Jakubantalik/transitions.dev --skill transitions-ui-generation -a claude-code. The skill files are placed at ~/.claude/skills/transitions-ui-generation/SKILL.md.
What does transitions-ui-generation do?
It animates the build-up of UI, text, or an image, then reveals the actual page element. An alternate mode adds an agent log and a step indicator.
Should I use it for every route change?
No. The skill describes this as an effect for a result appearing, not for repeated route transitions or list rows. It points to a different reveal for frequent updates.
