Communitygithub.com

Geruyang/agent-skills-library

Guide expert Next.js App Router. À utiliser lors de la construction, du débogage ou de l'architecture d'applications Next.js — routage, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, récupération de données, stratégies de rendu et déploiement sur Vercel.

Qu'est-ce que agent-skills-library ?

Cette compétence fournit des conseils d'expert pour le Next.js App Router, couvrant les meilleures pratiques pour le routage, les Server Components, les Server Actions, les Cache Components, les layouts, le middleware/proxy, la récupération de données, les stratégies de rendu et le déploiement sur Vercel. Elle aide les développeurs et les agents IA à structurer correctement les projets Next.js, à détecter les modèles invalides de Server Components asynchrones, à gérer les changements d'API asynchrones de Next.js 15+, et à choisir entre les runtimes Node.js et Edge. La compétence inclut des références à des fichiers spécialisés détaillant chaque sujet, ce qui permet une implémentation précise et un débogage efficace. Elle prend en charge les environnements de développement avec Claude Code, Cursor, Codex ou d'autres agents IA, et est particulièrement utile lors de la construction, du débogage ou de l'architecture d'applications Next.js destinées à être déployées sur Vercel.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Geruyang/agent-skills-library/tree/HEAD/original-skills/x-openai-nextjs-0babc94
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

Bonnes pratiques Next.js

Appliquez ces règles lors de l'écriture ou de la révision de code Next.js.

Conventions de fichiers

Voir file-conventions.md pour :

  • Structure du projet et fichiers spéciaux
  • Segments de route (dynamiques, globaux, groupes)
  • Routes parallèles et interceptées
  • Renommage du middleware dans v16 (middleware → proxy)

Limites RSC

Détectez les motifs invalides de React Server Component.

Voir rsc-boundaries.md pour :

  • Détection de composant client asynchrone (invalide)
  • Détection de props non sérialisables
  • Exceptions de Server Action

Motifs asynchrones

Changements d'API asynchrones de Next.js 15+.

Voir async-patterns.md pour :

  • params et searchParams asynchrones
  • cookies() et headers() asynchrones
  • Codemod de migration

Sélection du runtime

Voir runtime-selection.md pour :

  • Par défaut, utiliser le runtime Node.js
  • Quand le runtime Edge est approprié

Directives

Voir directives.md pour :

  • 'use client', 'use server' (React)
  • 'use cache' (Next.js)

Fonctions

Voir functions.md pour :

  • Hooks de navigation : useRouter, usePathname, useSearchParams, useParams
  • Fonctions serveur : cookies, headers, draftMode, after
  • Fonctions de génération : generateStaticParams, generateMetadata

Gestion des erreurs

Voir error-handling.md pour :

  • error.tsx, global-error.tsx, not-found.tsx
  • redirect, permanentRedirect, notFound
  • forbidden, unauthorized (erreurs d'authentification)
  • unstable_rethrow pour les blocs catch

Motifs de données

Voir data-patterns.md pour :

  • Server Components vs Server Actions vs Route Handlers
  • Éviter les cascades de données (Promise.all, Suspense, preload)
  • Récupération de données dans les composants client

Route Handlers

Voir route-handlers.md pour :

  • Bases de route.ts
  • Conflits du gestionnaire GET avec page.tsx
  • Comportement de l'environnement (pas de DOM React)
  • Quand les utiliser vs Server Actions

Métadonnées et images OG

Voir metadata.md pour :

  • Métadonnées statiques et dynamiques
  • Fonction generateMetadata
  • Génération d'images OG avec next/og
  • Conventions de métadonnées basées sur les fichiers

Optimisation des images

Voir image.md pour :

  • Toujours utiliser next/image plutôt que <img>
  • Configuration des images distantes
  • Attribut sizes réactif
  • Placeholders flous
  • Chargement prioritaire pour LCP

Optimisation des polices

Voir font.md pour :

  • Configuration de next/font
  • Google Fonts, polices locales
  • Intégration avec Tailwind CSS
  • Préchargement des sous-ensembles

Regroupement (Bundling)

Voir bundling.md pour :

  • Paquets incompatibles avec le serveur
  • Imports CSS (pas de balises link)
  • Polyfills (déjà inclus)
  • Problèmes ESM/CommonJS
  • Analyse du bundle

Scripts

Voir scripts.md pour :

  • next/script vs balises script natives
  • Les scripts en ligne nécessitent un id
  • Stratégies de chargement
  • Google Analytics avec @next/third-parties

Erreurs d'hydratation

Voir hydration-error.md pour :

  • Causes courantes (API navigateur, dates, HTML invalide)
  • Débogage avec la superposition d'erreurs
  • Corrections pour chaque cause

Limites Suspense

Voir suspense-boundaries.md pour :

  • Sortie CSR avec useSearchParams et usePathname
  • Quels hooks nécessitent des limites Suspense

Routes parallèles et interceptées

Voir parallel-routes.md pour :

  • Motifs de modale avec @slot et intercepteurs (.)
  • default.tsx pour les fallbacks
  • Fermeture correcte des modales avec router.back()

Auto-hébergement

Voir self-hosting.md pour :

  • output: 'standalone' pour Docker
  • Gestionnaires de cache pour ISR multi-instances
  • Ce qui fonctionne vs ce qui nécessite une configuration supplémentaire

Astuces de débogage

Voir debug-tricks.md pour :

  • Point de terminaison MCP pour le débogage assisté par IA
  • Reconstruire des routes spécifiques avec --debug-build-paths

Individual skills in this repo

This repo contains 12 individual skills — each has its own dedicated page.

Geruyang/agent-skills-library

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Geruyang/agent-skills-library

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Geruyang/agent-skills-library

Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.

Geruyang/agent-skills-library

Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Build Web Apps or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is; otherwise use regular Playwright with the recorded reason.

Geruyang/agent-skills-library

Design UI surfaces for browser games. Use when the user asks for HUDs, menus, overlays, responsive layouts, or visual direction that must protect the playfield.

Geruyang/agent-skills-library

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

Geruyang/agent-skills-library

Guide for building, configuring, and deploying microfrontends on Vercel. Use this skill when the user mentions microfrontends, multi-zones, splitting an app across teams, independent deployments, cross-app routing, incremental migration, composing multiple frontends under one domain, microfrontends.json, @vercel/microfrontends, the microfrontends local proxy, or path-based routing between Vercel projects. Also use when the user asks about shared layouts across projects, navigation between microfrontends, fallback environments, asset prefixes, or feature flag controlled routing.

Geruyang/agent-skills-library

Use when sizing Public Equity Investing positions, finding equity hedges, or building an integrated position-and-hedge risk plan from a listed-equity thesis. Do not use for thesis construction, standalone event underwriting, trade execution, personal investment advice, or credit-instrument risk.

Geruyang/agent-skills-library

Integrate data visualizations into React and Next.js applications. Use when the user needs chart components, UML-like or architecture diagram components, React integration patterns, Next.js client or server boundaries, hydration-safe rendering, lazy loading, framework-aware performance, scroll-driven visual stories, or export guidance.

Geruyang/agent-skills-library

shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing product UI, building custom registries, configuring themes, or troubleshooting component issues.

Geruyang/agent-skills-library

v0 by Vercel expert guidance. Use when discussing AI code generation, generating UI components from prompts, v0 CLI usage, v0 SDK/API integration, or integrating v0 into development workflows with GitHub and Vercel deployment.

Geruyang/agent-skills-library

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

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