shixun926-dotcom/Frontend-Workflow

Frontend Workflow : Contrôle Global du Projet Frontend

I. Priorité Absolue : Lire le Projet en Premier

Avant de modifier un fichier, vous devez :

1. Lire les fichiers AGENTS.md, CLAUDE.md, le README et toute autre documentation de développement applicable dans le répertoire racine du projet.
2. Vérifier package.json, les fichiers de verrouillage, la configuration de build, la configuration de routage et les composants existants.
3. Identifier la stack technique actuelle du projet, les versions des frameworks, les bibliothèques de composants UI, les solutions CSS et les commandes d'exécution.
4. Si le projet est en architecture frontend/back-end séparée, clarifier les limites entre le frontend et le backend, ne pas modifier les contrats d'interface backend sans autorisation.
5. Si le projet possède déjà un système de design, des spécifications de composants ou un style de page, privilégier l'héritage et l'amélioration plutôt que la reconstruction.

Ne vous fiez pas uniquement aux descriptions de l'utilisateur ou aux noms de répertoires pour déterminer la stack technique. Vous devez vérifier les fichiers réels.

II. Identifier la Stack Technique et Décider du Mode d'Utilisation des Skills

Cas A : Projet React

Exécuter dans l'ordre :

1. frontend-design : Déterminer la direction visuelle, les spécifications de design et la mise en page.
2. frontend-production-shadcn : Une fois la compatibilité confirmée, implémenter les composants, la mise en page et les interactions.
3. premium-ui : Inspecter la page réelle et pousser les corrections.

Utiliser un schéma concret d'implémentation de composants de ce skill uniquement si le projet utilise déjà ou autorise explicitement les technologies correspondantes (React, Tailwind CSS, shadcn/ui).

Cas B : Projet Vue 3

Exécuter dans l'ordre :

1. frontend-design : Déterminer la direction visuelle, les spécifications de design et la mise en page.
2. Utiliser frontend-production-shadcn uniquement comme référence pour les spécifications de design et la qualité technique. Ne pas exécuter ses instructions spécifiques à React, JSX, React Hooks ou shadcn/ui.
3. Utiliser les technologies existantes du projet (Vue 3, TypeScript, routage, bibliothèque UI, CSS) pour réaliser l'implémentation.
4. premium-ui : Inspecter la page réelle et pousser les corrections.

Ne pas migrer un projet Vue 3 vers React pour adapter le second skill.

Cas C : Autres Stacks Techniques

D'abord, vérifier les technologies et contraintes existantes du projet. Utiliser frontend-design pour la planification visuelle, prendre comme référence les principes de design transférables de frontend-production-shadcn, et réaliser l'implémentation avec les technologies adaptées au projet actuel. Enfin, utiliser la méthode de revue de premium-ui pour la validation.

III. Exécuter Strictement les Trois Phases

Phase 1 : Conception Visuelle

Appeler frontend-design.

Exigences :

• Clarifier l'objectif de la page, l'utilisateur principal et les opérations critiques.
• Déterminer la direction visuelle, la typographie, les couleurs, l'espacement, la mise en page et la hiérarchie de l'information.
• Proposer des directions de design avec des différences substantielles et justifier le choix final.
• Élaborer des spécifications de design exécutables avant de commencer l'implémentation.

Phase 2 : Implémentation Technique

Appeler frontend-production-shadcn selon la stack technique, ou se référer uniquement à ses principes de design.

Exigences :

• Réutiliser les composants et dépendances existants en priorité.
• Implémenter les pages complètes, la navigation, les formulaires, la mise en page responsive et les états d'interaction.
• Gérer les états de chargement, de données vides, d'erreur, de désactivation et de retour de succès.
• Conserver la logique métier réelle, ne pas utiliser d'interactions factices pour simuler des fonctionnalités complètes.
• Ne pas effectuer de refonte massive ou changer de framework sans autorisation.

Phase 3 : Validation Visuelle

Appeler premium-ui pour inspecter l'implémentation réelle, pas seulement le code.

Exigences :

• Lancer le projet en priorité et utiliser un navigateur ou un outil de capture disponible pour inspecter la page.
• Vérifier la typographie, l'alignement, les espaces blancs, les couleurs, la hiérarchie, la cohérence des composants et le rendu responsive.
• Vérifier que les boutons, formulaires, navigation et interactions principales fonctionnent.
• Enregistrer les écarts entre les objectifs de design et l'effet réel.
• Corriger les problèmes identifiés et ré-inspecter.

Si l'environnement ne dispose pas de navigateur ou de capacité de capture, vous devez clairement indiquer que la validation visuelle réelle est impossible. Ne prétendez pas avoir inspecté l'effet de la page.

IV. Règles d'Exécution

1. Après chaque phase, fournir un bref rapport de conclusion avant de passer à la phase suivante.
2. Si un skill n'existe pas, n'est pas chargé ou ne peut pas être exécuté, l'indiquer clairement et adopter une alternative réalisable.
3. Ne pas supposer que d'autres skills s'exécuteront automatiquement ; demander explicitement l'appel ou la lecture du skill concerné si nécessaire.
4. Suivre les instructions explicites de l'utilisateur, les spécifications du projet et la stack technique existante.
5. Ne pas sacrifier l'accessibilité, la maintenabilité, les performances ou la justesse métier pour obtenir un effet visuel.
6. Après l'achèvement, exécuter les commandes de build, de vérification et de test supportées par le projet, et rapporter les résultats.

V. Livraison Finale

Après l'achèvement, rapporter :

• La stack technique identifiée et ses versions.
• La direction de design adoptée et les décisions de design clés.
• Les fichiers modifiés et leurs fonctions principales.
• L'état d'exécution des trois phases.
• Les résultats des builds, tests et inspections visuelles réelles.
• Les problèmes non résolus et les points nécessitant une confirmation humaine.