--- title: "Skills for Next.js · skilld" canonical_url: "https://skilld.dev/frameworks/nextjs" last_updated: "2026-08-20T06:40:31.337Z" meta: description: "Browse 59 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 59 - [ **/backend-patterns**![affaan-m](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Faffaan-m.png%3Fsize%3D40) Affaan Mustafa · affaan-m/everything-claude-code 270k 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.](https://skilld.dev/gh/affaan-m/everything-claude-code/backend-patterns) - [ **/frontend-patterns**![affaan-m](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Faffaan-m.png%3Fsize%3D40) Affaan Mustafa · affaan-m/everything-claude-code 270k 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.](https://skilld.dev/gh/affaan-m/everything-claude-code/frontend-patterns) - [ **/project-guidelines-example**![affaan-m](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Faffaan-m.png%3Fsize%3D40) Affaan Mustafa · affaan-m/everything-claude-code 270k Project-specific skill template covering architecture, patterns, testing, and deployment guidance.](https://skilld.dev/gh/affaan-m/everything-claude-code/project-guidelines-example) - [ **/frontend-code-review**![langgenius](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Flanggenius.png%3Fsize%3D40) langgenius/dify 158k 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.](https://skilld.dev/gh/langgenius/dify/frontend-code-review) - [ **/update-docs**![vercel](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fvercel.png%3Fsize%3D40) vercel/next.js 143k 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.](https://skilld.dev/gh/vercel/next.js/update-docs) - [ **/ui-ux-pro-max**![nextlevelbuilder](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fnextlevelbuilder.png%3Fsize%3D40) Next Level Builder · nextlevelbuilder/ui-ux-pro-max-skill 132k 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.](https://skilld.dev/gh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max) - [ **/nextjs-app-router-patterns**![wshobson](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fwshobson.png%3Fsize%3D40) Seth Hobson · wshobson/agents 40k 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.](https://skilld.dev/gh/wshobson/agents/nextjs-app-router-patterns) - [ **/gsap-framer-scroll-animation**![github](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fgithub.png%3Fsize%3D40) github/awesome-copilot 40k 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.](https://skilld.dev/gh/github/awesome-copilot/gsap-framer-scroll-animation) - [ **/next-intl-add-language**![github](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fgithub.png%3Fsize%3D40) github/awesome-copilot 40k Add new language to a Next.js + next-intl application](https://skilld.dev/gh/github/awesome-copilot/next-intl-add-language) - [ **/nextjs-app-router-patterns**![davila7](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fdavila7.png%3Fsize%3D40) Daniel Avila · davila7/claude-code-templates 32k Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.](https://skilld.dev/gh/davila7/claude-code-templates/nextjs-app-router-patterns) - [ **/nextjs-best-practices**![davila7](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fdavila7.png%3Fsize%3D40) Daniel Avila · davila7/claude-code-templates 32k Next.js App Router principles. Server Components, data fetching, routing patterns.](https://skilld.dev/gh/davila7/claude-code-templates/nextjs-best-practices) - [ **/nextjs-supabase-auth**![davila7](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fdavila7.png%3Fsize%3D40) Daniel Avila · davila7/claude-code-templates 32k Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.](https://skilld.dev/gh/davila7/claude-code-templates/nextjs-supabase-auth) - [ **/react-best-practices**![vercel-labs](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fvercel-labs.png%3Fsize%3D40) Vercel Labs · vercel-labs/agent-skills 32k 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.](https://skilld.dev/gh/vercel-labs/agent-skills/react-best-practices) - [ **/nextjs-developer**![jeffallan](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fjeffallan.png%3Fsize%3D40) jeffallan/claude-skills 12k 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.](https://skilld.dev/gh/jeffallan/claude-skills/nextjs-developer) - [ **/migrate-to-vinext**![cloudflare](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fcloudflare.png%3Fsize%3D40) cloudflare/vinext 9.1k 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).](https://skilld.dev/gh/cloudflare/vinext) - [ **/agentation**![benjitaylor](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fbenjitaylor.png%3Fsize%3D40) Benji Taylor · benjitaylor/agentation 4.8k Add Agentation visual feedback toolbar to a Next.js project](https://skilld.dev/gh/benjitaylor/agentation/agentation) - [ **/nextjs-on-cloudflare**![cloudflare](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fcloudflare.png%3Fsize%3D40) cloudflare/skills 3k 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.](https://skilld.dev/gh/cloudflare/skills/nextjs-on-cloudflare) - [ **/ui-ux-pro-max**![likaia](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Flikaia.png%3Fsize%3D40) likai · likaia/nginxpulse 2.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.](https://skilld.dev/gh/likaia/nginxpulse) - [ **/supabase**![supabase](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fsupabase.png%3Fsize%3D40) supabase/agent-skills 2.7k 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).](https://skilld.dev/gh/supabase/agent-skills/supabase) - [ **/vercel-react-best-practices**![am-will](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fam-will.png%3Fsize%3D40) am.will · am-will/codex-skills 1k 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.](https://skilld.dev/gh/am-will/codex-skills/vercel-react-best-practices) - [ **/agent-ui**![inference-shell](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Finference-shell.png%3Fsize%3D40) inference-shell/skills 757 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](https://skilld.dev/gh/inference-shell/skills/agent-ui) - [ **/javascript-sdk**![inference-shell](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Finference-shell.png%3Fsize%3D40) inference-shell/skills 757 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](https://skilld.dev/gh/inference-shell/skills/javascript-sdk) - [ **/tools-ui**![inference-shell](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Finference-shell.png%3Fsize%3D40) inference-shell/skills 757 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](https://skilld.dev/gh/inference-shell/skills/tools-ui) - [ **/widgets-ui**![inference-shell](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Finference-shell.png%3Fsize%3D40) inference-shell/skills 757 Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets, dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui](https://skilld.dev/gh/inference-shell/skills/widgets-ui) ## Often appears with - TypeScript 16 Checked GitHub 1 hour ago