Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Principes de mouvement d'interface v1.0.0

Utilisez cette ressource pour ajouter ou évaluer des animations dans une interface web

Nouveau

  • 521 téléchargements
  • 230 mentions J'aime
  • 163 sauvegardes

4,49 €

Accès à vie à cette ressource, avec ses mises à jour.

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install ui-motion-principles

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent détecte le mode (création ou audit), pèse les trois approches selon le type de projet, puis applique une grille de fréquence : plus une action est répétée, moins elle s'anime. En audit, il repère les mouvements génériques d'IA et produit un rapport HTML avec des démonstrations en boucle. L'accessibilité (mouvement réduit) est obligatoire dans les deux modes.

Choisie surtout par

Mise à jour le 2 novembre 2026

Rapport d'audit de mouvement avec démonstrations en boucle pour chaque point relevé.

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md, traduit en français : détection du mode, pondération par type de projet, règle de fréquence, durées
  • workflows/create.md et workflows/audit.md : les deux parcours détaillés
  • references/ : recettes de mouvement, pièges de création, listes de contrôle d'audit, accessibilité et performance
  • references/ : une fiche par designer, un modèle de rapport HTML et son gabarit de démonstration

Pour qui

  • Donner du mouvement à un site vitrine ou à une page de lancement sans le surcharger
  • Évaluer les animations d'un site existant et justifier ce qu'il faut retirer
  • Choisir une approche de mouvement adaptée à un produit, un portfolio ou une application pour enfants

Pas pour qui

  • Produire une vidéo de motion design : la skill traite le mouvement d'interface
  • Les moteurs de jeu, Lottie ou Rive, où les techniques propres aux designers ne s'appliquent pas toujours
  • Une page sans aucun code d'interface à modifier

Étiquettes

  • animation
  • mouvement
  • interface
  • audit
  • accessibilité

À propos

Vous dites

« Audite les animations de ma page d'accueil et produis le rapport HTML avec les démonstrations des points à corriger. »

Rapport d'audit de mouvement avec démonstrations en boucle pour chaque point relevé.

Skill publiée par kylezantos sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Le code ou l'adresse de la page à travailler et Le type de projet (site vitrine, tableau de bord, application)

Comment l'utiliser

  1. Installez la skill dans le dossier de skills de votre agent.
  2. Précisez le mode (création ou audit), le type de projet et les composants concernés.
  3. Lisez le rapport ou le code proposé, vérifiez le mouvement réduit, puis appliquez les corrections.

Aperçu du contenu

Fichiers

  • LICENSE1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • references/accessibility.md1,6 Ko
  • references/anti-checklist.md12,4 Ko
  • references/audit-checklist.md5,2 Ko
  • references/creation-gotchas.md2,9 Ko
  • references/demo-shell.html13,6 Ko
  • references/emil-kowalski.md6 Ko
  • references/jakub-krehel.md4,5 Ko
  • references/jhey-tompkins.md5,8 Ko
  • references/motion-cookbook.md16,9 Ko
  • references/output-format.md18,3 Ko
  • references/performance.md2 Ko
  • references/report-template.html62,9 Ko
  • SKILL.md8,1 Ko
  • workflows/audit.md12,2 Ko
  • workflows/create.md4,1 Ko

Origine et licence

Modifié par PalateKit

Auteur
kylezantos
Source
github.com/kylezantos/design-motion-principles/tree/4a9ca879f24a361f4dca4174fe2da0f67b5ddee3/skills/design-motion-principles
Licence
MIT

Notice

Version modifiée de « design-motion-principles » (kylezantos, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Les trois designers cités ont-ils validé la skill ?

Non. La skill reprend leurs travaux publiés et le précise elle-même : l'interprétation lui appartient, sans accord des designers.

Faut-il un framework précis ?

Non. Elle couvre HTML, CSS, React et Framer Motion. Les recettes sont fournies dans les fichiers de référence.