vercel-labs/next-skills
4 skills159k installs3.7k starsGitHub
Install
npx skills add https://github.com/vercel-labs/next-skillsSkills in this repo
1Next Best PracticesNext Best Practices is a Vercel Labs agent skill that encodes how to write and review modern Next.js App Router projects without tripping framework-specific footguns. It is aimed at solo and indie builders who ship SaaS or marketing sites with React Server Components and want the agent to internalize conventions instead of improvising from generic React advice. Use it whenever you are scaffolding routes, refactoring data fetching, or reviewing a PR that touches layouts, loaders, or server actions. The skill points to focused reference docs for structure, RSC boundaries, async APIs, runtime choice, directives, built-in functions, caching, metadata, errors, route handlers, images, fonts, and bundling—so answers stay aligned with current Next releases. It is not a deploy or hosting skill; it keeps implementation and review consistent so you spend less time fixing serializability bugs, broken async params, and metadata regressions before launch.102kinstalls2Next Cache ComponentsNext Cache Components is a Vercel Labs skill for Next.js 16+ that formalizes how solo builders split a page into prerendered static chrome, selectively cached async sections, and truly dynamic islands wrapped in Suspense. Partial Prerendering stops you from choosing between fully static and fully dynamic routes when most marketing or catalog UI is stable but a slice of data must stay fresh per user or request. The skill walks through enabling cacheComponents in configuration, applying the use cache directive with cacheLife tiers, and tagging cached segments for targeted invalidation. It fits indie SaaS and content sites where TTFB and hosting cost matter and you already deploy on the Next App Router stack. Reach for it while implementing layouts and data components, then reuse the same mental model when tuning performance before launch.34kinstalls3Next UpgradeNext Upgrade is a Vercel Labs agent skill that upgrades a Next.js codebase to the latest supported version by combining detected package.json versions, live official migration documentation, and codemods before bumping dependencies. Solo builders shipping App Router SaaS or marketing sites use it when React and Next peer ranges drift, async Request APIs change, or a security advisory forces a floor version. The workflow orders detect → fetch guides → plan path → codemod → npm install next@latest with related packages, reducing guesswork on breaking changes across 14–16 era migrations. It expects network access to nextjs.org docs and shell access for npx codemods. Not a substitute for full QA—pair with your test suite and staging deploy after the upgrade lands.23kinstalls4Next Best PracticeNext Best Practice is a reference skill from Vercel Labs that consolidates how solo builders should write and review modern Next.js applications using current App Router conventions. It is meant to be applied whenever you author or audit code—not invoked as a standalone user command—so it functions like an always-on linter for architectural mistakes. Topics span project structure and special files, invalid React Server Component patterns, async request APIs in Next.js 15+, runtime defaults, caching directives, and the server/client function surface area including generateStaticParams and metadata. It also points to focused docs for bundling, fonts, images, and error boundaries so agents do not hallucinate deprecated patterns. Use it during build while scaffolding features, and again in ship when reviewing PRs for RSC leaks or async migration gaps. It assumes a Next.js codebase rather than teaching React from scratch.2installs