# view-transitions

# view-transitions

> _Catalogue généré le 2026-05-11_

## En une phrase

Implémente l'API View Transitions du navigateur en progressive enhancement pour ajouter des transitions de pages fluides (fade, slide, shared element) sans casser l'accessibilité ni la performance.

## Quand l'utiliser

- Sur un portfolio où la navigation entre projets doit avoir un ressenti premium
- Pour une landing marketing où on veut un effet "wow" subtil entre sections
- Sur une SPA Next/Nuxt/Astro qui veut des transitions sans librairie tierce
- Quand le client demande des transitions "comme les apps mobiles"
- Pour ajouter une couche de polish à un site déjà fonctionnel sans tout refaire

## Comment l'invoquer

- **Slash command** : `/view-transitions`
- **Auto-invocation** : ✅ Oui — pour navigation premium, portfolios, marketing, apps

## Description détaillée

C'est la version "perception utilisateur" du skill, là où `motion-view-transitions` est plus orientée motion designer. L'objectif ici est plus pragmatique : ajouter des transitions de pages **uniquement si elles apportent un bénéfice clair** (perception de fluidité, continuité visuelle entre deux états), pas juste pour faire joli.

Le skill commence par vérifier la compatibilité navigateur et définit une stratégie de fallback : sur les navigateurs qui ne supportent pas l'API (Safari traîne, Firefox arrive), la navigation reste classique. Il implémente ensuite des transitions simples — généralement un fade ou un slide subtil — et propose une variante "shared element" pour les cas où un élément doit visuellement persister entre deux pages.

Deux préoccupations transverses guident l'implémentation : **préserver le focus** (l'utilisateur clavier ne doit pas être perdu après une transition) et **respecter `prefers-reduced-motion`** (transition désactivée pour les utilisateurs sensibles au mouvement). Tu repars avec une stratégie support+fallback claire, un snippet minimal JS + CSS, les variantes fade/shared element, et les notes d'accessibilité associées.

Pour Thymon : c'est le skill rapide à dégainer quand tu veux ajouter une touche premium à un projet sans installer Motion ou GSAP. Plus léger, plus moderne, suffisant dans 80 % des cas.

## Source

- **Plugin** : `perso (standalone)`
- **Nom interne** : `view-transitions`
- **Fichier** : `/home/thymon/.claude/skills/view-transitions/SKILL.md`