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.

États d'interface et micro-interactions v1.0.0

Utilisez cette ressource pour concevoir les états et micro-interactions d'une interface

Nouveau

  • 593 téléchargements
  • 236 mentions J'aime
  • 119 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install interaction-states-design

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 recense tous les états d'un élément (chargement, vide, erreur, succès, hors ligne), conçoit le retour visuel de chaque action et prévoit la récupération après erreur. Vous obtenez des écrans et comportements cohérents, avec des consignes sur la durée des animations et le moment de la validation des formulaires.

Choisie surtout par

Mise à jour le 2 novembre 2026

Aucun aperçu visuel

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 : méthode en 5 étapes, questions guides, capacités
  • references/state-patterns.md : modèles détaillés pour écrans squelettes, états vides, erreurs et micro-interactions

Pour qui

  • Un site ou une app dont les écrans vides et les erreurs sont bâclés
  • Un formulaire ou un assistant pas à pas à rendre plus clair
  • Un envoi de fichier ou une action destructrice à sécuriser avec annulation

Pas pour qui

  • Le choix des couleurs et de la typographie
  • Une étude utilisateur avec de vrais participants

Étiquettes

  • interaction
  • états
  • micro-interactions
  • erreurs
  • ux

À propos

Vous dites

« Crée les états de chargement, vide et d'erreur de ma page de commandes, avec un bouton pour réessayer. »

Aucun aperçu visuel

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

Voir plus

Prérequis

À préparer
L'écran ou le flux à concevoir et Le contexte d'usage (web, mobile)

Comment l'utiliser

  1. Copiez le dossier de la skill dans le dossier de skills de votre agent.
  2. Indiquez l'écran ou le flux à traiter.
  3. Relisez la liste des états proposés et faites appliquer les retours visuels au code.

Aperçu du contenu

Fichiers

  • LICENSE1 Ko
  • NOTICE-PALATEKIT.md0,4 Ko
  • references/state-patterns.md10,4 Ko
  • SKILL.md4,1 Ko

Origine et licence

Modifié par PalateKit

Auteur
nickcrew
Source
github.com/nickcrew/claude-cortex/tree/bb47af79ad3befe01ae01940fcf5f16e30a1b6df/skills/interaction-design
Licence
MIT

Notice

Version modifiée de « interaction-design » (nickcrew, 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

Quelle technologie est visée ?

Aucune en particulier : la skill décrit des principes et des modèles valables pour le web comme pour le mobile.

Les animations sont-elles incluses ?

Oui, sous forme de consignes (durée, déclenchement, retour). Pensez à respecter l'option « réduire les animations » du système.