view-transitions

view-transitions

Catalogue généré le 2026-05-11

En une phrase

ImplémenterImplémente l'API View Transitions du navigateur en progressive enhancement pour ajouter des transitions de pages via View Transition API en progressive enhancementfluides (fallbackfade, safe).slide, Àshared utiliserelement) poursans navigationcasser premium,l'accessibilité portfolios,ni marketing,la apps.performance.

Quand l'utiliser

• VoirSur un portfolio où la descriptionnavigation ci-dessusentre etprojets ladoit sectionavoir «un ressenti premium

Pour allerune pluslanding loinmarketing ».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 (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— pour navigation premium, portfolios, marketing, apps

PourDescription allerdétaillée

C'est la version "perception utilisateur" du skill, là où motion-view-transitions est plus loinorientée

Viewmotion Transitionsdesigner. (ProgressiveL'objectif Enhancement)

ici

Objectif

est

Ajouterplus pragmatique : ajouter des transitions de navigationpages fluides sans casser accessibilité/perf.

Procédure

Vérifier compat / stratégie fallback Implémenter uniquement si elles apportent un bénéfice clair (perception,perception continuité)de Préserverfluidité, focuscontinuité visuelle entre deux états), pas juste pour faire joli.

Le skill commence par vérifier la compatibilité navigateur et réduiredéfinit motionune sistratégie demandé

de Définirfallback : 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 :— fade/généralement un fade ou un slide subtil —

Outputet attendu

propose

une Stratégievariante "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 (supportl'utilisateur +clavier fallback)

ne Snippetdoit 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)CSS, Variantesles (fadevariantes / fade/shared element)element, Noteset a11yles +notes reduced-motiond'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