Topic

Next.js

App Router, RSC, and Vercel-oriented Next skills

Skills in this topic

#

Skill

Source

8W Activity

Installs

find-skills Official Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is…

vercel-labs/skills

agent-browser Official Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, …

vercel-labs/agent-browser

vercel-react-best-practices Official React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing…

vercel-labs/agent-skills

web-design-guidelines Official Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "aud…

vercel-labs/agent-skills

vercel-composition-patterns Official React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flex…

vercel-labs/agent-skills

prisma-compute Official Prisma Compute deployment and hosting guide. Use whenever the user mentions Prisma Compute, `prisma.compute.ts`, `def…

supabase Official Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, St…

supabase/agent-skills

vercel-react-native-skills Official React Native and Expo best practices for building performant mobile apps. Use when building React Native components, …

vercel-labs/agent-skills

firebase-hosting-basics Official >- Deploys and configures classic Firebase Hosting for static websites, single-page apps (SPAs), and microservices. U…

firebase/agent-skills

firebase-app-hosting-basics Official >- Deploys and manages full-stack web applications (Next.js, Angular) with Server-Side Rendering (SSR) using Firebase…

firebase/agent-skills

deploy-to-vercel Official Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "depl…

vercel-labs/agent-skills

vercel-react-view-transitions Official Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` compon…

vercel-labs/agent-skills

vercel-cli-with-tokens Official Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access …

vercel-labs/agent-skills

vercel-optimize Official Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limit…

vercel-labs/agent-skills

writing-guidelines Official Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audi…

vercel-labs/agent-skills

turborepo Official Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, …

vercel/turborepo

ai-sdk Official Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK funct…

gsap-react Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in Rea…

greensock/gsap-skills

insforge-debug >- Use when diagnosing problems in an InsForge project — reactive failures (SDK error object, HTTP 4xx/5xx, gateway t…

insforge/insforge-skills

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

nextjs-on-cloudflare Official Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext.

cloudflare/skills

nextjs-app-router-patterns Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use whe…

wshobson/agents

sanity-best-practices Official Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, St…

sanity-io/agent-toolkit

neon-ai-gateway Official >- One API and one credential for frontier and open-source LLMs, built into your Neon branch and powered by Databrick…

neondatabase/agent-skills

next-dev-loop Official Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a runnin…

ai-elements Official Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and mo…

vercel/ai-elements

upstash-redis-js Official Work with the @upstash/redis TypeScript/JavaScript SDK, a serverless HTTP-based Redis client for Next.js, Vercel, Clo…

upstash-ratelimit-js Official Rate limiting for serverless and edge apps with the @upstash/ratelimit TypeScript/JavaScript SDK backed by Upstash Re…

next-cache-components-adoption Official Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to ena…

next-cache-components-optimizer Official Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial l…

react Official React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react,…

vercel-labs/json-render

backend-patterns Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express…

frontend-patterns Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. …

building-components Official Guide for building modern, accessible, and composable UI components. Use when building new components, implementing a…

vercel/components.build

app-store-screenshots Use when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS and/…

parthjadhav/app-store-screenshots

core Official Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-re…

vercel-labs/json-render

agentation Add Agentation visual feedback toolbar to a Next.js project

benjitaylor/agentation

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

bun-runtime Bun as runtime, package manager, bundler, and test runner. When to choose Bun vs Node, migration notes, and Vercel su…

documentation-lookup Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, A…

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

github/awesome-copilot

codegen Official Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, tr…

vercel-labs/json-render

find-docs Official >- Retrieves up-to-date documentation, API references, and code examples for any developer technology. Use this skill…

upstash/context7

next Official Next.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and …

vercel-labs/json-render

next-partial-prefetching-adoption Official Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to en…

devtools Official Drop-in inspector panel for any json-render app.

vercel-labs/json-render

directives Official Pre-built custom directives for json-render — formatting, math, string manipulation, and i18n.

vercel-labs/json-render

migrate-to-vinext Official Migrates Next.js projects to vinext (Vite-based Next.js reimplementation).

cloudflare/vinext

nextjs-best-practices Next.js App Router principles. Server Components, data fetching, routing patterns.

sickn33/agentic-awesome-skills

eve Official Build durable backend AI agents with the eve framework. Use when creating, editing, or debugging an eve project — age…

nextjs-supabase-auth Expert integration of Supabase Auth with Next.js App Router

sickn33/agentic-awesome-skills

vercel-cli Official Deploy, manage, inspect, and troubleshoot Vercel projects from the command line. Use for Vercel deployments, Vercel T…

motion-patterns Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit anima…

motion-foundations Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for Re…

motion-advanced Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks…

portless Official Set up and use portless for named local dev server URLs (e.g.

vercel-labs/portless

react-performance React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://g…

mcp Official MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, C…

vercel-labs/json-render

context7-mcp Official This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Act…

upstash/context7

frontend-a11y Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, fo…

next-best-practices Official Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route…

vercel-labs/openreview

nextjs-developer Use when building Next.js 14+ applications with App Router, server components, or server actions.

jeffallan/claude-skills

chat-sdk Official Build multi-platform chat bots with Chat SDK (`chat` npm package). Use when developers want to scaffold a bot with cr…

react-expert Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setu…

jeffallan/claude-skills

migrate-ai-sdk-v6-to-v7 Official Migrate applications from AI SDK 6.x to AI SDK 7.0. Use when upgrading Vercel AI SDK packages, fixing v7 migration er…

motion-ui Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion pattern…

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

mindrally/skills

workflow Official Creates durable, resumable workflows using Vercel's Workflow SDK.

vercel/workflow

nextjs-performance Expert Next.js performance optimization skill covering Core Web Vitals, image/font optimization, caching strategies, …

giuseppe-trisciuoglio/developer-kit

nextjs-cache-architecture Use this skill whenever the user wants to design or implement caching in a Next.js 16+ App Router project — setting u…

mohamed-hossam1/nextjs-skills

review-logging-patterns Review code for logging patterns and suggest evlog adoption. Optionally use @evlog/cli (`evlog init` to wire evlog, `…

web-design-guidelines Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, col…

nexu-io/open-design

gsap-framer-scroll-animation Official >- Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reve…

github/awesome-copilot

nextjs-app-router Provides patterns and code examples for building Next.js 16+ applications with App Router architecture. Use when crea…

giuseppe-trisciuoglio/developer-kit

workflow-init Official Install and configure Vercel Workflow SDK before it exists in node_modules.

vercel/workflow

nextjs-code-review Provides comprehensive code review capability for Next.js applications, validates Server Components, Client Component…

giuseppe-trisciuoglio/developer-kit

nextjs-authentication Provides authentication implementation patterns for Next.js 15+ App Router using Auth.js 5 (NextAuth.js). Use when se…

giuseppe-trisciuoglio/developer-kit

nextjs-data-fetching Provides Next.js App Router data fetching patterns including SWR and React Query integration, parallel data fetching,…

giuseppe-trisciuoglio/developer-kit

nextjs-deployment Provides comprehensive patterns for deploying Next.js applications to production. Use when configuring Docker contain…

giuseppe-trisciuoglio/developer-kit

sentry-nextjs-sdk Official Full Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure …

getsentry/sentry-for-ai

better-auth Provides Better Auth integration patterns for NestJS backend and Next.js frontend with Drizzle ORM and PostgreSQL. Us…

giuseppe-trisciuoglio/developer-kit

animate Animation patterns and best practices for Next.js/React applications. Use this skill when implementing animations, tr…

delphi-ai/animate-skill

fullstack-dev Full-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, crea…

minimax-ai/skills

vercel-deploy Official Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "depl…

ui-design-system React UI component systems with TailwindCSS + Radix + shadcn/ui. Stack: TailwindCSS (styling), Radix UI (primitives),…

samhvw8/dot-claude

streamdown Official >- Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlig…

vercel/streamdown

react-native Official React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-rende…

vercel-labs/json-render

adr-skill Official adr-skill — an installable skill for AI agents, published by vercel/ai.

oauth Official Configure OAuth providers (Google, Apple, Microsoft, Facebook, GitHub, etc.) to work with portless local dev URLs. Us…

vercel-labs/portless

netlify-frameworks Deploy and configure web frameworks on Netlify — build settings and SSR/edge adapters plus local platform emulation a…

netlify/context-and-tools

turso-cloud Turso Cloud — fully managed SQLite-compatible database platform, accessed over the network. Use when connecting an ap…

tursodatabase/agent-skills

netlify-forms Serverless form handling on Netlify-hosted sites — detects HTML forms at deploy time, stores submissions, filters spa…

netlify/context-and-tools

netlify-image-cdn Transform, resize, crop, reformat, and optimize images on demand via Netlify Image CDN's /.netlify/images endpoint. U…

netlify/context-and-tools

react-core @copilotkit/react-core — mount the CopilotKit provider (from @copilotkit/react-core/v2) in a Next.js App Router / Rea…

copilotkit/copilotkit

ai-sdk Official Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK funct…

sentry Sentry error monitoring and performance tracing patterns for Next.js applications.

brianlovin/agent-config

before-and-after Official Add existing screenshots or screen recordings to a GitHub pull request as a before/after or preview block. Use when a…

vercel-labs/before-and-after

gsap-react Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in Rea…

nexu-io/open-design

file-storage Use when working with Tigris file storage - uploading, downloading, deleting, listing files, presigned URLs, client u…

tigrisdata/skills

tigris-image-optimization Use when resizing images, generating thumbnails, serving responsive images, or optimizing image delivery with Tigris …

tigrisdata/skills