vercel-react-view-transitionsyazan Vercel Labs

Vercel React View Transitions Skill.

Claude Code ve Codex için hareket ve video skill'i: React'in View Transition API'si ile doğal hissettiren sayfa geçişleri.

Motion & Video
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

vercel-labs/agent-skills · skills/react-view-transitions/SKILL.mdSKILL.md

--- name: vercel-react-view-transitions description: Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation … --- ## When to Animate ## Availability ## Implementation Workflow ## Core Concepts ## Styling with View Transition Classes ## Transition Types

2026-09-14 tarihinde yukarı akış dosyasından okunan ön bilgi ve bölüm başlıkları · tam hali 14.341 karakter

01 Ne yapar

vercel-react-view-transitions Skill'inin Claude Code ve Codex'te Yaptığı

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

React'in View Transition API'si ile arayüz durumları arasında animasyon yapmak için bir kılavuz: ViewTransition bileşeniyle neyin tanımlanacağını, startTransition, useDeferredValue veya Suspense ile ne zaman tetikleneceğini ve CSS sınıflarıyla nasıl kontrol edileceğini belirtin. Sabit bir öncelik sırasına göre beş deseni ele alır: paylaşılan öğe dönüşümleri, liste kimliği, durum değişikliği ve rota değişikliği, ayrıca addTransitionType ve Next.js App Router entegrasyonu üzerinden tür anahtarlı yönlü gezinme.

Bir ViewTransition sınırının nerede yer alması gerektiğini, default="none" gerektiği durumları, hangi tarayıcıların desteklediğini (Chromium 125+, Firefox 144+, Safari 18.2+) diğerlerinde zarif bir gerileme ile birlikte açıklar ve uygulama sırası, CSS tarifleri, desenler ve sorun giderme için referans dosyalarına işaret eder.

Neler üretir

Çok sayfalı uygulamalar için tür anahtarlı giriş ve çıkış eşlemelerini tutan yeniden kullanılabilir, yönlü bir sarmalayıcı bileşen.
Kaybolan ve görünen görünümlerde aynı adın yeniden kullanılmasıyla oluşturulan paylaşılan öğe dönüşümleri; örneğin bir küçük resmin bir kahraman görsele dönüşmesi.
Her iki anlık görüntüyü de barındıran görsel çiftini de kapsayan, view transition sözde öğelerine bağlı CSS kuralları.
Desteklenmeyen tarayıcıların gezinmeyi bozmak yerine animasyonu atladığı, zarifçe geriye düşen bir uygulama.

Örnek istemi görün ↗

Nasıl Çalışır

01
Animasyonun Ne Anlattığını Belirleyin
Bir sınır yalnızca ifade ettiği uzamsal ilişkiyi veya sürekliliği açıkça tarif edebildiğinizde eklenmelidir. Ne ilettiğini söyleyemiyorsanız eklemeyin.
02
Durumu Bir Sınır İçine Sarın
React, arka planda benzersiz bir view-transition-name atar ve document.startViewTransition'ı çağırır; bu nedenle startViewTransition'ı asla kendiniz çağırmazsınız.
03
Bir Transition ile Tetikleyin
Enter, exit, update ve share yalnızca startTransition, useDeferredValue veya Suspense üzerinden tetiklenir. Basit bir setState hiçbir şeyi animasyonlu hale getirmez.
04
Anlık Görüntüleri CSS ile Biçimlendirin
Giden ve gelen anlık görüntüler, kendi sınıf adlarınızı taşıyan view transition sözde öğeleri üzerinden hedeflenir; recipes dosyası da hazır animasyonlar sağlar.
05
Transition Türleriyle Etiketleyin
addTransitionType, bağlam türlerini üst üste yığarak ağaçtaki farklı sınırların farklı tepki vermesini sağlar; türe özel bir nesne de bu türleri enter, exit ve share sırasında CSS sınıflarına eşler.

02 Uyumunuzu bulun

vercel-react-view-transitions Skill Ne Zaman Kullanılmalı

Claude Code veya Codex'te bu türden hareket ve video işleri için vercel-react-view-transitions skill'ini kullanın. Uygunluk ve sınırlamalar skill'in kendi dosyasından alınmıştır.

İyi Uyum

Bir JavaScript animasyon döngüsü yerine tarayıcının yerel document.startViewTransition'ı üzerinden UI durumları arasında animasyon oluşturma.
Liste yeniden sıralama animasyonları ve sıralı görünümler arasında yönlü ileri veya geri gezinme.
React'te üçüncü taraf bir animasyon kitaplığı eklemeden durum geçişleri isteyen ekipler.
Suspense fallback'leri ve basit enter ile exit string prop'ları tarafından yönlendirilen, veriler geldikçe içeriği açığa çıkarma.

Sınırları Bilin

Chromium 125+, Firefox 144+ ve Safari 18.2+ dışındaki tarayıcılar animasyonu basitçe atlar, bu nedenle transition orada görünmez olur.
Sayfa gezinmesi sırasında öğe başına kademeli (staggered) animasyonlar Next.js'de bugün mevcut değildir.
Bir bütün olarak takılan veya kaldırılan bir üst içindeki iç içe sınırlar, kendi enter veya exit animasyonlarını çalıştırmaz.
Geri ve ileri gezinme, türe bağlı yönlü kaymaları oynatamaz, çünkü bu transition'lar hiçbir tür taşımaz.

Ne Sağlamalısınız

Denetlenecek mevcut bir uygulamaSkill, çalışan bir uygulamaya uygulanır ve implementasyon referansının kod değişiklikleriyle değil, denetimle başlayarak adım adım takip edilmesi amaçlanır.
Her gezinmenin hiyerarşik mi yoksa yanal mı olduğuListeden detaya geçiş, uzamsal derinlik ilettiği için türe bağlı ileri ve geri kaymalar alır; oysa sekmeden sekmeye gezinme almaz.
Sizin durumunuz için CSS tarifleriRecipes dosyası, kopyalanıp ardından uygulamanın kendi markup'ına ve sınıf adlarına uyarlanacak animasyonları barındırır.

03 Skill'in içinde

vercel-react-view-transitions Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 7 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Uygulanabilir Her Deseni Sırasıyla Uygulayın
Paylaşılan öğe, Suspense açılışı, liste kimliği, durum değişikliği ve rota değişikliğini bu öncelik sırasıyla ele alın. Bir deseni yalnızca uygulamanın buna uygun bir kullanım durumu yoksa atlayın.
Sınırı Herhangi Bir DOM Düğümünden Önce Yerleştirin
Bir div, ViewTransition'ı sarıyorsa enter ve exit bastırılır ve animasyon sessizce hiç çalışmaz.
Default="none"'u Kasıtlı Olarak Kullanın
Bunu adlandırılmış veya paylaşılan öğelerde ve tür anahtarlı sayfa sınırlarında ayarlayın, aksi halde her geçişte tarayıcının çapraz geçiş efekti tetiklenir.
Her Adlandırılmış Sınıra Benzersiz Bir Ad Verin
Aynı anda bir isim için yalnızca bir ViewTransition monte edilebilir, bu nedenle photo-${id} gibi öğeye özel adlar kullanın ve hem bir modalda hem de bir sayfada adlandırılmış bir sınır işleyen yeniden kullanılabilir bileşenleri kontrol edin.
Enter'ı Exit ile Eşleştirin, Yönlü VT'leri Sayfalarda Tutun
Her zaman yönlü bir animasyonun her iki tarafını da tanımlayın ve yönlü sınırları düzenler yerine sayfa bileşenlerine yerleştirin.
Paylaşılan Morph'ların Bulunduğu Sayfalarda Asla Fade Out Kullanmayın
Bir fade-out çıkışı paylaşılan öğe morph'unu bozar, bu nedenle bu çıkışlar için bunun yerine yönlü bir kayma kullanın.
Reduced Motion CSS'ini Ekleyin
CSS tariflerindeki reduced-motion bloğu, animasyonların yanında global stil dosyanıza eklenmelidir.

04 İşe koyun

Claude Code veya Codex'e vercel-react-view-transitions Yükleme

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza vercel-react-view-transitions Ekleme

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions

skills/react-view-transitions/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk Hareket ve Video Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Add view transitions to [my Next.js App Router app]: tapping [a list item] should morph [its image] into the detail page hero instead of hard-navigating. Use directional nav-forward and nav-back slides for that hierarchical navigation, give the detail content a Suspense reveal when [the data] resolves, and keep background revalidations silent with default="none". Extract the type-keyed page transition into a reusable wrapper and add the reduced motion CSS.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Herhangi bir kodu değiştirmeden önce implementasyon referansındaki denetimi çalıştırın.
Bağlanmış bir morph'un gerçekten tetiklendiğini doğrulayın: açık bir share prop'u olmadan default="none", share'in none olarak çözümlenmesi anlamına gelir ve hiçbir şey animasyonlu olmaz.
Dönüşmesi gereken her bağlantının geçiş türünü eklediğini doğrulayın; bunu ya next/link üzerindeki transitionTypes ya da addTransitionType ile yapın.
Sekmeden sekmeye gezinmenin yönlü kaymalar kullanmadığından emin olun, çünkü bu, uygulamanın sahip olmadığı bir mekânsal derinliği ima eder.

OpenDesign'da vercel-react-view-transitions'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Vercel Labs
Repository: github.com/vercel-labs/agent-skills Branch main
Skill dosyası: skills/react-view-transitions/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 063bee9
License: MIT (SKILL.md'de beyan edilmiş) Skill veya repository seviyesinde lisans dosyası bulunamadı; yukarıdaki değer SKILL.md'nin beyan ettiği değerdir. SKILL.md'de beyan edildiği şekilde MIT; repository'de LICENSE dosyası bulunamadı.
Repository yıldızları: 31.174 GitHub anlık görüntüsü tüm vercel-labs/agent-skills repository'si için 2026-09-14 tarihinde alındı. vercel-react-view-transitions için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

Skill'in Kendi Açıklaması

React'in View Transition API'sini kullanarak düzgün, doğal hissettiren animasyonlar uygulamak için kılavuz (`<ViewTransition>` bileşeni, `addTransitionType` ve CSS view transition sözde öğeleri). Kullanıcı sayfa geçişleri eklemek, rota değişikliklerini canlandırmak, paylaşılan öğe animasyonları oluşturmak, bileşenlerin giriş/çıkış animasyonunu yapmak, liste yeniden sıralamasını canlandırmak, yönlü (ileri/geri) navigasyon animasyonları uygulamak veya Next.js'de view transition'ları entegre etmek istediğinde bu skill'i kullanın. Ayrıca kullanıcı view transition'lardan, `startViewTransition`'dan, `ViewTransition`'dan, transition türlerinden bahsettiğinde veya React'te üçüncü taraf animasyon kütüphaneleri olmadan UI durumları arasında animasyon yapmayı sorduğunda kullanın.

SKILL.md'den front-matter açıklaması. Dosyanın tamamı yaklaşık 14.341 karakter. Dosyanın tamamını GitHub'da okuyun.

Vercel React View Transitions

vercel-react-view-transitions'ı Gerçek Bir Motion ve Video Görevinde Çalıştırın.

OpenDesign'ı indirin, vercel-react-view-transitions'ı SKILL.md bağlantısından içe aktarın, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın

Terminal

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-view-transitions

vercel-react-view-transitions Skill'inin Claude Code ve Codex'te Yaptığı

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

vercel-react-view-transitions Skill Ne Zaman Kullanılmalı

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

vercel-react-view-transitions Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Uygulanabilir Her Deseni Sırasıyla Uygulayın

Sınırı Herhangi Bir DOM Düğümünden Önce Yerleştirin

Default="none"'u Kasıtlı Olarak Kullanın

Her Adlandırılmış Sınıra Benzersiz Bir Ad Verin

Enter'ı Exit ile Eşleştirin, Yönlü VT'leri Sayfalarda Tutun

Paylaşılan Morph'ların Bulunduğu Sayfalarda Asla Fade Out Kullanmayın

Reduced Motion CSS'ini Ekleyin