SkillFoxx

Type a name, a task or a service

Next.js skills

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginEditors’ pickMedium risk

vercel/next.jsAuthor: Vercel

Install

/plugin marketplace add vercel/next.js
/plugin install nextjs@nextjs

Marketplace and plugin names come from .claude-plugin/marketplace.json.

This is third-party code. Review the repository files before installing.

What it does

The nextjs plugin packages the skills from the skills folder of the Next.js repo. next-cache-components-adoption and next-cache-components-optimizer walk the agent through enabling Cache Components and fixing blocking routes, including the cache-components-instant-false codemod. next-partial-prefetching-adoption and next-partial-prefetching-optimizer do the same for Partial Prefetching. next-dev-loop verifies an edit in the running app by cross-checking the /_next/mcp endpoint against a browser driven by agent-browser.

Who it is for. For frontend developers moving a Next.js app to the new caching and prefetching model.

Good fit when

  • You need to enable cacheComponents and get the build passing
  • You want to adopt Partial Prefetching in the App Router
  • You need to confirm an edit works in next dev, not just compiles

Not a fit when

  • The project uses the Pages Router without an app folder
  • Next.js is below 16.3 and cannot be upgraded yet

Example request

Enable Cache Components in this project and fix the routes that block the build

Limitations

The skills need Next.js 16.3+ with Turbopack and the App Router; next-dev-loop also needs agent-browser 0.31.1+. The app must run locally with a working environment. The repo README does not mention the plugin; install commands follow from the .claude-plugin/marketplace.json manifest.

How to disable. Uninstall the nextjs plugin via /plugin.

Security check

  • Edits project code and runs codemods
  • Starts a dev server and drives a browser

README in short

The main README covers the framework and docs and does not mention skills. The nextjs marketplace is declared in .claude-plugin/marketplace.json and points to the skills folder with a plugin.json holding the description, MIT license and keywords. Each SKILL.md starts with version and project requirements and then lays out the workflow.

FAQ

Are these the skills in .agents/skills?

No. .agents/skills holds instructions for Next.js contributors; the plugin ships only the user-facing skills from the skills folder.

Will the skill change my code?

Yes, migration skills edit files and run codemods, so work on a separate branch.

Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium risk123.8K
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk68K
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.2K
Editors’ pick

An MCP server that gives the agent simplified Figma layout data from a link so it can build the screen more accurately than from a screenshot

MCP serverMedium risk15.9K