React
React, hooks, state management, Next.js cote client.
| # | Skill | Source | Description | Δ | |
|---|---|---|---|---|---|
| 1 | web-artifacts-builder | anthropics/skills | Construire et bundler des artifacts frontend React en un fichier HTML autonome. | 134 761 | 4313 |
| 2 | react18-dep-compatibility | github/awesome-copilot | Vérifier la compatibilité des dépendances npm avec React 18 et 19. | 33 044 | 567 |
| 3 | react19-concurrent-patterns | github/awesome-copilot | Préserver les patterns React 18 et adopter les nouvelles API React 19 après migration. | 33 044 | 567 |
| 4 | react-audit-grep-patterns | github/awesome-copilot | Auditer une codebase React avec des patterns grep ciblés pour migrations v18/v19. | 33 044 | 567 |
| 5 | react18-batching-patterns | github/awesome-copilot | Diagnostiquer et corriger les bugs de batching automatique dans React 18. | 33 044 | 567 |
| 6 | react18-enzyme-to-rtl | github/awesome-copilot | Migrer des tests Enzyme vers React Testing Library en adoptant une approche comportementale. | 33 044 | 567 |
| 7 | react18-legacy-context | github/awesome-copilot | Migrer les contextes React legacy vers l'API moderne Context de React 18/19. | 33 044 | 567 |
| 8 | react19-source-patterns | github/awesome-copilot | Migrer le code source React vers les APIs modernes de React 19. | 33 044 | 567 |
| 9 | react19-test-patterns | github/awesome-copilot | Migrer les tests React 18 vers React 19 en adaptant imports et assertions. | 33 044 | 567 |
| 10 | react18-lifecycle-patterns | github/awesome-copilot | Migrer les méthodes de cycle de vie obsolètes de React vers des patterns React 18 conformes. | 33 044 | 567 |
| 11 | react18-string-refs | github/awesome-copilot | Migrer les string refs React 18 vers createRef() en trois étapes simples. | 33 044 | 567 |
| 12 | react-modernization | wshobson/agents | Migrer des composants React class vers hooks et moderniser les applications vers React 18. | 35 431 | 419 |
| 13 | react-state-management | wshobson/agents | Gérer l'état React avec Zustand, Redux Toolkit ou React Query selon les besoins. | 35 431 | 419 |
| 14 | vercel-composition-patterns | vercel-labs/agent-skills | Structurer des composants React flexibles avec composition et patterns avancés. | 26 608 | 320 |
| 15 | vercel-react-best-practices | vercel-labs/agent-skills | Optimiser les performances React/Next.js selon 70 règles Vercel classées par impact. | 26 608 | 320 |
| 16 | vercel-react-view-transitions | vercel-labs/agent-skills | Animer les transitions d'interface React avec les View Transitions natives du navigateur. | 26 608 | 320 |
| 17 | ui-toolkit/web | anthropics/knowledge-work-plugins | Intégrer une interface vidéo Zoom prête à l'emploi avec un minimum de code. | 12 185 | 234 |
| 18 | react:components | google-labs-code/stitch-skills | Transformer des designs Stitch en composants React modulaires et typés. | 5 418 | 136 |
| 19 | stitch-loop | google-labs-code/stitch-skills | Construire et intégrer des pages web en boucle autonome via Stitch MCP. | 5 418 | 136 |
| 20 | react-flow-node-ts | microsoft/skills | Créer des composants React Flow avec types TypeScript et intégration store. | 2 319 | 58 |
| 21 | zustand-store-ts | microsoft/skills | Créer des stores Zustand typés avec middleware et sélecteurs optimisés. | 2 319 | 58 |
| 22 | presentation-creator | getsentry/skills | Créer des présentations interactives React en fichier HTML unique avec le design Sentry. | 716 | 39 |
| 23 | react-native-testing | callstackincubator/agent-skills | Rédiger des tests React Native avec les bonnes APIs RNTL selon la version détectée. | 1 341 | 30 |
| 24 | upgrading-react-native | callstackincubator/agent-skills | Orchestrer une mise à niveau complète de React Native, dépendances et Expo incluses. | 1 341 | 30 |
| 25 | shopify-hydrogen | shopify/shopify-ai-toolkit | Implémenter des fonctionnalités Hydrogen Shopify via des recettes de cookbook prêtes à l'emploi. | 321 | 22 |
| 26 | nuxt-ui | nuxt/ui | Intégrer et utiliser les composants Nuxt UI avec les bonnes pratiques et conventions. | 6 578 | 20 |
| 27 | vercel-composition-patterns | elophanto/elophanto | Composer des composants React flexibles en évitant la prolifération de props booléennes. | 72 | 16 |
| 28 | rw-integrate-character-embed | runwayml/skills | Intégrer des appels vidéo avatar en temps réel dans des applications React. | 48 | 9 |
| 29 | building-admin-dashboard-customizations | medusajs/medusa-agent-skills | Créer des extensions UI personnalisées pour le tableau de bord Medusa Admin. | 167 | 5 |
| 30 | react-email | resend/resend-skills | Créer et envoyer des emails HTML responsives avec des composants React. | 114 | 5 |
| 31 | svelte-code-writer | sveltejs/ai-tools | Écrire, analyser et corriger du code Svelte 5 via des outils CLI dédiés. | 250 | 5 |
| 32 | svelte-core-bestpractices | sveltejs/ai-tools | Maîtriser les runes Svelte ($state, $derived, $effect) et les bonnes pratiques associées. | 250 | 5 |
| 33 | apollo-client | apollographql/skills | Gérer données locales et distantes via GraphQL avec Apollo Client 4.x. | 65 | 4 |
| 34 | shopify-polaris-app-home | shopify/agent-skills | Construire des interfaces Shopify Admin avec les composants Polaris App Home. | 32 | 4 |
| 35 | no-use-effect | factory-ai/factory-plugins | Remplacer useEffect par des patterns React appropriés selon le contexte d'usage. | 72 | 3 |
| 36 | error-tracking-react | posthog/skills | Intégrer le suivi d'erreurs PostHog dans une application React. | 37 | 3 |
| 37 | integration-nextjs-pages-router | posthog/skills | Intégrer PostHog Analytics dans une application Next.js avec le Pages Router. | 37 | 3 |
| 38 | integration-react-react-router-6 | posthog/skills | Intégrer PostHog Analytics dans une application React Router v6. | 37 | 3 |
| 39 | integration-react-react-router-7-data | posthog/skills | Intégrer PostHog Analytics dans une application React Router v7 en mode Data. | 37 | 3 |
| 40 | integration-react-react-router-7-declarative | posthog/skills | Intégrer PostHog Analytics dans une application React Router v7 en mode déclaratif. | 37 | 3 |
| 41 | integration-react-react-router-7-framework | posthog/skills | Intégrer PostHog Analytics dans une application React Router v7 en mode framework. | 37 | 3 |
| 42 | integration-react-tanstack-router-code-based | posthog/skills | Intégrer PostHog Analytics dans une application React avec TanStack Router. | 37 | 3 |
| 43 | integration-react-tanstack-router-file-based | posthog/skills | Intégrer PostHog Analytics dans une application React avec TanStack Router. | 37 | 3 |
| 44 | integration-react-vite | posthog/skills | Intégrer PostHog Analytics dans une application React Vite avec bonnes pratiques. | 37 | 3 |
| 45 | logs-nextjs | posthog/skills | Intégrer PostHog log ingestion dans des applications Next.js via OpenTelemetry. | 37 | 3 |
| 46 | mapbox-web-integration-patterns | mapbox/mapbox-agent-skills | Intégrer Mapbox GL JS dans React, Vue, Svelte, Angular et JavaScript vanilla. | 55 | 2 |
| 47 | acul-screen-generator | auth0/agent-skills | Générer des composants Auth0 ACUL prêts pour la production selon un workflow en 8 phases. | 21 | 1 |
| 48 | encore-frontend | encoredev/skills | Générer un client TypeScript typé pour connecter un frontend React à une API Encore. | 24 | 1 |
| 49 | rivetkit-client-react | rivet-dev/skills | Connecter des applications React à des Rivet Actors via hooks typés. | 15 | 1 |
| 50 | clerk-react-router-patterns | clerk/skills | Intégrer l'authentification Clerk dans une application React Router v7. | 40 | 0 |
À propos de cette sélection
L'écosystème React a beau être mature, migrer une codebase vers React 18 réserve encore des surprises : batching automatique, contexte legacy à décommissionner, librairies de test à porter d'Enzyme vers RTL. C'est là que les skills react couverts ici deviennent concrets, que tu sois fullstack JS en train de moderniser un monolithe ou frontend lead qui intègre les patterns Concurrent Mode dans une app Shopify ou un projet PostHog. Les cas d'usage vont de l'audit statique de patterns à risque dans une base existante jusqu'au diagnostic de compatibilité des dépendances avant une montée de version. Côté outillage, le niveau de précision disponible est déjà solide, avec une majorité de skills TypeScript couvrant les angles les plus fréquents d'une migration ou d'un audit de performance client.