Que fait component-flow ?
Compétence Codex pour l'identification, la validation manuelle, la construction, la revue, la migration de pages et la réutilisation continue de composants front-end communs.
Vue d'ensemble
Ce skill guide un agent IA à travers le processus de gestion des composants front-end communs dans une base de code. Il comprend six phases principales :
- Identification des candidats : Analyse automatisée du code pour trouver des composants potentiellement réutilisables.
- Confirmation manuelle : Les développeurs valident ou rejettent les candidats identifiés.
- Construction : Création des composants communs selon les standards du projet.
- Revue : Vérification de la qualité, des performances et de l'accessibilité.
- Migration des pages : Remplacement des implémentations existantes par les nouveaux composants.
- Réutilisation continue : Promotion et suivi de l'utilisation des composants dans le temps.
Prérequis
- Accès en lecture/écriture au dépôt de code
- Connaissance des conventions de nommage et de structure des composants du projet
- [Optionnel] Outils d'analyse statique configurés (ESLint, TypeScript, etc.)
Utilisation
Pour démarrer le workflow, exécutez la commande suivante dans le terminal du projet :
codex --skill PM-lurenyi/component-flow analyze
Étapes détaillées
1. Identification des candidats
L'agent parcourt les dossiers de pages et de composants, analyse les patterns de code et génère un rapport des candidats potentiels.
2. Confirmation manuelle
Un résumé des candidats est présenté au développeur pour approbation ou rejet, avec des justifications techniques.
3. Construction
L'agent peut aider à créer des squelettes de composants, des tests unitaires et de la documentation associée.
4. Revue
Vérification automatique de la conformité aux standards, des performances (ex. : ré-rendus inutiles) et de l'accessibilité.
5. Migration des pages
L'agent propose des modifications de code pour remplacer l'ancienne implémentation par le nouveau composant commun.
6. Réutilisation continue
Intégration de rappels dans les revues de code et génération de métriques d'utilisation.
Variables d'environnement
| Variable | Description | Valeur par défaut |
|---|---|---|
COMPONENT_DIR | Chemin vers le dossier des composants communs | src/components/ |
EXCLUDE_PATTERNS | Patterns de fichiers à exclure de l'analyse | node_modules, dist |
Exemples
# Lancer l'analyse avec un dossier personnalisé
COMPONENT_DIR=shared/components codex --skill PM-lurenyi/component-flow analyze
Support
Pour des questions ou des améliorations, ouvrez une issue sur le dépôt du skill.