Next.js

Next.js skills keep your agent current on App Router, server components, caching APIs, and Vercel deployment patterns.

80 compétences dans ce thème

Ce que votre agent peut faire

  • Structure routes with the App Router and route groups
  • Use server and client components correctly
  • Apply caching and revalidation APIs
  • Configure metadata and SEO in Next.js
  • Deploy to Vercel with optimal settings
  • Migrate from Pages Router patterns when needed

Compétences dans ce thème

vercel/next.js

The React Framework

vercel/next.js

npx skills add vercel/next.js

payloadcms/payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.

payloadcms/payload

npx skills add payloadcms/payload

vercel/ai

The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents

vercel/ai

npx skills add vercel/ai

vercel-labs/skills

Open agent skills tool with npx skills CLI and SKILL.md definitions for coding agents.

vercel-labs/skills

npx skills add vercel-labs/skills

blog

>

AgriciDaniel/claude-blog

npx skills add AgriciDaniel/claude-blog

blog-write

>

AgriciDaniel/claude-blog

npx skills add AgriciDaniel/claude-blog

blog-audio

>

AgriciDaniel/claude-blog

npx skills add AgriciDaniel/claude-blog

laguagu/claude-code-nextjs-skills

Claude Code skills for AI apps • Next.js 16 • AI SDK 6 • pgvector • bun • Ralph Loop

laguagu/claude-code-nextjs-skills

npx skills add laguagu/claude-code-nextjs-skills

ui-ux-pro-max

Data-driven UI/UX design intelligence with 50+ styles, 21 palettes, 50 font pairings, and 9 framework stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Searchable design knowledge base for professional UI/UX implementation. | 数据驱动的专业 UI/UX 设计智能,包含 50+ 设计风格、21 种配色方案、50 种字体配对,支持 9 种前端框架。可搜索的设计知识库,用于专业 UI/UX 实现。

shining319/claude-code-single-person-workflow

npx skills add shining319/claude-code-single-person-workflow

solution-architect

Transform product requirements into executable technical architecture. Use when users request: (1) Technical/system architecture design, (2) Tech stack selection, (3) Architecture from PRD, (4) Deployment strategy, (5) Architecture review. Provides workflows from requirements to deployment with tech stack templates. Triggers: architecture, tech stack, system design, deployment, infrastructure. | 将产品需求转化为技术架构。触发词:架构设计、技术架构、系统架构、技术选型、部署方案、基础设施。

shining319/claude-code-single-person-workflow

npx skills add shining319/claude-code-single-person-workflow

doanbactam/agent-skills-directory

Browse SKILL.md files for Claude, Cursor, Windsurf and other AI tools

doanbactam/agent-skills-directory

npx skills add doanbactam/agent-skills-directory

cometchat/cometchat-skills

Agent skills for integrating CometChat into Claude Code and AI coding workflows — chat, messaging, and real-time features.

cometchat/cometchat-skills

npx skills add cometchat/cometchat-skills

vibestackdev/vibe-stack

29 .mdc architecture rules that prevent AI coding assistants from hallucinating insecure auth, deprecated imports, and broken Next.js 15 patterns. Built for Cursor Agent and Claude Code.

vibestackdev/vibe-stack

npx skills add vibestackdev/vibe-stack

mulkymalikuldhrs/AI-MultiColony-Ecosystem

Multi-Agent Colony Coordination Platform — 40+ Specialized AI Agents with FastAPI & Next.js Dashboard

mulkymalikuldhrs/AI-MultiColony-Ecosystem

npx skills add mulkymalikuldhrs/AI-MultiColony-Ecosystem

SHUKLAO/call-with-ai-agent

🗣️ Engage in real-time voice conversations with an AI agent using Next.js and ElevenLabs for an interactive and responsive user experience.

SHUKLAO/call-with-ai-agent

npx skills add SHUKLAO/call-with-ai-agent

trh-thanh30/ecommerce-base

🛒 Full-stack E-commerce Monorepo — NestJS API, Next.js Storefront & Admin Dashboard with Prisma, PostgreSQL, Redis, BullMQ, Docker & CI/CD

trh-thanh30/ecommerce-base

npx skills add trh-thanh30/ecommerce-base

stevennana/mina-ralph-loop-bootstrap-nextjs

Codex Ralph Loop Skill for the nextjs

stevennana/mina-ralph-loop-bootstrap-nextjs

npx skills add stevennana/mina-ralph-loop-bootstrap-nextjs

kimzeze/frontend-conventions

Frontend coding conventions for AI coding agents (Claude Code, Cursor, Codex). 67 rules for Next.js 16 + React 19 + TanStack Query v5 + FSD.

kimzeze/frontend-conventions

npx skills add kimzeze/frontend-conventions

yamadashy/repomix-explorer

Analyze or explore a codebase (remote or local repository) by packing it with the Repomix CLI, then reading and searching the generated output. Use when the user wants a high-level understanding of an unfamiliar or large repo, not a targeted edit. Trigger for: - Structure/overview: "analyze this repo", "what's the structure", "explain this codebase", "what's in vercel/next.js" - Pattern discovery across many files: "find all auth code", "where are the API endpoints", "show me all React components" - Metrics: "how many files/tokens", "largest files", "TypeScript vs JavaScript ratio" - Remote repos: any github.com URL or "owner/repo" the user wants explored DO NOT trigger for: - Editing, refactoring, or writing code in the current project - Reading or searching a known file/path in the local project (use Read or grep directly) - Single-symbol lookups in the local project answerable with one grep - Git operations, running tests, builds, or installs

yamadashy/repomix

npx skills add yamadashy/repomix

giuseppe-trisciuoglio/better-auth

Provides Better Auth integration patterns for NestJS backend and Next.js frontend with Drizzle ORM and PostgreSQL. Use when setting up Better Auth with NestJS backend, integrating Next.js App Router frontend, configuring Drizzle ORM schema, implementing social login (GitHub, Google), adding plugins (2FA, Organization, SSO, Magic Link, Passkey), implementing email/password authentication with session management, or creating protected routes and middleware.

giuseppe-trisciuoglio/developer-kit

npx skills add giuseppe-trisciuoglio/developer-kit

giuseppe-trisciuoglio/nextjs-code-review

Provides comprehensive code review capability for Next.js applications, validates Server Components, Client Components, Server Actions, caching strategies, metadata, API routes, middleware, and performance patterns. Use when reviewing Next.js App Router code changes, before merging pull requests, after implementing new features, or for architecture validation. Triggers on "review Next.js code", "Next.js code review", "check my Next.js app".

giuseppe-trisciuoglio/developer-kit

npx skills add giuseppe-trisciuoglio/developer-kit

pproenca/nuqs

nuqs (type-safe URL query state) best practices for Next.js and other React frameworks. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, limitUrlUpdates, Standard Schema, NuqsAdapter, or Next.js routing with state.

pproenca/dot-skills

npx skills add pproenca/dot-skills

giuseppe-trisciuoglio/nextjs-deployment

Provides comprehensive patterns for deploying Next.js applications to production. Use when configuring Docker containers, setting up GitHub Actions CI/CD pipelines, managing environment variables, implementing preview deployments, or setting up monitoring and logging for Next.js applications. Covers standalone output, multi-stage Docker builds, health checks, OpenTelemetry instrumentation, and production best practices.

giuseppe-trisciuoglio/developer-kit

npx skills add giuseppe-trisciuoglio/developer-kit

giuseppe-trisciuoglio/nextjs-authentication

Provides authentication implementation patterns for Next.js 15+ App Router using Auth.js 5 (NextAuth.js). Use when setting up authentication flows, implementing protected routes, managing sessions in Server Components and Server Actions, configuring OAuth providers, implementing role-based access control, or handling sign-in/sign-out flows in Next.js applications.

giuseppe-trisciuoglio/developer-kit

npx skills add giuseppe-trisciuoglio/developer-kit

giuseppe-trisciuoglio/nextjs-data-fetching

Provides Next.js App Router data fetching patterns including SWR and React Query integration, parallel data fetching, Incremental Static Regeneration (ISR), revalidation strategies, and error boundaries. Use when implementing data fetching in Next.js applications, choosing between server and client fetching, setting up caching strategies, or handling loading and error states.

giuseppe-trisciuoglio/developer-kit

npx skills add giuseppe-trisciuoglio/developer-kit

affaan-m/motion-foundations

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this.

affaan-m/everything-claude-code

npx skills add affaan-m/everything-claude-code

giuseppe-trisciuoglio/typescript-security-review

Provides security review capability for TypeScript/Node.js applications, validates code against XSS, injection, CSRF, JWT/OAuth2 flaws, dependency CVEs, and secrets exposure. Use when performing security audits, before deployment, reviewing authentication/authorization implementations, or ensuring OWASP compliance for Express, NestJS, and Next.js. Triggers on "security review", "check for security issues", "TypeScript security audit".

giuseppe-trisciuoglio/developer-kit

npx skills add giuseppe-trisciuoglio/developer-kit

jezweb/nextjs

Build Next.js 16 apps with App Router, Server Components/Actions, Cache Components ("use cache"), and async route params. Includes proxy.ts and React 19.2. Prevents 25 documented errors. Use when: building Next.js 16 projects, or troubleshooting async params (Promise types), "use cache" directives, parallel route 404s, Turbopack issues, i18n caching, navigation throttling.

jezweb/claude-skills

npx skills add jezweb/claude-skills

giuseppe-trisciuoglio/nextjs-app-router

Provides patterns and code examples for building Next.js 16+ applications with App Router architecture. Use when creating projects with App Router, implementing Server Components and Client Components ("use client"), creating Server Actions for forms, building Route Handlers (route.ts), configuring caching with "use cache" directive (cacheLife, cacheTag), setting up parallel routes (`@slot`) or intercepting routes, migrating to proxy.ts, or working with App Router file conventions (layout.tsx, page.tsx, loading.tsx, error.tsx).

giuseppe-trisciuoglio/developer-kit

npx skills add giuseppe-trisciuoglio/developer-kit

jezweb/zustand-state-management

Build type-safe global state in React with Zustand. Supports TypeScript, persist middleware, devtools, slices pattern, and Next.js SSR with hydration handling. Prevents 6 documented errors. Use when setting up React state, migrating from Redux/Context, or troubleshooting hydration errors, TypeScript inference, infinite render loops, or persist race conditions.

jezweb/claude-skills

npx skills add jezweb/claude-skills

am-will/vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

am-will/codex-skills

npx skills add am-will/codex-skills

giuseppe-trisciuoglio/turborepo-monorepo

Provides comprehensive Turborepo monorepo management guidance for TypeScript/JavaScript projects. Use when creating Turborepo workspaces, configuring turbo.json tasks, setting up Next.js/NestJS apps, managing test pipelines (Vitest/Jest), configuring CI/CD, implementing remote caching, or optimizing build performance in monorepos

giuseppe-trisciuoglio/developer-kit

npx skills add giuseppe-trisciuoglio/developer-kit

am-will/context7

Fetch up-to-date library documentation via Context7 CLI. Use PROACTIVELY when: (1) Working with ANY external library (React, Next.js, Supabase, etc.) (2) User asks about library APIs, patterns, or best practices (3) Implementing features that rely on third-party packages (4) Debugging library-specific issues (5) Need current documentation beyond training data cutoff (6) AND MOST IMPORTANTLY, when you are installing dependencies, libraries, or frameworks you should ALWAYS check the docs to see what the latest versions are. Do not rely on outdated knowledge. Always prefer this over guessing library APIs or using outdated knowledge.

am-will/codex-skills

npx skills add am-will/codex-skills

bytedance/vercel-deploy

Deploy applications and websites to Vercel. Use this skill when the user requests deployment actions such as "Deploy my app", "Deploy this to production", "Create a preview deployment", "Deploy and give me the link", or "Push this live". No authentication required - returns preview URL and claimable deployment link.

bytedance/deer-flow

npx skills add bytedance/deer-flow

aradotso/vinext-vite-nextjs

Vite plugin that reimplements the Next.js API surface for deploying anywhere, including Cloudflare Workers

aradotso/trending-skills

npx skills add aradotso/trending-skills

sickn33/vercel-deployment

Expert knowledge for deploying to Vercel with Next.js

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

onmax/nuxthub

Use when building NuxtHub v0.10.6 applications - provides database (Drizzle ORM with sqlite/postgresql/mysql), KV storage, blob storage, and cache APIs. Covers configuration, schema definition, migrations, multi-cloud deployment (Cloudflare, Vercel), and the new hub:db, hub:kv, hub:blob virtual module imports.

onmax/nuxt-skills

npx skills add onmax/nuxt-skills

nomadamas/korean-privacy-terms

kimlawtech/korean-privacy-terms (Apache-2.0) 업스트림을 경유해 Next.js 프로젝트에 한국 법령(개인정보보호법·약관규제법·전자상거래법) 기반 개인정보처리방침·이용약관·쿠키 배너·동의 모달을 생성하는 thin wrapper 스킬.

nomadamas/k-skill

npx skills add nomadamas/k-skill

openai/vercel-deploy

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

openai/skills

npx skills add openai/skills

upstash/documentation-lookup

This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.

upstash/context7

npx skills add upstash/context7

getsentry/sentry-nextjs-sdk

Full Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure error monitoring, tracing, session replay, logging, profiling, AI monitoring, or crons for Next.js applications. Supports Next.js 13+ with App Router and Pages Router.

getsentry/sentry-for-ai

npx skills add getsentry/sentry-for-ai

wsimmonds/nextjs-app-router-fundamentals

Guide for working with Next.js App Router (Next.js 13+). Use when migrating from Pages Router to App Router, creating layouts, implementing routing, handling metadata, or building Next.js 13+ applications. Activates for App Router migration, layout creation, routing patterns, or Next.js 13+ development tasks.

wsimmonds/claude-nextjs-skills

npx skills add wsimmonds/claude-nextjs-skills

jezweb/tanstack-query

Manage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.

jezweb/claude-skills

npx skills add jezweb/claude-skills

jeffallan/react-expert

Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.

jeffallan/claude-skills

npx skills add jeffallan/claude-skills

cloudflare/migrate-to-vinext

Migrates Next.js projects to vinext (Vite-based Next.js reimplementation). Load when asked to migrate, convert, or switch from Next.js to vinext. Handles compatibility scanning, package replacement, Vite config generation, ESM conversion, and deployment setup (Cloudflare Workers natively, other platforms via Nitro).

cloudflare/vinext

npx skills add cloudflare/vinext

affaan-m/bun-runtime

Bun as runtime, package manager, bundler, and test runner. When to choose Bun vs Node, migration notes, and Vercel support.

affaan-m/everything-claude-code

npx skills add affaan-m/everything-claude-code

affaan-m/nextjs-turbopack

Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.

affaan-m/everything-claude-code

npx skills add affaan-m/everything-claude-code

vercel-labs/nextjs

Next.js App Router expert guidance. Use when building, debugging, or architecting Next.js applications — routing, Server Components, Server Actions, Cache Components, layouts, middleware/proxy, data fetching, rendering strategies, and deployment on Vercel.

vercel-labs/vercel-plugin

npx skills add vercel-labs/vercel-plugin

sickn33/nextjs-supabase-auth

Expert integration of Supabase Auth with Next.js App Router

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

sickn33/nextjs-best-practices

Next.js App Router principles. Server Components, data fetching, routing patterns.

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

Frequently asked questions

Yes. Most skills target App Router conventions. Legacy Pages Router skills are tagged separately when present.

Parcourir également

Tous les thèmes