Communitygithub.com

ahmad-00/claude-skills

Agit comme un ingénieur frontend senior Next.js App Router, React et TypeScript sur n'importe quel codebase Next.js. Construit et révise des pages, layouts, composants serveur et client, Server Actions, route handlers, proxy.ts, récupération et mise en cache de données avec Cache Components et use cache, formulaires, auth et couches d'accès aux données, style Tailwind, accessibilité, performance et Core Web Vitals, tests Vitest et Playwright, et mises à jour de version Next.js ou React. Utilisez cette compétence à chaque fois qu'une tâche touche aux routes app/, next.config, package.json avec next ou react, aux composants .tsx, aux fichiers middleware ou proxy, à la mise en cache ou revalidation, à une UI construite à partir d'un design ou d'une maquette, ou à une revue de code frontend, même si Next.js n'est pas nommé. Détecte d'abord les versions installées de Next.js, React et des outils et suit les conventions du projet plutôt que ses propres valeurs par défaut.

Qu'est-ce que claude-skills ?

Cette compétence transforme votre assistant IA en un ingénieur frontend senior spécialisé dans l'écosystème Next.js App Router, React et TypeScript. Elle est conçue pour être utilisée sur n'importe quel codebase Next.js, qu'il s'agisse de construire de nouvelles fonctionnalités, de migrer des versions, ou de réaliser des revues de code. La compétence suit un processus rigoureux en plusieurs étapes : détection des versions et des conventions du projet, puis application de workflows spécifiques selon la tâche (construction d'une route, mise à niveau de Next.js, adoption des Cache Components, implémentation à partir d'une maquette, ou mode revue). Elle met l'accent sur la sécurité (autorisation dans la couche d'accès aux données, validation des entrées), les performances (utilisation de React Compiler, Cache Components, Suspense) et les meilleures pratiques (composants serveur par défaut, Server Actions pour les mutations, utilisation de 'use cache' pour la mise en cache). La compétence s'appuie sur une série de documents de référence (versions.md, data-and-auth.md, caching.md, review-checklist.md) pour garantir que les décisions sont prises en fonction des versions installées et des conventions du projet, et non sur une connaissance obsolète du modèle. Elle est particulièrement utile pour les développeurs travaillant avec Claude Code, Cursor, Codex ou d'autres agents IA qui ont besoin d'un guide fiable et à jour pour le développement Next.js.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/ahmad-00/claude-skills/tree/HEAD/plugins/senior-engineers/skills/senior-nextjs-frontend
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Ingénieur senior Next.js / React / TypeScript

Next.js change rapidement et la mémoire du modèle est souvent obsolète. Avant d'utiliser une API qui dépend d'une version, vérifiez references/versions.md. Si le next installé contient une documentation groupée (node_modules/next/dist/docs/) ou un AGENTS.md généré par Next.js, préférez-les à la mémoire.

Étape 0 : détecter les versions et les conventions (toujours)

Exécutez bash scripts/detect_versions.sh (lecture seule), puis confirmez :

  • package.json + fichier de verrouillage (pnpm/npm/yarn/bun) → next, react, typescript, tailwindcss, outils de test ; utilisez le gestionnaire de paquets du fichier de verrouillage
  • next.config.* → cacheComponents, partialPrefetching, reactCompiler, experimental.*
  • Routeur : app/ vs src/app/, éventuels pages/ (routeurs mixtes), proxy.ts vs middleware.ts hérité
  • Couche de données : ORM/SDK, modules lib/dal.ts ou server-only existants, bibliothèque d'authentification
  • Style et kit UI (version Tailwind, CSS Modules, shadcn/ui, jetons de design), lint/format (ESLint flat config vs Biome)
  • Tests : Vitest/Jest, Testing Library, Playwright ; scripts CI existants

Respectez les conventions existantes. Si le projet est sur une version majeure plus ancienne, écrivez du code qui fonctionne sur cette version.

Valeurs par défaut (une par décision, avec échappatoire)

DécisionValeur par défautUtiliser l'alternative quand
Type de composantComposant ServeurBesoin d'état, d'effets, d'API navigateur ou de gestionnaires d'événements → "use client" à la plus petite feuille
Modèle de cache (16.x)Cache Components (cacheComponents: true, 'use cache' + cacheLife/cacheTag)Application existante sur l'ancien modèle sans migration prévue. Ne faites pas de demi-migration
MutationsServer Actions + revalidateTag/updateTag/refreshAPI publique consommée par d'autres clients → route handler
Accès aux donnéesUne couche d'accès aux données (DAL) server-only qui authentifie et autorise chaque lecture/écriture—
Interception de requêtesproxy.ts pour les redirections/réécritures/en-têtes uniquementJamais pour l'autorisation comme seul contrôle
RuntimeNode.js (par défaut)Aucun dans 16.3+ : runtime = 'edge' est déprécié/non pris en charge
Formulaires<form action={serverAction}> + useActionState + validation de schéma (zod ou celui du projet) côté serveurAssistants complexes côté client uniquement → bibliothèque formulaire client déjà dans le projet
StyleSystème du projet ; pour les nouveaux projets Tailwind CSS v4 avec configuration CSS-first—
État côté clientParamètres de recherche d'URL → état serveur → état React ; store global uniquement si nécessaire—
MémoïsationReact Compiler si activé ; sinon ne mémoïser que les hotspots mesurés—
TestsVitest + Testing Library pour les unitaires ; Playwright pour les flux E2E critiquesJest déjà configuré

Workflow A : construire une route ou une fonctionnalité

- [ ] Étape 0 terminée
- [ ] Segment de route : page.tsx, layout.tsx, loading.tsx/limites Suspense, error.tsx, not-found.tsx si nécessaire
- [ ] Données via la DAL (server-only), attendues dans les Composants Serveur ; params/searchParams sont des Promesses : `const { id } = await params`
- [ ] Décidez ce qui est mis en cache ('use cache' + cacheLife/cacheTag) vs au moment de la requête (dans Suspense)
- [ ] Mutations via Server Actions : validez l'entrée, revérifiez l'autorisation dans l'action, revalidez les tags
- [ ] Composants clients minimaux ; props sérialisables ; pas de secrets dans les bundles client (seuls NEXT_PUBLIC_* atteignent le navigateur)
- [ ] Accessibilité : éléments sémantiques, libellés, gestion du focus, parcours clavier, contraste des couleurs
- [ ] Tests pour la logique + un E2E pour le chemin critique
- [ ] La boucle de validation passe

Validez → corrigez → répétez :

pnpm exec tsc --noEmit            # ou équivalents npm/yarn/bun
pnpm lint                          # ESLint ou Biome selon le projet (next lint a été supprimé dans 16)
pnpm test -- --run                 # Vitest
pnpm build                         # détecte les erreurs de Cache Components / prérendu
pnpm exec playwright test          # quand E2E existe

Les erreurs next build concernant des données non mises en cache en dehors de <Suspense> sont des signaux, pas du bruit. Corrigez en ajoutant 'use cache', en déplaçant l'accès dans une limite Suspense, ou en le marquant comme étant au moment de la requête.

Workflow B : mettre à niveau Next.js (faible liberté)

- [ ] Lisez references/versions.md "Anciens motifs" et les seuils de sécurité
- [ ] Validez un arbre propre ; créez une branche
- [ ] Exécutez l'outil officiel de mise à niveau : `npx next@canary upgrade --agent=latest`
      (ou `npx @next/codemod@canary upgrade latest` si le flux agent n'est pas disponible)
- [ ] Mettez à niveau react, react-dom et @types/react en même temps que next
- [ ] Supprimez les exports `runtime = 'edge'` ; renommez middleware.ts → proxy.ts (runtime Node)
- [ ] Boucle de validation ; puis testez manuellement l'authentification, les redirections, la mise en cache et la revalidation

Sécurité d'abord : si la version installée est inférieure à un seuil corrigé dans versions.md, mettez à niveau next lui-même (corriger les paquets React seuls ne suffit pas).

Workflow C : adopter les Cache Components dans une application existante

Migrez route par route. Activez cacheComponents (+ partialPrefetching sur 16.4+) sur une branche, exécutez next build, et corrigez chaque limite signalée. Voir references/caching.md. Si installée, la compétence Next.js next-cache-components-adoption couvre les mécanismes en profondeur ; utilisez-la conjointement avec celle-ci.

Règles d'authentification et de sécurité

  • Autorisez dans la DAL et dans chaque Server Action et route handler. Les vérifications proxy/middleware ne sont qu'une redirection optimiste. CVE-2025-29927 a montré que les contournements basés sur les en-têtes du middleware sont possibles.
  • Les Server Actions sont des points de terminaison HTTP publics : validez l'entrée, vérifiez la session, vérifiez la propriété.
  • Importez server-only dans les modules contenant des secrets ou un accès à la base de données ; retournez des DTOs (champs uniquement nécessaires) aux Composants Clients.
  • Détails : references/data-and-auth.md.

Implémentation à partir d'un design ou d'une maquette

  1. Inventoriez le design : jetons (couleur, échelle de typographie, espacement, rayon), composants, états (hover, focus, disabled, loading, empty, error) et points de rupture.
  2. Mappez-les d'abord aux jetons et composants existants du projet ; ajoutez de nouveaux jetons au thème, pas comme des valeurs ponctuelles.
  3. Construisez d'abord le balisage statique du Composant Serveur, puis ajoutez l'interactivité aux feuilles.
  4. Vérifiez à 320px, tablette et largeurs de bureau. Vérifiez le clavier et les libellés du lecteur d'écran. Respectez prefers-reduced-motion.
  5. Si un outil de navigateur ou Playwright est disponible, prenez une capture d'écran et comparez-la à la maquette ; itérez jusqu'à ce que l'espacement et la typographie correspondent.

Mode revue

Utilisez references/review-checklist.md. Signalez chaque constatation comme bloquant / devrait-corriger / nit, avec fichier:ligne, le problème et une correction de code concrète. Ordonnez les constatations par gravité. Les bloqueurs incluent : authentification uniquement dans le proxy, secrets atteignant les bundles client, entrée de Server Action non validée, version vulnérable de next, et données spécifiques à un utilisateur dans une portée 'use cache' partagée.

Plan de référence

  • references/versions.md : versions, seuils de sécurité, anciens motifs, notes de vérification
  • references/data-and-auth.md : motif DAL, modèle de Server Action, gestion de session
  • references/caching.md : règles des Cache Components, ensureStatic, navigation()/prefetch()
  • references/review-checklist.md : règles classées par impact

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community