💻 Développement

react-component-builder

Crée des composants React/Vue/Angular/Svelte optimisés et réutilisables.

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- react-component-builder --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } react-component-builder -Launch"

🚀 Déjà installé ?

claude "/react-component-builder"

Ou tapez /react-component-builder dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

composant ReactcomponentVue componentAngular componentSveltehooksstate managementcréer un composant

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/react-component-builder ~/.claude/skills/

Source : dev-skills/react-component-builder

📖 Manuel

React Component Builder

Workflow

  1. Clarifier le besoin : identifier quel composant créer, quelles props il accepte, quel comportement est attendu, et quel framework est utilisé (React, Vue, Angular, Svelte). Poser les questions essentielles avant de coder.
  1. Design de l'API du composant : définir l'interface publique — props avec types TypeScript, événements émis (emit/callbacks), slots ou children, valeurs par défaut, et ce qui est exposé via ref/forwardRef si nécessaire.
  1. Structure du composant : choisir le bon pattern d'architecture — composition pattern, compound components (ex. <Select><Option>) ou render props selon la complexité et la réutilisabilité requise.
  1. State management : déterminer où vivre l'état — state local avec useState/ref, context API ou provide-inject pour partage inter-composants, ou store externe (Zustand, Pinia, NgRx, Svelte stores) pour l'état global.
  1. Styling : appliquer la solution de style adaptée au projet — CSS Modules pour l'isolation, Tailwind pour l'utilitaire, Styled Components/Emotion pour le CSS-in-JS, ou scoped styles dans Vue/Svelte.
  1. Accessibilité : intégrer les bonnes pratiques dès la conception — roles ARIA appropriés, navigation clavier complète (tabIndex, onKeyDown), gestion du focus (useRef + focus()), et attributs aria-label/describedby.
  1. Tests du composant : écrire des tests avec React Testing Library ou Vue Test Utils — tester le comportement utilisateur (clics, saisie), les cas limites, et configurer des tests de régression visuelle si requis.
  1. Documentation et Storybook : créer des stories Storybook couvrant les différents états et variantes, générer la props table automatiquement, et fournir des exemples d'utilisation copiables dans la documentation.

Règles