Un spécialiste frontend senior conçu pour architecturer et implémenter des applications React 19 de niveau production avec TypeScript et des modèles d'état modernes.
Installer & Télécharger
1. ClawHub CLI
Le moyen le plus rapide d'installer une compétence directement depuis le registre.
npx clawhub@latest install react-expert
2. Installation manuelle
Copiez le dossier de la compétence dans l'un de ces emplacements
~/.openclaw/skills/ <project>/skills/ Priorité : Espace de travail > Local > Intégré
3. Installation du prompt
Copiez ce prompt dans OpenClaw pour l'installer automatiquement.
Aide-moi à installer react-expert via Clawhub. Si Clawhub n'est pas installé, installe-le d'abord (npm i -g clawhub).
Vous préférez télécharger ?
Obtenez les fichiers bruts de la compétence dans une archive ZIP.
Qu'est-ce que Expert React ?
La compétence Expert React fournit un profil de développeur senior pour Openclaw Skills, spécialisé dans l'ingénierie frontend de haute performance. Elle comble le fossé entre le codage de base et l'architecture sophistiquée en se concentrant sur les fonctionnalités de React 19, les Server Components et l'intégration stricte de TypeScript. Cette compétence garantit que votre application suit les meilleures pratiques de l'industrie en matière d'accessibilité, d'optimisation des performances et de gestion d'état évolutive.
En utilisant cette compétence, les développeurs peuvent automatiser la création de hiérarchies de composants complexes, gérer des flux de données complexes avec des outils comme TanStack Query ou Zustand, et assurer la transition des composants de classe hérités vers des hooks fonctionnels modernes. Elle sert de ressource complète pour maintenir la qualité du code dans les écosystèmes React modernes au sein du framework Openclaw Skills.
Cas d'utilisation de Expert React
- Création de nouveaux composants React avec les fonctionnalités de React 19 comme le hook use() et les form actions.
- Mise en œuvre d'une gestion d'état complexe à l'aide de Context, Redux ou Zustand.
- Optimisation des performances de l'application via la mémoïsation et la virtualisation.
- Transition vers Next.js App Router et implémentation de React Server Components.
- Développement d'éléments d'interface utilisateur accessibles (WCAG) et sémantiquement corrects.
Comment fonctionne Expert React
- Analyse des besoins : La compétence identifie la hiérarchie des composants, les besoins en état et le flux de données en fonction de la demande de l'utilisateur.
- Sélection du modèle : Elle sélectionne les modèles les plus efficaces, comme choisir entre les Server Components et les Client Components ou identifier la bonne bibliothèque de gestion d'état.
- Implémentation : L'agent écrit du code TypeScript robuste avec un typage strict et une gestion appropriée des erreurs.
- Optimisation : Il applique la mémoïsation, nettoie les effets et s'assure que les limites Suspense sont correctement placées.
- Test et vérification : Le processus se termine par la génération de suites de tests à l'aide de la React Testing Library pour assurer la stabilité à long terme.
Configuration de Expert React
Pour intégrer cette compétence dans votre flux de travail, assurez-vous que l'environnement de votre projet est prêt pour React 18 ou 19. Openclaw Skills peut être configuré pour déclencher automatiquement ce rôle de spécialiste lorsque des mots-clés spécifiques à React tels que JSX, hooks ou Server Components sont détectés.
# Exemple de configuration de projet pour supporter les modèles d'Expert React
npm install react@rc react-dom@rc
npm install -D typescript @types/react @types/react-dom
Configurez votre agent de codage pour qu'il se réfère au répertoire de documentation local pour des conseils détaillés sur les performances, les hooks et les stratégies de migration.
Schéma de données et taxonomie de Expert React
La compétence Expert React organise la sortie en fichiers et documentations distincts en fonction de la portée de l'implémentation. Elle adhère à une taxonomie de métadonnées stricte pour assurer la compatibilité entre les Openclaw Skills.
| Type de fichier | Description | Métadonnées clés |
|---|---|---|
| Fichiers de composants | Fichiers .tsx contenant la logique et l'UI | name, role: specialist |
| Fichiers de test | Fichiers .test.tsx pour RTL/Vitest | scope: implementation |
| Docs de référence | Guides Markdown dans /references/ | topic: React 19/State |
| Format de sortie | Code TypeScript direct | format: code |
Fonctionnalités avancées de Expert React
- Intégration transparente avec les Server Components et Next.js App Router pour le rendu hybride.
- Conversion automatique des composants de classe React hérités vers des modèles modernes basés sur les hooks.
- Prise en charge intégrée des états d'Action de React 19 et du hook use() pour la gestion des données asynchrones.
- Placement intelligent des frontières d'erreur et gestion gracieuse des échecs pour des interfaces utilisateur résilientes.
- Compatibilité inter-compétences, lui permettant de travailler aux côtés d'autres Openclaw Skills comme Fullstack Guardian pour un développement de bout en bout.
SKILL.md
Chargement
Compétences Openclaw associées
Gestionnaire de Portefeuille
Un outil sophistiqué de gestion d'investissements qui s'intègre à Alpaca pour fournir un audit de portefeuille en temps réel, une évaluation des risques et une logique de rééquilibrage.
security-reviewer
Une compétence d'analyste de sécurité spécialisée pour effectuer des scans SAST automatisés, des audits de code manuels et des revues de sécurité d'infrastructure au sein d'Openclaw Skills.
Pair Trade Screener
Un outil professionnel d'arbitrage statistique pour identifier les paires d'actions cointégrées et générer des signaux de trading neutres au marché via une analyse mathématique rigoureuse.
Conseiller en Stratégie d'Options
Un outil d'analyse complet pour simuler des stratégies de trading d'options et calculer les Grecs à l'aide du modèle Black-Scholes.
Rédacteur d'Articles de Recherche
Une compétence d'agent IA conçue pour produire des articles de recherche académique formels suivant les normes strictes de formatage et de citation IEEE et ACM.
Scenario Analyzer
Un outil d'intelligence financière propulsé par l'IA qui transforme les titres d'actualité en scénarios d'investissement détaillés sur 18 mois à l'aide d'un flux de travail multi-agents.
En vedette*
