--- title: "Skills for Next.js · skilld" canonical_url: "https://skilld.dev/frameworks/nextjs" last_updated: "2026-08-20T06:40:31.337Z" meta: description: "Browse 66 Next.js agent skills from 8+ maintainers. Every result links to source." "og:description": "Agent skills for the Next.js App Router, Server Components, caching, and routing." "og:title": "Skills for Next.js" --- ` # Skills for Next.js Agent skills for the Next.js App Router, Server Components, caching, and routing. Every result links to its SKILL.md source. [nextjs.org](https://nextjs.org) [All skills](https://skilld.dev/skills) ## **Next.js skills ** Showing 24 of 66 - [ **/backend-patterns**![affaan-m](https://github.com/affaan-m.png?size=40) Affaan Mustafa · affaan-m/everything-claude-code255k Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js, Express, or Next.js API routes and their data access. /backend-patterns by affaan-m](https://skilld.dev/gh/affaan-m/everything-claude-code/backend-patterns) - [ **/frontend-patterns**![affaan-m](https://github.com/affaan-m.png?size=40) Affaan Mustafa · affaan-m/everything-claude-code255k Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance. /frontend-patterns by affaan-m](https://skilld.dev/gh/affaan-m/everything-claude-code/frontend-patterns) - [ **/project-guidelines-example**![affaan-m](https://github.com/affaan-m.png?size=40) Affaan Mustafa · affaan-m/everything-claude-code255k Project-specific skill template covering architecture, patterns, testing, and deployment guidance. /project-guidelines-example by affaan-m](https://skilld.dev/gh/affaan-m/everything-claude-code/project-guidelines-example) - [ **/frontend-code-review**![langgenius](https://github.com/langgenius.png?size=40) langgenius/dify155k Use only when the user explicitly requests a review or audit of frontend code under \`web/\` or \`packages/dify-ui/\`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code. /frontend-code-review by langgenius](https://skilld.dev/gh/langgenius/dify/frontend-code-review) - [ **/update-docs**![vercel](https://github.com/vercel.png?size=40) vercel/next.js142k This skill should be used when the user asks to "update documentation for my changes", "check docs for this PR", "what docs need updating", "sync docs with code", "scaffold docs for this feature", "document this feature", "review docs completeness", "add docs for this change", "what documentation is affected", "docs impact", or mentions "docs/", "docs/01-app", "docs/02-pages", "MDX", "documentation update", "API reference", ".mdx files". Provides guided workflow for updating Next.js documentation based on code changes. /update-docs by vercel](https://skilld.dev/gh/vercel/next.js/update-docs) - [ **/fullstack-developer**![shubhamsaboo](https://github.com/shubhamsaboo.png?size=40) Shubham Saboo · shubhamsaboo/awesome-llm-apps137k Modern web development expertise covering React, Node.js, databases, and full-stack architecture. Use when: building web applications, developing APIs, creating frontends, setting up databases, deploying web apps, or when user mentions React, Next.js, Express, REST API, GraphQL, MongoDB, PostgreSQL, or full-stack development. /fullstack-developer by shubhamsaboo](https://skilld.dev/gh/shubhamsaboo/awesome-llm-apps/fullstack-developer) - [ **/ui-ux-pro-max**![nextlevelbuilder](https://github.com/nextlevelbuilder.png?size=40) Next Level Builder · nextlevelbuilder/ui-ux-pro-max-skill126k UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks. /ui-ux-pro-max by nextlevelbuilder](https://skilld.dev/gh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max) - [ **/nextjs-app-router-patterns**![wshobson](https://github.com/wshobson.png?size=40) Seth Hobson · wshobson/agents40k 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. /nextjs-app-router-patterns by wshobson](https://skilld.dev/gh/wshobson/agents/nextjs-app-router-patterns) - [ **/gsap-framer-scroll-animation**![github](https://github.com/github.png?size=40) github/awesome-copilot39k Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish. /gsap-framer-scroll-animation by github](https://skilld.dev/gh/github/awesome-copilot/gsap-framer-scroll-animation) - [ **/next-intl-add-language**![github](https://github.com/github.png?size=40) github/awesome-copilot39k Add new language to a Next.js + next-intl application /next-intl-add-language by github](https://skilld.dev/gh/github/awesome-copilot/next-intl-add-language) - [ **/react-best-practices**![vercel-labs](https://github.com/vercel-labs.png?size=40) Vercel Labs · vercel-labs/agent-skills31k 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. /react-best-practices by vercel-labs](https://skilld.dev/gh/vercel-labs/agent-skills/react-best-practices) - [ **/nextjs-app-router-patterns**![davila7](https://github.com/davila7.png?size=40) Daniel Avila · davila7/claude-code-templates31k Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development. /nextjs-app-router-patterns by davila7](https://skilld.dev/gh/davila7/claude-code-templates/nextjs-app-router-patterns) - [ **/nextjs-best-practices**![davila7](https://github.com/davila7.png?size=40) Daniel Avila · davila7/claude-code-templates31k Next.js App Router principles. Server Components, data fetching, routing patterns. /nextjs-best-practices by davila7](https://skilld.dev/gh/davila7/claude-code-templates/nextjs-best-practices) - [ **/nextjs-supabase-auth**![davila7](https://github.com/davila7.png?size=40) Daniel Avila · davila7/claude-code-templates31k Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route. /nextjs-supabase-auth by davila7](https://skilld.dev/gh/davila7/claude-code-templates/nextjs-supabase-auth) - [ **/nextjs-developer**![jeffallan](https://github.com/jeffallan.png?size=40) jeffallan/claude-skills11k 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 boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance. /nextjs-developer by jeffallan](https://skilld.dev/gh/jeffallan/claude-skills/nextjs-developer) - [ **/migrate-to-vinext**![cloudflare](https://github.com/cloudflare.png?size=40) cloudflare/vinext8.8k 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). /migrate-to-vinext by cloudflare](https://skilld.dev/gh/cloudflare/vinext) - [ **/agentation**![benjitaylor](https://github.com/benjitaylor.png?size=40) Benji Taylor · benjitaylor/agentation4.6k Add Agentation visual feedback toolbar to a Next.js project /agentation by benjitaylor](https://skilld.dev/gh/benjitaylor/agentation/agentation) - [ **/nextjs-on-cloudflare**![cloudflare](https://github.com/cloudflare.png?size=40) cloudflare/skills2.8k 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, or deployment, install vinext's upstream skills with \`npx skills add cloudflare/vinext\` if missing, then read and follow the applicable skill and docs. /nextjs-on-cloudflare by cloudflare](https://skilld.dev/gh/cloudflare/skills/nextjs-on-cloudflare) - [ **/ui-ux-pro-max**![likaia](https://github.com/likaia.png?size=40) likai · likaia/nginxpulse2.7k UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. /ui-ux-pro-max by likaia](https://skilld.dev/gh/likaia/nginxpulse) - [ **/supabase**![supabase](https://github.com/supabase.png?size=40) supabase/agent-skills2.6k 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, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg\_graphql, pg\_cron, pg\_vector); debugging and troubleshooting errors or unexpected behavior on Supabase projects (HTTP errors, Postgres errors, RLS surprises, permission denied, schema cache issues, timeouts, Edge Function crashes, Realtime drops, Storage failures) and reading or querying logs (Logs Explorer, ClickHouse). /supabase by supabase](https://skilld.dev/gh/supabase/agent-skills/supabase) - [ **/vercel-react-best-practices**![am-will](https://github.com/am-will.png?size=40) am.will · am-will/codex-skills1k 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. /vercel-react-best-practices by am-will](https://skilld.dev/gh/am-will/codex-skills/vercel-react-best-practices) - [ **/agent-ui**![inference-shell](https://github.com/inference-shell.png?size=40) inference-shell/skills730 Batteries-included agent component for React/Next.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent, agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop /agent-ui by inference-shell](https://skilld.dev/gh/inference-shell/skills/agent-ui) - [ **/javascript-sdk**![inference-shell](https://github.com/inference-shell.png?size=40) inference-shell/skills730 JavaScript/TypeScript SDK for inference.sh - run AI apps, build agents, integrate with all models. Package: @inferencesh/sdk (npm install). Full TypeScript support, streaming, file uploads. Build agents with template or ad-hoc patterns, tool builder API, skills, human approval. Use for: JavaScript integration, TypeScript, Node.js, React, Next.js, frontend apps. Triggers: javascript sdk, typescript sdk, npm install, node.js api, js client, react ai, next.js ai, frontend sdk, @inferencesh/sdk, typescript agent, browser sdk, js integration /javascript-sdk by inference-shell](https://skilld.dev/gh/inference-shell/skills/javascript-sdk) - [ **/tools-ui**![inference-shell](https://github.com/inference-shell.png?size=40) inference-shell/skills730 Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending /tools-ui by inference-shell](https://skilld.dev/gh/inference-shell/skills/tools-ui) ## Often appears with - React 25 - TypeScript 19 - Vue 6 Checked GitHub just now