<required> CRITIQUE Ajoutez les étapes suivantes à votre liste Todo en utilisant TodoWrite :

1. Demander à l'utilisateur s'il souhaite expérimenter plusieurs variations d'UI ou voir un seul design
2. Si l'utilisateur veut plusieurs variations, demander quels types de variations essayer
3. Si vous construisez un frontend web et qu'il n'est pas en cours d'exécution, démarrer le serveur de développement et noter l'URL localhost
4. Implémenter le(s) design(s) UI/UX
5. Demander à l'utilisateur son avis sur le design
6. Itérer en fonction des commentaires
7. S'assurer que la nouvelle UI est correctement connectée et intégrée </required>

Construire UI/UX

Aperçu

Ce skill vous guide dans l'implémentation d'interfaces utilisateur et d'expériences en mettant l'accent sur l'exploration, les retours et l'intégration appropriée.

Principe fondamental : Explorer les variations, itérer avec les retours, assurer une intégration appropriée.

Annoncez au démarrage : « J'utilise le skill Nori Building UI/UX pour implémenter votre interface. »

Le processus

Phase 1 : Planification de la portée et des variations

Posez la question à l'utilisateur :

« Souhaitez-vous :

• Voir plusieurs variations d'UI pour choisir ?
• Opter pour une seule approche design ? »

Si plusieurs variations :

• Demander quels types de variations ils veulent (ex. minimaliste vs riche, basé sur des cartes vs basé sur des listes, clair vs sombre)
• Viser 2 à 4 approches distinctes
• Prévoir d'implémenter toutes les variations de manière à permettre une comparaison facile

Phase 2 : Configuration de l'environnement frontend

Pour les projets web :

Vérifier si le serveur de développement est en cours d'exécution :

• Si non, identifier la commande de démarrage (ex. npm run dev, npm start)
• Démarrer le serveur de développement
• Noter l'URL localhost (généralement http://localhost:3000 ou similaire)
• Informer l'utilisateur : « Démarrage du serveur de développement à [URL] »

Pour d'autres types d'UI :

• Identifier le mécanisme d'aperçu/test approprié
• Configurer en conséquence

Phase 3 : Implémentation

Lors de l'implémentation de plusieurs variations :

Organisez les variations de manière à faciliter la comparaison. Pour les UIs web, cela signifie généralement :

• Afficher toutes les variations sur une seule page, empilées verticalement
• Ajouter des séparateurs/en-têtes clairs pour chaque variation
• Utiliser un espacement cohérent entre les variations
• S'assurer que chaque variation est autonome et fonctionnelle

Exemple pour React :

export default function UIExploration() {
  return (
    <div className="ui-exploration">
      <section className="variation">
        <h2>Variation 1: Minimaliste</h2>
        <MinimalistLogin />
      </section>

      <section className="variation">
        <h2>Variation 2: Gradient moderne</h2>
        <ModernLogin />
      </section>

      <section className="variation">
        <h2>Variation 3: Corporatif classique</h2>
        <ClassicLogin />
      </section>
    </div>
  );
}

Lors de l'implémentation d'un seul design :

• Viser une implémentation propre et prête pour la production
• Suivre les conventions du projet et les guides de style
• Assurer un design responsive si applicable

Phase 4 : Retours et itération

Présentez à l'utilisateur :

• Partager l'URL localhost ou le mécanisme d'aperçu
• Décrire brièvement chaque variation (si plusieurs)
• Demander : « Qu'en pensez-vous ? Des changements que vous aimeriez voir ? »

Itérez en fonction des retours :

• Faire les modifications demandées
• Continuer à demander des retours jusqu'à satisfaction
• Être prêt à combiner des éléments de différentes variations

Phase 5 : Intégration et connexion

Assurer une intégration appropriée :

• Supprimer l'échafaudage d'exploration (s'il a été utilisé)
• Connecter aux sources de données/API réelles
• Connecter au routage/navigation
• Ajouter une gestion d'état appropriée
• Implémenter la gestion des erreurs
• Ajouter des états de chargement si applicable
• Tester tous les éléments interactifs
• Vérifier les bases d'accessibilité

Points d'intégration courants à vérifier :

• Soumissions de formulaires → endpoints backend
• Navigation → système de routage
• Authentification → contexte/store d'authentification
• Récupération de données → couche API
• Limites d'erreur → gestion des erreurs
• Comportement responsive → points d'arrêt