Dans les termes du Skill
Construit des interfaces utilisateur de qualité production, accessibles, performantes et visuellement soignées. Le skill se concentre sur la création d'une UI qui semble avoir été conçue par un ingénieur soucieux du design dans une entreprise de premier plan — pas générée par une IA. Il impose un véritable respect du design system, une accessibilité WCAG 2.1 AA correcte, des schémas d'interaction réfléchis, et évite les clichés esthétiques génériques de l'IA.
Le skill couvre l'architecture des composants avec colocation, la composition plutôt que la configuration, la gestion d'état allant du useState local aux stores globaux, le design responsive mobile-first testé à des breakpoints spécifiques, la navigation au clavier, les labels ARIA, la gestion du focus, des états vides et d'erreur significatifs, le chargement squelette, et les mises à jour optimistes pour une vitesse perçue.
Ce qu'il produit
- États de chargement squelette avec aria-busy et aria-label pour le contenu en cours de chargement
- États vides et d'erreur significatifs avec role="status", texte descriptif, icônes et prochaines étapes actionnables
Fonctionnement
- 01Colocaliser les fichiers de composant
Placer l'implémentation du composant, les tests, les stories, les hooks personnalisés et les types ensemble dans un seul dossier nommé d'après le composant.
- 02Composer les composants, ne pas les configurer
Construire des API de composants composables avec des enfants imbriqués plutôt que des objets de configuration chargés de props.
- 03Séparer la récupération de données de la présentation
Créer des composants conteneurs qui gèrent le chargement des données, les erreurs et les états vides, puis transmettre des données propres aux composants de présentation.
- 04Choisir la gestion d'état selon la portée
Utiliser useState pour l'état d'UI spécifique au composant, l'état remonté pour 2-3 composants frères, Context pour le thème/l'authentification/la locale, l'état d'URL pour les filtres et la pagination, des bibliothèques d'état serveur pour les données distantes, et des stores globaux pour l'état client partagé complexe.
- 05Suivre les tokens du design system
Utiliser des tokens de couleur sémantiques comme text-primary et bg-surface plutôt que des valeurs hexadécimales brutes, maintenir une échelle d'espacement cohérente par incréments de 0.25rem, et respecter la hiérarchie typographique.
- 06Mettre en œuvre l'accessibilité WCAG 2.1 AA
Rendre chaque élément interactif accessible au clavier, ajouter des labels ARIA aux contrôles non étiquetés, gérer le focus lorsque le contenu change, assurer un contraste de 4.5:1 pour le texte normal, et fournir des états vides et d'erreur significatifs.