react-ui-patterns
Implémenter les modèles d'interface React
Également disponible depuis: ChrisWiles
La création de composants React avec des états de chargement appropriés, la gestion des erreurs et le feedback utilisateur est difficile et entraîne souvent une UX confuse. Cette compétence fournit des modèles d'interface éprouvés pour gérer les opérations asynchrones, afficher un feedback approprié et créer des expériences utilisateur fluides.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "react-ui-patterns". Comment afficher les états de chargement sans flash lors du rechargement des données ?
Résultat attendu:
Utilisez le modèle : affichez l'indicateur de chargement SEULEMENT lorsque loading EST VRAI ET qu'aucune donnée n'existe. Cela empêche le flash lorsque des données en cache sont disponibles. Exemple : if (loading && !data) return <Skeleton />;
Utilisation de "react-ui-patterns". Quelle est la bonne façon de gérer les erreurs en React ?
Résultat attendu:
Affichez toujours les erreurs aux utilisateurs avec des messages clairs. Utilisez une hiérarchie : erreurs inline pour les formulaires, toasts pour les erreurs récupérables, bannières pour les problèmes au niveau de la page, et écrans d'erreur complets pour les échecs irrécupérables.
Utilisation de "react-ui-patterns". Comment devrais-je gérer les états de bouton pendant la soumission de formulaire ?
Résultat attendu:
Désactivez le bouton pendant la soumission ET affichez un indicateur de chargement. Cela empêche les soumissions dupliquées et donne aux utilisateurs un feedback que leur action est en cours.
Audit de sécurité
SûrStatic analysis flagged 33 potential issues (external_commands, weak_crypto, system_reconnaissance), but manual review confirms all are false positives. The backticks detected are TypeScript template literals in code examples, not shell commands. No cryptographic code or system reconnaissance tools exist. This is a pure documentation skill containing only React UI pattern examples with no executable code, network calls, or file system access.
Score de qualité
Ce que vous pouvez construire
Création de composants React pilotés par les données
Lors de la création de composants qui récupèrent des données depuis des API, appliquez des états de chargement, d'erreur et vides appropriés en suivant les modèles établis.
Gestion des soumissions de formulaire
Lors de l'implémentation de formulaires avec des soumissions asynchrones, assurez-vous que les boutons sont désactivés pendant la soumission et affichez un feedback de chargement approprié.
Amélioration de l'expérience utilisateur
Lors du refactoring de code React existant pour éliminer les flashs de chargement confus et les erreurs cachées.
Essayez ces prompts
Montrez-moi comment implémenter un état de chargement pour un composant React qui récupère des données. Je veux éviter d'afficher un spinner lorsque des données en cache existent déjà.
Créez un composant d'état d'erreur pour React qui affiche le message d'erreur et inclut un bouton de nouvelle tentative. Comment devrais-je l'intégrer avec Apollo ou React Query ?
Écrivez un modèle de soumission de formulaire en React qui désactive le bouton de soumission pendant la mutation, affiche un spinner de chargement, et affiche des toasts de succès ou d'erreur.
Construisez un composant React complet qui gère tous les états UI : chargement (avec skeleton), erreur (avec nouvelle tentative), vide (avec appel à l'action), et succès (avec affichage des données).
Bonnes pratiques
- N'affichez jamais d'UI obsolète - les spinners de chargement ne doivent apparaître que lorsqu'il n'y a pas de données à afficher
- Affichez toujours les erreurs aux utilisateurs - n'avalez jamais les erreurs silencieusement sans feedback
- Désactivez les boutons pendant les opérations asynchrones pour empêcher les soumissions dupliquées
Éviter
- Afficher un spinner de chargement chaque fois que loading est vrai, indépendamment du fait que des données en cache existent
- Attraper les erreurs et seulement les logger dans la console sans afficher de feedback utilisateur
- Permettre aux utilisateurs de cliquer sur soumettre plusieurs fois pendant la soumission de formulaire