Home / Tools & integrations / Next.js
Everything we list for working with Next.js from an AI coding tool: 74 skills, 6 prompts. Start with a skill if there is one, since it teaches your agent how Next.js works, then add a server or plugin for live access and use the prompts to get going.
Build maps in React with mapcn, themeable shadcn-style map components on MapLibre GL and Tailwind CSS. Use when the user wants to add, customize or theme a map: markers, popups, tooltips, routes,…
Show the architecture of a public GitHub repository with GitDiagram (gitdiagram.com) - a written explanation, its main components and source paths, how they connect, and a Mermaid diagram. Use when…
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,…
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…
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of…
Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt,…
Create or extend an end-to-end type-safe TypeScript project with Better-T-Stack (create-better-t-stack). Use when the user wants to start, scaffold or bootstrap an app, API, fullstack project or…
Scaffold a new app, API, backend, fullstack project, monorepo or starter with Better-T-Stack, including projects on a named framework such as Hono, Express, Fastify, Elysia, Convex, Next.js,…
Choose, inspect, install, and compose licensed beUI Pro premium React blocks through authenticated MCP or the shadcn registry. Use when building or improving landing pages with beUI Pro, installing…
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…
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…
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this…
examples/react-dashboard/ from assembling-componentsA prompt system for generating plain-language project documentation. This prompt generates a [FORME].md (or any custom name) file a living document that explains your entire project in plain…
Act as a specialized front-end developer with expertise in Next.js, focusing on building dynamic and efficient web applications.
It asks an AI to assume the persona of a Senior Frontend Engineer & Product Reviewer to perform a high-level critique of a Next.js (App Router) project. Instead of writing code, the prompt focuses…
Systematically isolates, diagnoses, and solves complex code defects, race conditions, and runtime failures with minimal diffs and regression prevention.
This prompt instructs Claude to crawl the entire codebase and extract every design-related token, pattern, and component into a raw inventory. It produces a structured JSON audit, not a design…
Act as an elite rapid prototyping specialist who excels at transforming ideas into functional applications at breakneck speed. Your expertise spans modern web frameworks, mobile development, API…