← Recherche

React Composition Patterns
Frontend 📌 Version épinglée : commit 063bee9
⚙ Prérequis: Avant de commencer…

React Composition Patterns

Sélectionné par Skill Harbor — les conseils de composition React de Vercel sous forme de skill d'agent : un court fichier principal qui renvoie à huit fichiers de règles détaillées sur le remplacement de la

L’essentiel
Quoi
Sélectionné par Skill Harbor — les conseils de composition React de Vercel sous forme de skill d'agent : un court fichier principal qui renvoie à huit fichiers de règles détaillées sur le remplacement de la
Coût
Gratuit
Prérequis
Avant de commencer : lis ce prompt d'installation au complet, dis-moi en quelques lignes ce que ce skill fait et ce que son installation implique, et attends mon feu vert avant de faire quoi que ce soit d'autre.
Installation
Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.

Version :

⌁

Installation

Copiez le dossier d’installation ci-dessous, puis collez-le dans Muse📌 Version épinglée : commit 063bee9

Avant de commencer : lis ce prompt d'installation au complet, dis-moi en quelques lignes ce que ce skill fait et ce que son installation implique, et attends mon feu vert avant de faire quoi que ce soit d'autre. Prérequis — Aucun — aucun compte, aucune clé, aucun paiement, et aucun script dans son dossier. C'est un skill de connaissance seulement : à l'usage, l'agent lit ses fichiers de règles en travaillant sur mon propre code React, rien n'est installé dans mon projet et rien n'est contacté. Une note de portée : sa règle React 19 s'applique seulement à React 19 et plus ; le reste s'applique à l'architecture de composants React en général. Installe-moi « React Composition Patterns ». Il enseigne à l'agent des patterns de composition React qui passent à l'échelle : ne pas ajouter de props booléennes pour personnaliser un comportement (utiliser la composition à la place), structurer les composants complexes en composants composés partageant un contexte, découpler la gestion d'état de l'interface en remontant l'état dans des composants providers derrière une interface de contexte générique, créer des composants variantes explicites plutôt que des modes booléens, composer avec les children plutôt que les render props, et, sous React 19, abandonner forwardRef et utiliser use() plutôt que useContext(). Son dossier contient le fichier principal, huit fichiers de règles avec exemples incorrects et corrects, un AGENTS.md compilé avec toutes les règles développées, un README et un fichier de métadonnées. Dépôt : https://github.com/vercel-labs/agent-skills (le skill est tout le dossier skills/composition-patterns/ au commit épinglé : SKILL.md plus 13 fichiers compagnons, 14 fichiers en tout) Version épinglée : installe le code au commit 063bee94c3f4df8453406c830b0a7df0f2860278 exactement. Ne substitue pas une version plus récente. Si ce commit est inaccessible, arrête-toi et dis-le-moi. 1. Clone https://github.com/vercel-labs/agent-skills dans un dossier temporaire, place-toi au commit 063bee94c3f4df8453406c830b0a7df0f2860278, et copie le dossier skills/composition-patterns/ de ce checkout. Compare ensuite chaque fichier du dossier aux empreintes enregistrées pour cette fiche le 2026-10-22 : [FINGERPRINTS] - AGENTS.md: SHA-256 89e3ddd58fcf99a53a50e25dfd21b8cde1be5f10b7df6bacd3dfa6796932f516 - README.md: SHA-256 85915a43a6f0b4efe525e3cf6398dd866166da2025837c4460468a24a940da94 - SKILL.md: SHA-256 e38e0eaa609316b10423a9a138ed95e35099accd3f735585295c8a8f165c28a3 - metadata.json: SHA-256 49262ed5cb4186f31ee980cf8d990be0170c51efed4908d0464a1cff9905bd05 - rules/_sections.md: SHA-256 a174213b87e6911e2b766995a2cbaf8d1534057076e82fb79fe3f0ecb38047df - rules/_template.md: SHA-256 587f7d16b0660eb61fee4a4d3d7df2b3077d6835de170602c7d6e60bee559131 - rules/architecture-avoid-boolean-props.md: SHA-256 007555ebb020f4d552582a2c4db194db71a1fd33094012e5187bcfa4f8c392d5 - rules/architecture-compound-components.md: SHA-256 f246af13dc269b521cf20eb8ad99a0cb645beac381c8c9b117262c34612c8457 - rules/patterns-children-over-render-props.md: SHA-256 7c45a0d21b3c4126a32cba916ee31adeae195386ad1dbbe6634aedb7457aa0ad - rules/patterns-explicit-variants.md: SHA-256 8c19e596e61807549d01ce8c6954c6358199f97a8511c0c02c625ec0efda8c0e - rules/react19-no-forwardref.md: SHA-256 881830adb7534c4b2d70db426556646ad9837f5478f744f35641f635ada22227 - rules/state-context-interface.md: SHA-256 09e73afbf9285fa416679cc864a287b9e8b821d0969272ab784295386d8c9bc3 - rules/state-decouple-implementation.md: SHA-256 76a8c1eb29a70d8996ab3f71260345af2f7bc89deab815a421d6c87c6591a9c3 - rules/state-lift-state.md: SHA-256 74c54038a6c554c748fe31cec673b80861b5d920b7553cf78cdf10d18b4b759b Si un fichier ne correspond pas, il a changé depuis la préparation de la fiche : ne l'installe pas encore, dis-moi ce que tu as trouvé et laisse-moi décider. 2. Lis SKILL.md au complet, et dis-moi en mots simples : ce que le skill fait quand on l'utilise, à quoi il se connecte, s'il lit ou envoie des informations personnelles ou des identifiants, et tout ce qui semble inhabituel. Arrête-toi sur tout signal d'alerte et dis-le-moi avant d'aller plus loin. Confirme ces points à partir des fichiers : - Le dossier du skill contient 14 fichiers et aucun code : SKILL.md (nom frontmatter vercel-composition-patterns), AGENTS.md (le guide complet compilé), README.md, metadata.json, un aperçu des sections et un modèle de règle sous rules/, et 8 fichiers de règles. Il n'y a aucun script à exécuter, ni à l'installation ni à l'usage. - Rien n'est envoyé nulle part pendant l'installation elle-même ; le seul téléchargement à l'installation est le dossier du skill depuis GitHub au commit épinglé. - À l'usage, l'agent lit seulement ces fichiers de règles en travaillant sur mon propre projet React, en local dans ma conversation et ma base de code. Aucun service n'est contacté, aucune dépendance n'est installée, et aucune information personnelle ni aucun identifiant n'est lu ou envoyé. - N'applique aucun pattern, ne refactore aucun composant, et n'utilise le skill d'aucune façon pendant cette installation : l'utiliser est une étape séparée qui ne commence que quand je demande un travail React plus tard. 3. Quand je dis « yes, install », installe-le comme skill : copie tout le dossier composition-patterns dans le répertoire des skills de l'agent, dans un dossier nommé exactement « composition-patterns », en gardant ses 14 fichiers dans leur arborescence relative d'origine (SKILL.md à sa racine). 4. Vérifie sans appels réseau : frontmatter valide (name: vercel-composition-patterns), les 14 fichiers en place avec des empreintes concordantes. N'exécute rien du dossier et n'utilise pas le skill pour vérifier. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (par exemple : que c'est de la connaissance seulement, que sa règle React 19 exige React 19 ou plus, et que l'utiliser est une étape séparée qui ne commence que quand je demande un travail React). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.

🔒 Sécurité, provenance et ce que ça touche
🧭 Ce que ça touche
D’après le prompt d’installation que nous avons analysé, cette création ne lance pas de commandes, ne fait pas d’appels réseau à des tiers, n’installe pas de paquets, n’écrit pas de fichiers et ne demande pas de clés API.
Analyse du prompt d’installation · 2026-10-22
🔒 Sécurité et provenance
📌 Version épinglée : commit 063bee9 · 2026-10-22
🔎 Dernière vérification · 23 oct. 2026 : aucun changement détecté dans les fichiers liés par ce prompt d’installation
Skill Harbor ne révise jamais le code des skills listés. Ce sont des faits datés sur le prompt d’installation et notre test d’installation, pas une certification de sécurité. Révisez un skill vous-même avant de l’installer. Comment nous vérifions
Envie d'être encore plus prudent ?

Le prompt d'installation ci-dessous inclut déjà les étapes de vérification : votre agent suit la checklist communautaire avant d'installer tout ce qui contient du code exécutable. Vous en voulez plus ?

Comment vérifier une création avant de l’installer →

?

Questions

Comment installer une création ?

Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.

Où va mon argent ?

Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.

Que signifie le ✓ à côté du nom d’un créateur ?

Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.