Frontend Patterns
Patterns React et Next.js pour composants, état, récupération de données, formulaires et performance de rendu.
- Quoi
- Patterns React et Next.js pour composants, état, récupération de données, formulaires et performance de rendu.
- Coût
- Gratuit
- Prérequis
- Utilisez « Patterns frontend » avec votre Muse.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor : une bibliothèque pratique de patterns pour le développement frontend moderne avec React et Next.js, rédigée en exemples de code correct/incorrect qu'un agent peut appliquer directement en construisant ou en révisant. Couvre la composition de composants plutôt que l'héritage, les choix de gestion d'état (useState, useReducer, Zustand, Context, et quand chacun mérite sa place), la récupération de données avec SWR, React Query et les server components, la performance de rendu (mémorisation, virtualisation, découpage de code), les formulaires avec validation et inputs contrôlés (schémas Zod), et le routage côté client. L'accent est mis sur le jugement, pas seulement la syntaxe : quel pattern pour quelle situation, et à quoi ressemblent les échecs classiques. Par @affaan-m, listé ici avec crédit à son créateur. Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : pur guide, rien à installer ; orienté React et Next.js du début à la fin, les exemples supposent cette stack même si les idées de fond (composition, colocalisation, état dérivé) se transposent bien. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans MuseOn scanne automatiquement chaque fiche et on signale tout ce qui semble louche, mais on ne peut pas relire chaque ligne du code de la communauté. Voici comment vérifier une création vous-même avant de l'installer.
Utilisez « Patterns frontend » avec votre Muse. Prérequis : l'app Muse (mobile ou web). Skill de pur guide, rien à installer. Un codebase React ou Next.js à construire ou à réviser. 1. Ouvrez le skill : https://github.com/affaan-m/ECC/blob/main/skills/frontend-patterns/SKILL.md et copiez le texte complet du SKILL.md. 2. Collez-le dans un chat avec Muse et ajoutez : « Révise [ce composant / cette logique d'état] au regard de ces patterns frontend : [collez votre code ou décrivez l'écran]. » 3. Demandez à Muse de signaler les violations de patterns (prop drilling qui appelle la composition, état dérivé stocké en double, mémorisation manquante sur les chemins chauds) et de proposer la forme corrigée avec du code avant/après. Astuce : demandez le « pourquoi » derrière chaque pattern signalé, pas seulement le correctif. Le jugement se transfère au prochain composant que vous écrirez. Sécurité : un skill est du texte d'instructions ; il n'exécute rien tout seul. Relisez tout code avant de le committer, ne collez jamais de secrets dans un chat, et relisez tout ce que Muse propose avant qu'il n'agisse.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
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.