React TypeScript: type-safe patterns for React 18-19 (hooks, Server Components, routing)
Patterns React type-safe : hooks typés, ref-as-prop, Server Components, Server Actions, TanStack Router et React Router v7
- Quoi
- Patterns React type-safe : hooks typés, ref-as-prop, Server Components, Server Actions, TanStack Router et React Router v7
- Coût
- Gratuit
- Prérequis
- rien à installer — le skill est une référence que votre agent suit quand il écrit du React + TypeScript ; idéal avec des projets React 18-19
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill de référence approfondi de @softaworks pour du React type-safe en TypeScript, couvrant React 18–19 : patterns de composants et de gestionnaires d'événements typés (types d'événements spécifiques, unions discriminées pour les props de variantes, ComponentPropsWithoutRef), typage des hooks (unions useState explicites, useRef null-vs-mutable, retours de tuples de hooks custom avec `as const`, gardes null useContext), composants génériques avec inférence de types, et les changements de React 19 (ref comme prop normale au lieu de forwardRef, useActionState remplaçant useFormState, l'API `use()` pour déballer les promesses) — plus les Server Components async, les Server Actions, et le routage type-safe avec TanStack Router (search params validés par Zod) et React Router v7 (génération de types en mode framework). Chaque section énonce des règles ALWAYS/NEVER et pointe vers des fichiers de référence dédiés. Bémols honnêtes : React uniquement — rien pour Vue, Svelte ou TS vanilla ; les fichiers de référence fournis font partie du skill, l'agent devrait donc récupérer tout le dossier du skill, pas seulement le SKILL.md. Licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : rien à installer — le skill est une référence que votre agent suit quand il écrit du React + TypeScript ; idéal avec des projets React 18-19 Installe-moi « React TypeScript : patterns type-safe pour React 18-19 (hooks, Server Components, routage) ». Il donne à mon agent les patterns React type-safe de @softaworks : composants et gestionnaires d'événements typés, typage des hooks (useState, useRef, useReducer, useContext, hooks custom), composants génériques avec inférence, patterns de migration React 19 (ref as prop, useActionState, use()), Server Components async et Server Actions, et routage type-safe avec TanStack Router et React Router v7 — chacun avec règles ALWAYS/NEVER et fichiers de référence. Licence MIT. Dépôt : https://github.com/softaworks/agent-toolkit/blob/main/dist/plugins/react-dev/skills/react-dev/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « react-dev ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — invoque-le quand tu écris ou révises du code React + TypeScript). 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.
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.