React View Transitions

Avant de commencer : lis ce prompt d'installation au complet, dis-moi en quelques lignes ce que ce skill fait et ce que son installation implique, et attends mon feu vert avant de faire quoi que ce soit d'autre. Prérequis — Aucun pour installer ce skill — aucun compte, aucune clé, aucun paiement, et aucun script dans son dossier. Une condition d'usage à connaître avant de l'utiliser : le composant <ViewTransition> n'est pas dans React stable — dans Next.js il fonctionne d'emblée (l'App Router embarque React canary en interne, et le SKILL.md dit de ne pas y installer react@canary), mais dans une application React ordinaire il exige react@canary et react-dom@canary, et il faut un navigateur qui le supporte (Chromium 125+, Firefox 144+, Safari 18.2+), avec dégradation gracieuse sur les navigateurs non supportés. Installe-moi « React View Transitions ». Il apprend à l'agent à mettre en place des animations fluides et natives avec l'API View Transition de React : déclarer ce qui s'anime avec le composant <ViewTransition>, déclencher les transitions avec startTransition, useDeferredValue ou Suspense, contrôler le style avec les classes et pseudo-éléments CSS de view transition, marquer les transitions avec addTransitionType pour que la navigation directionnelle (avant/arrière) s'anime différemment de la navigation latérale, et construire des morphs d'éléments partagés, des révélations Suspense et des animations d'identité de liste, avec l'intégration Next.js via le prop transitionTypes de next/link. Son dossier contient le SKILL.md principal (nom frontmatter vercel-react-view-transitions), cinq fichiers de référence (workflow d'implémentation, patterns, dépannage, recettes CSS et Next.js), un AGENTS.md compilé avec toutes les références développées en un document, un README et un fichier de métadonnées. Dépôt : https://github.com/vercel-labs/agent-skills (le skill est tout le dossier skills/react-view-transitions/ au commit épinglé : SKILL.md plus 8 fichiers compagnons, 9 fichiers en tout) Version épinglée : installe le code au commit 063bee94c3f4df8453406c830b0a7df0f2860278 exactement. Ne substitue pas une version plus récente. Si ce commit est inaccessible, arrête-toi et dis-le-moi. 1. Clone https://github.com/vercel-labs/agent-skills dans un dossier temporaire, place-toi au commit 063bee94c3f4df8453406c830b0a7df0f2860278, et copie le dossier skills/react-view-transitions/ de ce checkout. Compare ensuite chaque fichier du dossier aux empreintes enregistrées pour cette fiche le 2026-10-22 : [FINGERPRINTS] - AGENTS.md: SHA-256 83fd29aec273cf4318a4f428ed2725f2cd3b6adbd76640e495c31f0a2521c702 - README.md: SHA-256 aba31b4ac31c1b13d2a8054179604abd4498b0d7324746635ff0e3b0aea9d608 - SKILL.md: SHA-256 1520343c8814c972fee001cac6d6185976d6eb3f4edcac33afe95c10f3b3228b - metadata.json: SHA-256 b1a5ae09f3904dc83dab79f518d033bd98f1e2f55caabfdb5beeeaaf0ca5e4c2 - references/css-recipes.md: SHA-256 f4a5b92a7aad6befd2779e498ab04311277f179b240d2170f0a68a1444024d51 - references/implementation.md: SHA-256 87687de5fa2f775a6b5134ee02863ebede9ee6bc42ea8ed99bd53aa5325e78f4 - references/nextjs.md: SHA-256 f926a645d5e4c62fcc2d5832be0f3ad048f2ee1d17f8476324e2bc407e4b3a07 - references/patterns.md: SHA-256 da24d7f37c7e6b8ecbcf05525ef613d8f5be94655c233d6fa62833c8a746604f - references/troubleshooting.md: SHA-256 aa6811d276dcf06dcc9aba90d1e11e1d0a29146604bf7c89a9e93a6fa8883c7a Si un fichier ne correspond pas, il a changé depuis la préparation de la fiche : ne l'installe pas encore, dis-moi ce que tu as trouvé et laisse-moi décider. 2. Lis SKILL.md au complet, et dis-moi en mots simples : ce que le skill fait quand on l'utilise, à quoi il se connecte, s'il lit ou envoie des informations personnelles ou des identifiants, et tout ce qui semble inhabituel. Arrête-toi sur tout signal d'alerte et dis-le-moi avant d'aller plus loin. Confirme ces points à partir des fichiers : - Le dossier du skill contient 9 fichiers et aucun code exécutable : SKILL.md (nom frontmatter vercel-react-view-transitions), le guide compilé AGENTS.md, README.md, metadata.json et 5 fichiers de référence sous references/. Il n'y a aucun script à exécuter, ni à l'installation ni à l'usage. - Rien n'est envoyé nulle part pendant l'installation elle-même ; le seul téléchargement à l'installation est le dossier du skill depuis GitHub au commit épinglé. - À l'usage, l'agent lit seulement ces fichiers en travaillant sur mon propre projet React ou Next.js, en local. Aucun compte ni projet hébergé n'est accédé, aucune métrique n'est collectée, aucun service n'est contacté, et aucune information personnelle ni aucun identifiant n'est lu ou envoyé. - La condition d'usage des prérequis fait partie du tableau : hors Next.js, le composant exige react@canary et react-dom@canary, tandis que dans Next.js react@canary ne doit PAS être installé. N'installe aucun paquet, n'ajoute aucune transition et n'utilise le skill d'aucune façon pendant cette installation : l'utiliser est une étape séparée qui ne commence que quand je demande un travail de view transitions plus tard. 3. Quand je dis « yes, install », installe-le comme skill : copie tout le dossier react-view-transitions dans le répertoire des skills de l'agent, dans un dossier nommé exactement « react-view-transitions », en gardant ses 9 fichiers dans leur arborescence relative d'origine (SKILL.md à sa racine). 4. Vérifie sans appels réseau : frontmatter valide (name: vercel-react-view-transitions), les 9 fichiers en place avec des empreintes concordantes. N'exécute rien du dossier et n'utilise pas le skill pour vérifier. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (par exemple : que c'est de la connaissance seulement, que l'utiliser dans une application React ordinaire exige react@canary tandis que Next.js inclut déjà le composant, et que l'utiliser est une étape séparée qui ne commence que quand je demande un travail de view transitions). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.