nuxt4-patterns

Aperçu du skill nuxt4-patterns

À quoi sert nuxt4-patterns

nuxt4-patterns est un skill centré sur Nuxt 4 qui aide à choisir les bons patterns SSR, hydration, routing et data fetching avant de publier une page. Il est utile quand vous avez besoin de conseils concrets de Frontend Development qui impactent la justesse et les performances, pas seulement la syntaxe.

À qui s’adresse ce skill

Utilisez le skill nuxt4-patterns si vous construisez ou corrigez des apps Nuxt 4 et que vous avez besoin d’aide pour des erreurs de hydration mismatch, des route rules, du lazy loading ou des requêtes de données compatibles SSR. Il est particulièrement utile pour les ingénieurs qui veulent un workflow installable et réutilisable sur plusieurs pages et composants, au lieu de réécrire un prompt différent à chaque fois.

Ce qui le différencie

La valeur de nuxt4-patterns, c’est son aide à la décision : quand conserver un rendu déterministe, quand déplacer une logique côté client, quand utiliser useFetch plutôt que useAsyncData, et quand ssr: false est une vraie correction plutôt qu’un contournement. C’est ce qui rend le skill nuxt4-patterns plus utile qu’un prompt Nuxt générique, parce qu’il met au centre les compromis qui bloquent souvent l’adoption.

Comment utiliser le skill nuxt4-patterns

Installation de nuxt4-patterns et premier contrôle

Installez le skill nuxt4-patterns avec :

npx skills add affaan-m/everything-claude-code --skill nuxt4-patterns

Après l’installation, lisez d’abord SKILL.md. Ce dépôt de skill est petit et autonome, donc la vraie valeur vient de la compréhension des consignes et de leur application à votre base de code, pas de la recherche dans un vaste arbre de support.

Ce qu’il faut inclure dans votre demande

Pour bien utiliser nuxt4-patterns, donnez au modèle l’objectif de la page ou de la fonctionnalité, le mode de rendu et la classe exacte du problème. Un bon prompt ressemble à : « Corrige une page dashboard Nuxt 4 avec un hydration mismatch SSR causé par un formatage de date côté client uniquement ; garde la page rendue en SSR et conserve le SEO existant. » C’est mieux que « Aide avec l’hydration », parce que le skill comprend alors ce qu’il ne doit pas modifier.

Meilleur workflow pour appliquer les recommandations

Utilisez nuxt4-patterns comme filtre de décision : identifiez si le problème relève de la sécurité de l’hydration, des route rules, du lazy loading ou du data fetching, puis demandez le changement le plus petit et le plus sûr. Si la page est rendue côté serveur, demandez d’abord un markup compatible SSR ; si elle a vraiment besoin d’un comportement réservé au navigateur, demandez la boundary ClientOnly ou .client.vue la plus étroite possible.

Fichiers et sections à lire en priorité

Commencez par SKILL.md, en particulier les critères d’activation et les sections sur la sécurité de l’hydration et le data fetching. Ce sont les parties les plus utiles du guide nuxt4-patterns, parce qu’elles expliquent ce qui provoque le bug et quel pattern le corrige généralement. Si vous adaptez le skill à votre propre projet, inspectez aussi la structure du dépôt pour repérer d’éventuelles notes spécifiques à une fonctionnalité avant de copier des exemples.

FAQ sur le skill nuxt4-patterns

nuxt4-patterns est-il réservé aux apps Nuxt 4 en SSR ?

Non. Le skill nuxt4-patterns est surtout adapté aux apps Nuxt 4 qui mélangent SSR et comportement côté client, mais il aide aussi sur les pages hybrides, les routes pré-rendues et les composants qui récupèrent des données ou dépendent de l’état de la route. Si votre app est entièrement côté client, le skill est moins utile.

Quand ne faut-il pas l’utiliser ?

N’utilisez pas nuxt4-patterns si le problème n’a aucun lien avec le rendu ou le flux de données, par exemple un simple souci de style, de gestion d’état Vue sans rapport, ou de conception d’API backend. Il est le plus pertinent quand le problème concerne la cohérence du markup, le comportement du payload ou des choix de rendu au niveau de la route.

Est-ce mieux qu’un prompt classique ?

Généralement oui, parce que le skill nuxt4-patterns intègre les contraintes qui comptent pour le Frontend Development sous Nuxt 4 : premier rendu déterministe, fetchs compatibles SSR et boundaries client-only bien maîtrisées. Un prompt classique peut donner une réponse qui fonctionne, mais il risque plus facilement de rater des problèmes d’hydration ou de payload.

Est-ce adapté aux débutants ?

Oui, si vous pouvez décrire la page et le symptôme. Le guide nuxt4-patterns est assez concret pour des débutants, mais les meilleurs résultats viennent quand ils fournissent un composant, une route ou un message d’erreur précis plutôt qu’une demande vague sur l’architecture.

Comment améliorer le skill nuxt4-patterns

Donnez au modèle la vraie contrainte

La meilleure utilisation de nuxt4-patterns commence par la contrainte que vous devez préserver : SSR, SEO, comportement de route ou taille du bundle. Dites si vous pouvez accepter un rendu côté client uniquement, si la page doit rester crawlable et si les données doivent être récupérées côté serveur. Le skill peut alors choisir le bon pattern au lieu de surcorriger.

Décrivez précisément le mismatch ou le compromis

Si vous avez un bug, incluez le symptôme exact : texte de warning d’hydration, route qui se comporte mal, données récupérées deux fois, ou composant qui s’affiche différemment côté serveur et côté client. Si vous avez une demande de fonctionnalité, précisez le comportement de rendu attendu et ce qui doit rester inchangé. C’est le moyen le plus rapide d’améliorer les résultats de nuxt4-patterns.

Avancez de changements sûrs vers des changements plus ciblés

Demandez d’abord la correction la plus petite, puis affinez. Par exemple : « Garde le SSR, supprime le mismatch, ne modifie pas la mise en page », puis ensuite : « Maintenant, refactore pour charger le graphique en lazy load uniquement à l’interaction. » Cette approche aide le skill nuxt4-patterns à rester focalisé sur la vraie décision plutôt que de réécrire toute la page.