Next.js

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

此主題中的 83 個技能

您的代理能做什麼

  • 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

此主題中的技能

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

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/next.js

The React Framework

vercel/next.js

npx skills add vercel/next.js

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

sickn33/vercel-deployment

Expert knowledge for deploying to Vercel with Next.js

sickn33/antigravity-awesome-skills

npx skills add sickn33/antigravity-awesome-skills

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

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

github/next-intl-add-language

Add new language to a Next.js + next-intl application

github/awesome-copilot

npx skills add github/awesome-copilot

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

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

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

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

nomadamas/korean-privacy-terms

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

nomadamas/k-skill

npx skills add nomadamas/k-skill

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

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

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

vercel-labs/next-upgrade

Upgrade Next.js to the latest version following official migration guides and codemods

vercel-labs/next-skills

npx skills add vercel-labs/next-skills

vercel-labs/next-cache-components

Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag

vercel-labs/next-skills

npx skills add vercel-labs/next-skills

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

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

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

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

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

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

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

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

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

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

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

clerk/clerk

Clerk authentication router. Use when user asks about adding authentication, setting up Clerk, custom sign-in flows, Swift or native iOS auth, native Android auth, Next.js patterns, React patterns, Vue patterns, Nuxt patterns, Astro patterns, TanStack Start patterns, Expo patterns, React Router patterns, Chrome Extension patterns, organizations, billing, subscriptions, payments, pricing, plans, seat-based pricing, feature entitlements, syncing users, or testing. Automatically routes to the specific skill based on their task.

clerk/skills

npx skills add clerk/skills

clerk/clerk-nextjs-patterns

Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.

clerk/skills

npx skills add clerk/skills

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

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

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

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

kensaurus/cursor-kenji

Curated Cursor AI agent skills, slash commands, MCP configs, subagents & rules for full-stack dev — React 19, Next.js 15, Supabase, Tailwind v4, TypeScript

kensaurus/cursor-kenji

npx skills add kensaurus/cursor-kenji

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

Frequently asked questions

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

也瀏覽

所有主題