angular-ui-patterns
Créer des interfaces Angular robustes avec des motifs éprouvés
La création d'interfaces Angular fiables nécessite une gestion cohérente des états de chargement, des erreurs et des états vides. Cette compétence fournit des motifs éprouvés qui garantissent que les utilisateurs comprennent toujours ce qui se passe dans votre application.
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 "angular-ui-patterns". Un composant qui récupère et affiche les posts d'un utilisateur
Résultat attendu:
- Le composant affiche un skeleton loader au chargement initial (aucune donnée n'existe encore)
- Lorsque les données arrivent vides, affiche un état vide avec un bouton 'Créer un post'
- Lorsque l'API retourne une erreur, affiche une bannière d'erreur avec option de retry tout en gardant les données en cache visibles
- Au chargement réussi, affiche la liste complète des posts avec les attributs d'accessibilité appropriés
Utilisation de "angular-ui-patterns". Un bouton de sauvegarde dans un formulaire de paramètres
Résultat attendu:
- Le bouton est activé uniquement lorsque le formulaire est valide
- Au clic, le bouton devient désactivé et affiche un spinner avec le texte 'Enregistrement...'
- En cas de succès, affiche une coche verte avec 'Enregistré!' puis revient à l'état normal après 2 secondes
- En cas d'erreur, affiche une X rouge avec le message d'erreur et réactive le bouton pour réessayer
Audit de sécurité
SûrDocumentation-only skill containing Angular UI pattern guidance. All 63 static analysis findings are false positives: URLs are documentation references (not network calls), backticks are markdown code fencing (not shell execution), and crypto detections are text pattern misidentifications. No executable code, network requests, or command execution present.
Score de qualité
Ce que vous pouvez construire
Développeur frontend construisant des tableaux de bord pilotés par les données
Implémenter des états de chargement, d'erreur et vides cohérents à travers les widgets de tableau de bord qui récupèrent des données de plusieurs API avec des latences variables.
Responsable d'équipe établissant des normes d'interface utilisateur
Définir des motifs à l'échelle de l'organisation pour la gestion des états, la gestion des erreurs et les retours utilisateurs pour garantir une expérience utilisateur cohérente entre les équipes.
Assistant IA générant des composants Angular
Guider Claude ou Codex pour générer des composants Angular qui suivent des motifs éprouvés pour la gestion des états, en évitant les pièges courants comme les erreurs silencieuses ou les états de chargement manquants.
Essayez ces prompts
Créer un composant Angular qui affiche une liste d'éléments. Afficher un skeleton loader lors du chargement sans donnée, un état vide lorsque la liste est vide, un état d'erreur avec retry lorsque le chargement échoue, et les données réelles lorsqu'elles sont disponibles. Utiliser Angular Signals et le flux de contrôle moderne.
Construire un composant de formulaire Angular avec validation reactive forms. Afficher des messages d'erreur en ligne pour les champs invalides, désactiver le bouton de soumission pendant la soumission du formulaire, afficher un indicateur de chargement sur le bouton, et montrer des notifications toast de succès ou d'erreur après la fin de l'opération asynchrone.
Implémenter une page Angular qui charge le contenu critique immédiatement et diffère les sections non critiques comme les commentaires, les éléments associés ou l'analytique en utilisant @defer. Inclure des états placeholder, de chargement et d'erreur pour chaque bloc différé avec des temps de chargement minimum appropriés.
Créer un motif de dialog de confirmation de suppression qui affiche une modale demandandant confirmation, applique des mises à jour UI optimistes lors de la confirmation, annule les changements si la requête serveur échoue, et affiche les retours appropriés à l'utilisateur tout au long du processus.
Bonnes pratiques
- Toujours afficher les erreurs aux utilisateurs - ne jamais intercepter silencieusement les exceptions sans retour
- Afficher les indicateurs de chargement uniquement lorsqu'il n'y a pas de données existantes pour éviter le flash de contenu
- Désactiver les boutons d'action pendant les opérations asynchrones pour éviter les soumissions en double
Éviter
- Afficher un spinner alors que des données en cache existent - cause un flash visuel inutile lors du rechargement
- Avaler les erreurs dans les blocs catch sans informer l'utilisateur des échecs
- Permettre des clics rapides multiples sur les boutons de soumission en ne les désactivant pas pendant le traitement