Claude skills for Next.js

50 of 193 public skills on GitHub that mention Next.js: skills named for it first, then by stars, at most 3 from one repository. Each links to its folder; copy it into ~/.claude/skills/ to use it.

  1. nextjs app router patterns

    Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

    wshobson/agents★ 42kMITFolder: nextjs-app-router-patterns

  2. nextjs developer

    Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx/error.tsx…

    Jeffallan/claude-skills★ 12kMITFolder: nextjs-developer

  3. hunt nextjs

    Hunt Next.js specific vulnerabilities — Server Actions arbitrary function execution, Middleware auth bypass via static asset paths, ISR cache poisoning, Image Optimization SSRF (/_next/image), RSC payload leakage, getServerSideProps injection, source map…

    elementalsouls/Claude-BugHunter★ 5.3kMITFolder: hunt-nextjs

  4. nextjs on cloudflare

    Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration,…

    fcakyon/claude-codex-settings★ 1.2kApache-2.0Folder: nextjs-on-cloudflare

  5. nextjs supabase vercel

    Set up the current empty folder with the AI App Starter, so the agent builds a Next.js, Supabase and Vercel app with the owner step by step, from idea to launch.

    TechNomadCode/AI-Product-Development-Toolkit★ 1kMITFolder: nextjs-supabase-vercel

  6. 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,…

    giuseppe-trisciuoglio/developer-kit★ 366MITFolder: nextjs-app-router

  7. 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…

    giuseppe-trisciuoglio/developer-kit★ 366MITFolder: nextjs-authentication

  8. 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…

    giuseppe-trisciuoglio/developer-kit★ 366MITFolder: nextjs-code-review

  9. nextjs seo booster

    A complete SEO toolkit for Next.js applications, including structured data (Schema.org), dynamic sitemap generation, and meta tags.

    kennyzir/7deer_skills★ 331MITFolder: nextjs-seo-booster

  10. nextjs seo foundations

    Next.js 14 应用的生产级 SEO 工程化规范 (Metadata, Schema, Performance)

    kennyzir/7deer_skills★ 331MITFolder: nextjs-seo-foundations

  11. nextjs react redux typescript cursor rules

    Comprehensive Next.js, React, Redux, and TypeScript development guidelines covering SOLID principles, component architecture, and best practices.

    Mindrally/skills★ 288Apache-2.0Folder: nextjs-react-redux-typescript-cursor-rules

  12. nextjs react typescript

    Expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind

    Mindrally/skills★ 288Apache-2.0Folder: nextjs-react-typescript

  13. nextjs typescript tailwindcss supabase

    Full-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building production-ready web applications.

    Mindrally/skills★ 288Apache-2.0Folder: nextjs-typescript-tailwindcss-supabase

  14. bun nextjs

    This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.

    secondsky/claude-skills★ 240MITFolder: bun-nextjs

  15. cloudflare nextjs

    Deploy Next.js to Cloudflare Workers via the OpenNext adapter (@opennextjs/cloudflare). Use for SSR/ISR/SSG/App or Pages Router, getCloudflareContext, bindings (D1/R2/KV/AI/Hyperdrive), caching tiers, skew protection, multi-worker, custom worker, env vars,…

    secondsky/claude-skills★ 240MITFolder: cloudflare-nextjs

  16. nextjs

    Next.js 16 with App Router, Server Components, Server Actions, Cache Components. Use for React 19.2 apps, SSR, or encountering async params, proxy.ts migration, use cache errors.

    secondsky/claude-skills★ 240MITFolder: nextjs

  17. scaffold nextjs

    Scaffolds a Next.js turborepo with Blode UI, icons, Ultracite (oxlint/shadcn), workspace hooks, and GitHub/Vercel setup. Use when asked to \"create a Next.js project\", \"bootstrap a turborepo\", or \"start a new web app\".

    mblode/agent-skills★ 172MITFolder: scaffold-nextjs

  18. nextjs app router routing

    Implement App Router trees and navigation.

    TheGoat395/Codex-Skills★ 135MITFolder: nextjs-app-router-routing

  19. nextjs server client boundaries

    Set use client and Server Function boundaries.

    TheGoat395/Codex-Skills★ 135MITFolder: nextjs-server-client-boundaries

  20. nextjs site architecture

    Coordinate the Next.js foundation and ownership.

    TheGoat395/Codex-Skills★ 135MITFolder: nextjs-site-architecture

  21. nextjs app router expert

    Expert guide for Next.js 15 App Router: RSC, React 19 Server Actions, Async Request APIs, 'use cache', PPR, Streaming, and Caching strategies / Panduan ahli untuk Next.js 15 App Router.

    roedyrustam/vibes-plug★ 116MITFolder: nextjs-app-router-expert

  22. nextjs ops

    Next.js App Router operations - the server/client boundary, the two caching models, Server Actions security, streaming, proxy.ts and deployment. Use for: next.js, nextjs, app router, use cache, cacheComponents, Cache Components, cacheLife, cacheTag,…

    0xDarkMatter/claude-mods★ 78MITFolder: nextjs-ops

  23. nextjs patterns

    Comprehensive Next.js development patterns for App Router, Server Components, TypeScript, and Tailwind CSS. Covers foundational principles, data fetching, routing, performance, and an 8-phase development workflow. Also includes Server Actions and Metadata…

    tranhieutt/software_development_department★ 74MITFolder: nextjs-patterns

  24. stitch nextjs components

    Converts a Stitch screen, a local HTML file, or a URL into production-ready Next.js 15 App Router components — Server vs Client split, dark mode via CSS variables, TypeScript strict, ARIA, and responsive mobile-first layout. Only the Stitch route needs an…

    gabelul/stitch-kit★ 47Apache-2.0Folder: stitch-nextjs-components

  25. new feature nextjs

    Pre-flight checklist for adding a new feature to a Next.js 15 + TypeScript app. Load when creating a new page, route, server action, or feature module. Forces feature-driven colocation, RSC-first thinking, and the typed cache-tag pattern from line one —…

    yerdaulet-damir/vibe-coding-rules★ 34MITFolder: new-feature-nextjs

  26. nextjs 16

    Use when building Next.js 16 apps — Turbopack, App Router, Cache Components, proxy.ts, v15 migration. Not for stack scaffolding (nextjs-stack) or React SPA (react-expert).

    Fusengine/claude-plugins★ 34MITFolder: nextjs-16

  27. nextjs server components

    Use when deciding Server vs Client Component boundaries in Next.js 16, fetching data directly in components, or streaming with Suspense.

    Fusengine/claude-plugins★ 34MITFolder: nextjs-server-components

  28. nextjs i18n

    Use when implementing i18n in Next.js 16 — next-intl or DIY dictionaries, locale routing, language switch, or formatters.

    Fusengine/claude-plugins★ 34MITFolder: nextjs-i18n

  29. nextjs senior dev

    Senior Next.js 15+/16 Engineer skill for App Router. Use when scaffolding production apps, enforcing RSC patterns, auditing codebases, or optimizing performance.

    georgekhananaev/claude-skills-vault★ 30MITFolder: nextjs-senior-dev

  30. typescript react nextjs patterns

    Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state…

    leejpsd/typescript-react-nextjs-patterns★ 22MITFolder: typescript-react-nextjs-patterns

  31. fec nextjs project standard

    用于创建或审查 Next.js 14+ App Router 项目、文件路由、layout、服务端/客户端组件边界、SSR/SSG/ISR、streaming、metadata、middleware、server actions 或 Next 特定数据获取。通用客户端 React 组件架构另按项目 React 约定处理;中文触发词包括 Next.js、App Router。

    bovinphang/frontend-craft★ 22MITFolder: fec-nextjs-project-standard

  32. nextjs development

    Next.js 16.2.4 with TypeScript — App Router, Server Components, use cache directive, Turbopack dev, Server Actions, ISR, SSR, SSG, MCP devtools, metadata API, route handlers, instrumentation.

    bg-szy/TOP-SKILLS★ 6No licence statedFolder: nextjs-development

  33. nextjs i18n seo

    Audit/fix Next.js i18n SEO for the App Router — crawlability, 307→301 redirects, locale URLs, sitemap, hreflang. Use when diagnosing lost PageRank or i18n redirect bugs in middleware.

    augchan42/inkstone★ 5MITFolder: nextjs-i18n-seo

  34. 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,…

    CherryHQ/cherry-studio★ 53kAGPL-3.0Folder: vercel-react-best-practices

  35. 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…

    Jeffallan/claude-skills★ 12kMITFolder: react-expert

  36. near dapp

    Build NEAR Protocol dApps. Use for: (1) creating new NEAR dApps with `create-near-app` (Vite+React, Next.js), (2) adding NEAR wallet connection to existing apps with `@hot-labs/near-connect` and `near-connect-hooks`, (3) building frontend UI for NEAR smart…

    internet-court/internet-court-skill★ 7kLicence: see repoFolder: near-dapp

  37. playwright core

    Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, assertions, fixtures, network mocking, auth flows, debugging, and framework recipes for React, Next.js, Vue, and Angular. TypeScript…

    zebbern/claude-code-guide★ 4.7kMITFolder: core

  38. playwright skill

    Battle-tested Playwright patterns for E2E, API, component, visual, accessibility, and security testing. Covers locators, fixtures, POM, network mocking, auth flows, debugging, CI/CD (GitHub Actions, GitLab, CircleCI, Azure, Jenkins), framework recipes…

    zebbern/claude-code-guide★ 4.7kMITFolder: playwright

  39. design code

    Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS). Use when the user…

    plugin87/ux-ui-agent-skills★ 3.1kMITFolder: design-code

  40. senior frontend

    Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing…

    composio-community/awesome-claude-plugins★ 2kNo licence statedFolder: senior-frontend

  41. oma frontend

    Implement or modify web UI in React, Next.js, or Angular. Use for components, pages, styles, forms, and frontend state or data flows.

    first-fluke/oh-my-agent★ 1.4kMITFolder: oma-frontend

  42. supabase

    Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro,…

    fcakyon/claude-codex-settings★ 1.2kApache-2.0Folder: supabase

  43. vercel deployments

    Deploy frontend and full-stack apps on Vercel with previews, edge functions, environment promotion, and production guardrails. Use when shipping Next.js, SvelteKit, or static sites with zero-config CI/CD.

    BagelHole/DevOps-Security-Agent-Skills★ 1.2kMITFolder: vercel-deployments

  44. awwwards

    Build award-caliber websites from a one-line prompt such as "make me a portfolio, my name is Ana". Uses the bar of sites that win Awwwards Site of the Day as a quality standard. Covers concept, art direction, typography, motion choreography, WebGL, page…

    juliobsz/skills★ 1kMITFolder: awwwards

  45. saas scaffolder

    Generate SaaS boilerplate with auth, database schemas, Stripe billing, multi-tenancy, API routes, and dashboard UI on a Next.js/TypeScript/Tailwind stack. Use when starting a new SaaS product, subscription app, or multi-tenant platform.

    borghei/Claude-Skills★ 1kLicence: see repoFolder: saas-scaffolder

  46. senior fullstack

    Fullstack development toolkit with project scaffolding for Next.js/FastAPI/MERN/Django stacks and code quality analysis. Use when scaffolding new projects, analyzing codebase quality, or implementing fullstack architecture patterns.

    borghei/Claude-Skills★ 1kLicence: see repoFolder: senior-fullstack

  47. senior qa

    Testing for React/Next.js with Jest, React Testing Library, and Playwright. Use when generating tests, writing unit tests, analyzing coverage, scaffolding E2E tests, configuring Jest, or improving test quality.

    borghei/Claude-Skills★ 1kLicence: see repoFolder: senior-qa

  48. slide deck

    When you want to draft, update, convert, or export a slide deck for a React/Next.js slide system (${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/). Writes TypeScript Slide[] arrays using your primitives (Eyebrow, Heading, Accent, Body,…

    coreyhaines31/makerskills★ 876MITFolder: slide-deck

  49. toolify

    When you want to integrate an external tool, API, MCP server, or service into a project — the wizard walks you through auth, config, env vars, client wrapper code, example usage, and an optional smoke test. Scoped to Next.js and Rails projects. Interactive…

    coreyhaines31/makerskills★ 876MITFolder: toolify

  50. privacy kr

    한국 서비스용 처리방침·이용약관·회원가입 동의 모달·쿠키 배너 자동 생성. 개인정보보호법 §30, 2025.4.21 작성지침, 2026.3 개정법, 공정위 전자상거래 표준약관 10023호 반영. Next.js 13~16 프로젝트 대상.

    kimlawtech/korean-privacy-terms★ 592Apache-2.0Folder: privacy-kr

Claude skills for Next.js: common questions

What's the best Claude skill for Next.js?

There are 193 of them, spread over 84 repositories on GitHub. Named for it and most starred: nextjs app router patterns (wshobson/agents, ★ 42k), nextjs developer (Jeffallan/claude-skills, ★ 12k) and hunt nextjs (elementalsouls/Claude-BugHunter, ★ 5.3k). Stars rate the repository a skill sits in, not the skill.

How do I install a Claude skill for Next.js?

For Next.js, take the nextjs-app-router-patterns folder from wshobson/agents (the folder that holds SKILL.md) into ~/.claude/skills/ to use it in every Claude Code project, or into .claude/skills/ for one project. In the Claude apps, zip that folder and upload it as a custom skill in settings.

What should I check before installing a Next.js skill?

A Next.js skill is instructions Claude follows, and it can bundle scripts Claude runs, so read SKILL.md and every script first: for nextjs app router patterns, that is everything in the nextjs-app-router-patterns folder. 2 of the 50 here, nextjs development and nextjs i18n seo, come from repositories with under 10 stars, so few people have looked at them. Red flags: piping a download into a shell, sending files to a URL, and instructions to hide what it does from you.

Are these Next.js skills maintained?

123 of the 193 Next.js skills sit in repositories that changed in the 30 days before 31 Oct 2026.

Are these Next.js skills official?

No. None of the 193 Next.js skills comes from Anthropic's own skills repository, so all of them are community-made across 84 repositories.

Can I use these Next.js skills at work?

Of the 50 Next.js skills listed here, 43 sit in repositories under an open licence such as MIT or Apache 2.0, and 2, such as nextjs development and senior frontend, state no licence at all, which legally means you may not reuse them. Check the licence file before you copy one into company work.

More topics: every “Claude skills for…” page.