Zustand state management — typed React stores, persist, devtools, Next.js SSR
State management React minimal avec Zustand v5 : le pattern TypeScript create<T>()(), les sélecteurs, les middlewares persist/devtools/immer, les slices, la gestion de l'hydratation Next.js, la prévention des problèmes connus, templates et références groupés
- Quoi
- State management React minimal avec Zustand v5 : le pattern TypeScript create<T>()(), les sélecteurs, les middlewares persist/devtools/immer, les slices, la gestion de l'hydratation Next.js, la prévention des problèmes connus, templates et références groupés
- Coût
- Gratuit
- Prérequis
- un projet React 18+ avec TypeScript 5+ (zustand@5 via bun/npm/yarn)
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — zustand-state-management de @secondsky : un guide Zustand v5 prêt pour la production (v5.0.14, React 18+, TypeScript 5+). Démarrage rapide : pourquoi Zustand, un store typé avec le pattern critique `create<T>()()` à doubles parenthèses, des sélecteurs pour des souscriptions fines. Trois patterns de setup (JS basique, TypeScript recommandé, persistant avec localStorage/sessionStorage), un guide de middlewares (persist, devtools, immer — avec ordre de composition), des règles toujours/jamais (pas de mutation d'état, pas de nouveaux objets dans les sélecteurs, clés persist uniques, pas de Zustand pour le server state, jamais de lecture localStorage en SSR sans vérification d'hydratation), une table de prévention de 5 problèmes (hydratation mismatch, inférence TypeScript, erreurs d'import, boucles infinies, types de slices) et un dépannage rapide. Livré avec des templates groupés (stores basic/typescript/persist/slices/devtools/nextjs/computed/async-actions) et des fichiers references/ (guide middlewares, patterns TypeScript, hydratation Next.js, guide de migration depuis Redux/Context/Zustand v4, problèmes connus, patterns courants, sujets avancés). Bémols honnêtes : la version épinglée (5.0.14) peut vieillir — vérifier la release Zustand actuelle avant de se fier au comportement exact. Licence MIT (frontmatter et manifest concordent). Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet React 18+ avec TypeScript 5+ (zustand@5 via bun/npm/yarn) Installe-moi « State management Zustand — stores React typés, persist, devtools, SSR Next.js ». Il donne à mon agent le guide Zustand v5 de @secondsky : le pattern TypeScript create<T>()(), les souscriptions par sélecteurs, les middlewares persist/devtools/immer (l'ordre de composition compte), le pattern slices, la gestion de l'hydratation SSR Next.js, la prévention des problèmes connus (hydratation mismatch, inférence TypeScript, boucles infinies, types de slices), plus des templates de stores et docs de référence groupés. Licence MIT (frontmatter et manifest concordent). Dépôt : https://github.com/secondsky/claude-skills/blob/main/plugins/zustand-state-management/skills/zustand-state-management/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. 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é « zustand-state-management ». 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. installer zustand dans mon projet avec `bun add zustand` ; rien d'autre — c'est un skill de guidance). 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.