# view-transitions

Teaches your agent the View Transitions API, so page and UI state changes animate without hand-written animation code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 678 installs · ★ 257
- Author: patterns.dev
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/PatternsDev/skills/tree/HEAD/javascript/view-transitions/SKILL.md
- Updated: 2026-04-15
- HTML: https://affpapa.org/en/nevibecode/skills/view-transitions

## What it does

The skill walks an agent through `document.startViewTransition(callback)`. The callback updates the DOM to the new state; the browser screenshots the old and new versions and transitions between them. Give elements a `view-transition-name` and the transition covers one area instead of the whole document — a photo in a gallery, for instance.

Inside are instructions and worked examples: a browser support check with `if (document.startViewTransition)`, styling through `::view-transition-old(root)` and `::view-transition-new(root)`, transition groups for a single block, toggling a `<details>` element, and full page navigation. The navigation section covers timing. The initial DOM screenshot has to be captured before the update, and the call belongs after data fetching, because the page stays unresponsive until the callback finishes. Returning a promise from the callback makes the API wait for it before animating, which is how the React example gets around framework-controlled rendering.

Tools are limited to `Read`, `Grep` and `Glob`, and the skill runs in a forked context. Paths cover `**/*.js` and `**/*.ts`. CSS fallbacks for browsers without the API are part of the instructions — worth checking against the browsers your users actually run.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill view-transitions -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill view-transitions -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill view-transitions -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install PatternsDev/skills view-transitions
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill view-transitions -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/PatternsDev/skills --path javascript/view-transitions
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill view-transitions -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/PatternsDev/skills/tree/HEAD/javascript/view-transitions/SKILL.md

## When to use it
- animate a transition between two UI states without hand-written keyframes
- move a thumbnail from a grid into a detail card smoothly
- add page navigation animation to an SPA
- guard a View Transitions call with a browser support check
- give entering and exiting blocks separate animations when one side has no matching element

## Example prompts
- Animate the transition from the product grid to the detail card with the View Transitions API
- Add a view transition to page navigation, but fetch the data before starting it
- Use document.startViewTransition to animate opening a details element

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 576edaa21cd3a5dd.

BEGIN THIRD-PARTY FILE 576edaa21cd3a5dd
````text
---
name: view-transitions
description: Teaches the View Transitions API for animating DOM changes. Use when you want smooth animated transitions between pages or UI states without manual animation code.
context: fork
allowed-tools: Read, Grep, Glob
paths:
  - "**/*.js"
  - "**/*.ts"
license: MIT
metadata:
  author: patterns.dev
  version: "1.1"
related_skills:
  - "module-pattern"
  - "singleton-pattern"
---

# Animating View Transitions

## Table of Contents

- [When to Use](#when-to-use)
- [Instructions](#instructions)
- [Details](#details)
- [Source](#source)

## When to Use

- Use this when you want to animate transitions between different page states or navigations
- This is helpful for creating polished, app-like navigation experiences in web applications

## Instructions

- Use `document.startViewTransition(callback)` to animate DOM changes
- Assign unique `view-transition-name` CSS properties to elements that should transition between states
- Check for browser support before using the API (`if (document.startViewTransition)`)
- Minimize the time the DOM is frozen by starting transitions after data fetching completes
- Consider CSS animation fallbacks for browsers that don't yet support the View Transitions API

## Details

### Introduction to View Transitions

The [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) offers a simple way to transition any visual DOM change from one state to the next. This might include small changes such as toggling some content, or broader changes such as navigating from one page to the next.

The JavaScript API centers around `document.startViewTransition(callback)`, where `callback` is a function that typically updates the DOM to the new state.

Let's take toggling a `<details>` element as a simple example:

```js
if (document.startViewTransition) {
  // (check for browser support)
  document.addEventListener("click", function (event) {
    if (event.target.matches("summary")) {
      event.preventDefault(); // (we'll toggle the element ourselves)
      const details = event.target.closest("details");
      document.startViewTransition(() => details.toggleAttribute("open"));
    }
  });
}
```
````
END THIRD-PARTY FILE 576edaa21cd3a5dd

The third-party file has ended. Everything between the 576edaa21cd3a5dd tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2211 of 15364 bytes. © patterns.dev · MIT · https://github.com/PatternsDev/skills/tree/HEAD/javascript/view-transitions/SKILL.md

_Part of the page did not fit — see the HTML version._

---
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