Hands-OnAI
← All skills
🎬
AutomationNewFree

React View Transitions

Add smooth, native-feeling page and element animations in React. (For developers.)

Part of Vercel agent-skills

React View Transitions is an official Vercel skill for adding smooth, native-feeling animations with React’s View Transition API — page transitions, shared-element animations, list reordering, and directional navigation — all without reaching for a third-party animation library.

What it does

  • Implements page and route transitions with React’s View Transition API.
  • Creates shared-element, enter/exit, and list-reorder animations.
  • Skips third-party animation libraries entirely.

What's in the download

  • SKILL.md plus view-transition references and examples.

How to install (2 minutes)

  1. 1Download the .zip and unzip it — you’ll get a folder called react-view-transitions.
  2. 2In the Claude app: open Settings → Capabilities → Skills, choose Add / Upload, and select the folder (or the .zip).
  3. 3In Claude Code: drop the folder into your project’s .claude/skills/ directory, then type /skills to confirm it loaded.
  4. 4That’s it — the skill activates on its own when it fits what you’re doing.

Want to get the most out of your new skill?

Inside Hands-On AI Club we show you exactly how to use skills like this in real work — with step-by-step courses and a community to help you.