106.9K+Télécharger
Aller au guide d’utilisation
CSS Animationpar neonwatty

CSS Animation Skill.

Créez des démonstrations HTML/CSS à partir de l’interface d’une application réelle.

  • CSS
  • Images clés
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · css-animationSKILL.md
Tâche Créez des démonstrations HTML/CSS à partir de l’interface d’une application réelle. Résultats Un brief structuré consignant tokens de design, géométrie et timing des scènes. Avant de commencer Le processus d’origine suppose Claude-in-Chrome et une application accessible. Un autre hôte doit disposer d’un moyen d’inspection équivalent ou signaler les preuves manquantes.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Créez des démonstrations HTML/CSS à partir de l’interface d’une application réelle

Étudiez une application, rédigez un brief de démonstration et créez des animations HTML/CSS avec compositions ordinateur/mobile distinctes et revue des états figés.

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

La méthode de travail

css-animation crée des démonstrations dans le navigateur de fonctionnalités réelles. Il étudie d’abord le langage visuel et la mise en page de l’application, puis prépare soit une séquence avant-action-après, soit un carrousel d’écrans. Le résultat est une animation HTML/CSS autonome accompagnée d’un brief.

La revue sépare la justesse des états statiques du rythme. Les dispositions avant et après sont figées et inspectées, puis la boucle complète est jouée pour ajuster la cadence. Ordinateur et mobile ont des compositions distinctes : le mobile simplifie la scène et remplace le curseur par un indicateur de toucher.

Livrables attendus

  • Un brief structuré consignant tokens de design, géométrie et timing des scènes.
  • Une démonstration de fonctionnalité ou un carrousel d’écrans en HTML autonome.
  • Des fichiers ordinateur et mobile séparés si les deux sont demandés.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Étudier l’interface réelle

    Inspectez l’application accessible et les états pertinents. Relevez couleurs, typographie, espacements et géométrie réelle à la taille de fenêtre prévue.

  2. 02
    Préparer et réaliser la démonstration

    Choisissez une transformation de fonctionnalité unique ou un carrousel de plusieurs écrans. Rédigez le brief, calculez les positions et utilisez CSS avec un léger contrôle de boucle par classes.

  3. 03
    Examiner les états fixes, puis le rythme

    Figez les états importants pour vérifier disposition et libellés. Une fois corrects, jouez toute la boucle et ajustez la phase précise trop rapide ou trop lente.

02 Cas d’usage

Quand l’utiliser

Le processus d’origine suppose Claude-in-Chrome et une application accessible. Un autre hôte doit disposer d’un moyen d’inspection équivalent ou signaler les preuves manquantes.

Un bon choix

  • Une fonctionnalité réelle doit être présentéeLe processus reprend le langage visuel de l’application au lieu d’inventer une interface générique.
  • Le mobile exige une explication cibléeLa source simplifie explicitement la composition au lieu de réduire la scène ordinateur.

Limites à vérifier

  • L’étude suppose des outils de navigateurLe processus d’origine suppose Claude-in-Chrome et une application accessible. Un autre hôte doit disposer d’un moyen d’inspection équivalent ou signaler les preuves manquantes.
  • HTML est le livrable principalLe résultat documenté est une animation web, pas un GIF ou MP4 encodé.
  • Le brief est une étape de revueLa source demande l’approbation du brief avant génération ; l’autorisation existante de l’utilisateur et le processus local déterminent toutefois comment traiter cette revue.

Éléments à fournir

  • Accès à l’applicationFournissez l’URL de la fonctionnalité ou un aperçu local et l’accès aux états nécessaires.
  • Scénario de la fonctionnalitéIdentifiez l’état initial, l’action et le résultat visible utile.
  • Format et destinationPrécisez ordinateur, mobile ou les deux, ainsi que l’usage prévu des fichiers.

03 Décisions importantes

Les décisions importantes

  1. Une apparence propre à l’application

    Les couleurs, caractères et dimensions mesurés rendent la démonstration reconnaissable.

  2. Des révisions reproductibles

    Le brief conserve les choix de disposition et de timing avec le HTML.

  3. Des problèmes de revue séparés

    Les états figés révèlent les défauts de disposition, la lecture révèle les problèmes de cadence.

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 l’URL de la fonctionnalité ou un aperçu local et l’accès aux états nécessaires.

Fichier source amont
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/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 css-animation pour démontrer le regroupement dans mon application de planification locale. Inspecte la fonctionnalité avant de préparer une animation avant-action-après : éléments non groupés, action de l’utilisateur, puis résultat organisé. Respecte couleurs, typographie et libellés réels. Crée un brief ordinateur et une composition mobile séparée centrée sur l’action essentielle, avec un indicateur de toucher. Examine les états initial, en cours et final figés avant de régler la boucle complète. Livre brief et fichiers HTML, et signale les comportements de l’application que tu n’as pas pu inspecter.

Examinez le résultat

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

  • Comparez dispositions figées et libellés avec l’application réelle.
  • Vérifiez séparément les limites du contenu dans les compositions ordinateur et mobile.
  • Regardez la boucle entière après les corrections d’états pour évaluer le rythme.

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
neonwatty
Dépôt
neonwatty/css-animation-skill
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 68580a34101c
Résumé éditorial de la source
Créez des démonstrations HTML/CSS à partir de l’interface d’une application réelle.

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

Le livrable est-il une vidéo ?

Le livrable principal est du HTML/CSS autonome avec très peu de JavaScript. L’encodage vidéo n’entre pas dans ce fonctionnement par défaut documenté.

Peut-on partager une mise en page redimensionnée entre ordinateur et mobile ?

La source recommande des fichiers séparés et une simplification mobile intentionnelle : moins d’éléments et des indicateurs d’action tactiles.

Et si l’application ne peut pas être inspectée ?

Les instructions d’origine signalent l’absence d’outil navigateur et permettent de partir d’une description utilisateur. Ce résultat ne doit pas prétendre à une fidélité observée à une application inaccessible.

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/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md