106.9K+Télécharger
Aller au guide d’utilisation
Transitions.devpar Jakubantalik

Transitions.dev Skill.

Appliquez des transitions CSS propres aux composants et des tokens de mouvement sémantiques.

  • Transitions
  • Animation web
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · transitions-devSKILL.md
Tâche Appliquez des transitions CSS propres aux composants et des tokens de mouvement sémantiques. Résultats Une recette de transition sélectionnée avec ses variables CSS requises. Avant de commencer Fournissez balisage, styles, gestion d’état et tokens existants. Examinez la licence personnalisée avant d’adapter une recette ; redistribution et modèles ont des conditions spécifiques.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Appliquez des transitions CSS propres aux composants et des tokens de mouvement sémantiques

Explorez des transitions CSS pour menus, modales, textes et contrôles, avec tokens sémantiques, points de connexion d’état et tests d’interactions répétées.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

transitions-dev fournit des recettes CSS portables avec sélecteurs à espace de noms et variables sémantiques de mouvement. Il associe le composant visible à une recette : menu ancré à son déclencheur, modale, texte changeant ou indicateur d’onglet coulissant. L’implémentation relie les points de connexion d’état documentés au comportement réel de l’application.

Le skill propose aussi examen et affinage. L’examen repère les usages possibles sans modifier ; l’affinage associe les valeurs ponctuelles aux tokens selon leur sens. Une animation de fermeture utilise un token de durée de fermeture pour son rôle, pas parce que sa valeur actuelle est numériquement proche.

Livrables attendus

  • Une recette de transition sélectionnée avec ses variables CSS requises.
  • Des classes ou attributs d’état documentés reliés au composant.
  • Un examen par fichier ou une proposition d’affinage des tokens sémantiques.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Identifier le composant

    Examinez l’élément et son changement d’état. Distinguez menu ancré et modale centrée, ou remplacement de texte et déplacement de page.

  2. 02
    Ajouter tokens et connexions d’état

    Utilisez une seule fois le bloc de variables partagé ou les variables de la recette choisie. Préservez nettoyage de fermeture, relecture et orchestration JavaScript requise.

  3. 03
    Tester les répétitions

    Ouvrez, fermez et rouvrez le composant. Vérifiez la branche de réduction des animations et la synchronisation entre durées variables et logique de nettoyage.

02 Cas d’usage

Quand l’utiliser

Fournissez balisage, styles, gestion d’état et tokens existants. Examinez la licence personnalisée avant d’adapter une recette ; redistribution et modèles ont des conditions spécifiques.

Un bon choix

  • Un composant nécessite une transition définieLes recettes relient le CSS à des états d’interface reconnaissables plutôt qu’à une demande d’animation abstraite.
  • Les durées sont devenues incohérentesL’affinage propose des tokens sémantiques selon l’action servie par chaque durée.

Limites à vérifier

  • La bibliothèque limite la redistributionLa licence personnalisée autorise les produits personnels et commerciaux, mais interdit de republier la collection ou une partie substantielle comme bibliothèque de transitions, pack de mouvement ou kit d’animation concurrent. Modèles et thèmes ont des conditions supplémentaires ; la licence MIT réservée à l’outillage du dépôt ne couvre pas ce skill.
  • Les connexions nécessitent une intégrationUn extrait ne fournit pas automatiquement l’état applicatif, la gestion du focus ou le comportement du composant environnant.

Éléments à fournir

  • Code du composantFournissez balisage, styles et implémentation d’état pertinents.
  • Intention d’interactionPrécisez ouverture, fermeture, remplacement ou événement de feedback.
  • Système de mouvement existantIncluez tokens actuels, comportement des thèmes et bloc de variables partagé déjà installé.

03 Décisions importantes

Les décisions importantes

  1. Réglage sémantique

    Des durées et distances nommées expriment comment le composant bouge.

  2. Périmètre réduit au composant

    La source privilégie les modifications ciblées sans importer une bibliothèque générale d’animation.

  3. Interactions répétables

    Nettoyage et relecture traitent les erreurs n’apparaissant qu’à la deuxième interaction.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examinez la source et la configuration

Fournissez balisage, styles et implémentation d’état pertinents.

Fichier source amont
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise transitions-dev pour améliorer le menu du compte dans mon application existante. Examine déclencheur, état du menu et CSS avant de choisir une recette. Fais croître le menu depuis son déclencheur, préserve clavier et focus et utilise des variables sémantiques sans dupliquer un bloc racine présent. Teste ouvrir-fermer-rouvrir rapidement et confirme le retrait de la classe de fermeture. Préserve réduction des animations et thèmes clair/sombre. Livre les modifications ciblées et explique les connexions d’état ; ne redessine ni contenu du menu ni composants sans rapport.

Examinez le résultat

Comparez le résultat réel à ces critères observables.

  • Testez nettoyage de fermeture et activations répétées ou interrompues.
  • Vérifiez absence de doublons d’import des tokens et correspondance des durées lues avec CSS.
  • Testez réduction des animations, focus et les deux thèmes.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Jakubantalik
Dépôt
Jakubantalik/transitions.dev
Fichier du skill
SKILL.md
Licence
LicenseRef-Transitions-dev
Version examinée
2026-11-02 · e3aefb554d8f
Résumé éditorial de la source
Appliquez des transitions CSS propres aux composants et des tokens de mouvement sémantiques.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Faut-il un framework JavaScript d’animation ?

Les recettes utilisent CSS et, au besoin, de petits extraits d’orchestration d’état. La source n’exige pas de framework général.

Que change refine ?

Il propose d’abord des remplacements de valeurs ponctuelles selon leur usage sémantique. Les valeurs sans token au sens correspondant restent inchangées.

Pourquoi une animation échoue-t-elle à la deuxième ouverture ?

La source cite les classes de fermeture restantes et le recalcul de mise en page manquant pour rejouer. Une capture de la première ouverture ne révèle pas ces erreurs.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md