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