Composant Container/Presentation

Utilisez cette skill pour créer un composant React dans src/components qui suit le pattern Container/Presentation.

Consultez les références regroupées de cette skill pour les règles détaillées.

Si l'entrée /react-container-presentation-component est incomplète, posez d'abord des questions avant de créer les fichiers.

Quand l'utiliser

Quand l'utilisateur exécute /react-container-presentation-component
Quand l'utilisateur demande explicitement un composant React qui suit le pattern Container/Presentation
Quand l'utilisateur veut de l'aide pour décider ou implémenter la classification ui vs features dans le pattern Container/Presentation

Si l'une des informations suivantes manque, posez la question à l'utilisateur en utilisant ask_user.

Nom du composant
Type (ui ou features)
S'il faut remplacer les composants existants (uniquement lors de la création de ui)

Exigences des questions :

Proposer le type sous forme d'options (ui, features)
Exiger que le nom du composant soit en PascalCase
Pour ui, demander si l'utilisation directe de Mantine ou d'autres bibliothèques d'UI dans les features existantes doit être remplacée par le nouveau composant

Vérifier si src/components/ui/<ComponentName> ou src/components/features/<ComponentName> existe déjà.
S'il existe, ne pas écraser ; confirmer l'approche préférée avec l'utilisateur.

Même quand ui est spécifié, avant de créer les fichiers, examinez la Reclassification Rule dans references/component-architecture.md.
Si l'implémentation inclut la gestion d'état, des effets secondaires, du traitement asynchrone, des mises à jour de context/store, ou de la logique métier, traitez-la comme features.
Si le résultat est plus proche de features, ne pas procéder en tant que ui ; utilisez ask_user et confirmez l'une des options suivantes avant de continuer.
- Create as features
- Keep ui and move state/logic to parent or features

ui : index.tsx, index.module.scss, index.stories.tsx
features : index.tsx, use<ComponentName>.tsx, presentation.tsx, types.ts, presentation.module.scss, presentation.stories.tsx

Uniquement avec l'approbation de l'utilisateur, remplacez les implémentations équivalentes utilisant directement Mantine ou d'autres bibliothèques d'UI dans les features existantes par le nouveau composant ui.

Exécutez les commandes de build et de lint, et assurez-vous que les deux passent ; si des problèmes sont introduits par les fichiers nouvellement ajoutés ou modifiés, corrigez-les.
Suivez la Storybook Minimum dans references/component-architecture.md pour les décisions d'état des stories.
Demandez à l'utilisateur via ask_user s'il faut exécuter une vérification Storybook (par exemple : « Run » / « Skip for now »).
Exécutez npm run storybook uniquement si l'utilisateur sélectionne « Run ».
Si l'utilisateur sélectionne « Skip for now », mentionnez explicitement dans le rapport final que l'exécution de Storybook a été ignorée.

Rapportez la liste des fichiers créés.
Si des remplacements ont été effectués, rapportez la liste des fichiers modifiés et les détails du remplacement.
Fournissez un exemple d'utilisation du composant créé.
Rapportez si la vérification Storybook a été exécutée (run/skip), et si elle l'a été, incluez la commande utilisée.
Expliquez pourquoi le composant a été classifié comme ui ou features.
Résumez où les responsabilités d'état, d'effets secondaires et de rendu ont été placées.
Confirmez s'il y a des violations de direction de dépendance.
Énoncez clairement tous les éléments non résolus.