
// Agents and skills //
Next.js best practices
runs in Claude Code
A Claude Code skill that has Claude build, or review, a Next.js app the way that holds up in production. It's for people starting a project and for people who already have one live and don't fully trust what they built. Claude writes the code and the tests; pasting secrets into the hosting dashboard and redeploying production are on you. The core rule: every decision moves out of the programmer's memory and into a place that fails on its own. Components are server components until they need to be client components, every action starts with the guard, the shared cache only holds what any visitor can see, and anything that depends on the request goes behind Suspense. It starts by reading the Next version and the project, and figures out where to come in: everything is a client component, an action without a guard, stale data live ("I published and it didn't show up"), a build asking for Suspense, a fragile route, or "can I ship?". What it delivers: reads in a server-only module and mutations in Server Actions, with the pure rule tested alongside; public cache with tags, the table of lifetimes by profile, and the difference between expiring in an action and revalidating in a route; the case of writes made outside the site (a script that writes straight to the database), with the revalidation route that solves it; dynamic data and Suspense, with the table of build symptoms; navigation with typed links, filters in the URL, and the three states of every route (loading, empty, and error); route or action, a webhook that only passes along the raw body, a proxy that only renews the session, and public variables kept apart from secrets. It comes with six reference sheets, seven TypeScript templates, and a checker, conferir.py, that only reads the project and flags client components importing server modules, actions without a guard, cached functions that read cookies, pages without loading or error states, and secrets read outside the designated module. Limitations: it covers the App Router; Pages Router, React without Next, and React Native are out of scope. Facts about the API were checked against the installed docs for Next 16.4.0, with Cache Components on; cache, proxy, and the error screen changed between versions 14, 15, and 16, and the skill tells Claude to check against your project's version before copying. Without Cache Components, the cache and Suspense parts follow a different model. The templates passed the type checker against Next 16.4 and the boundary test ran in Vitest, but no template was run in a build or on a server: the final test is in your project. Whatever the sheets mark as "to check" hasn't been verified, and the webhook template uses HMAC-SHA256, while the real format is up to each service. The checker reads text, doesn't follow the import chain, and can raise false alarms; not finding something doesn't prove it isn't there. For database and login, use the sister skill app-com-supabase; for payments, assinatura-com-stripe. Requirements: Python 3.8 or newer, only for the checker, which uses only the standard library, doesn't access the network, doesn't open .env files, and never prints a variable's value. To install, unzip the .zip into ~/.claude/skills/.
- Runs in Claude Code
- Intermediate
A Claude Code skill that has Claude build, or review, a Next.js app the way that holds up in production. It's for people starting a project and for people who already have one live and don't fully trust what they built. Claude writes the code and the tests; pasting secrets into the hosting dashboard and redeploying production are on you. The core rule: every decision moves out of the programmer's memory and into a place that fails on its own. Components are server components until they need to be client components, every action starts with the guard, the shared cache only holds what any visitor can see, and anything that depends on the request goes behind Suspense. It starts by reading the Next version and the project, and figures out where to come in: everything is a client component, an action without a guard, stale data live ("I published and it didn't show up"), a build asking for Suspense, a fragile route, or "can I ship?". What it delivers: reads in a server-only module and mutations in Server Actions, with the pure rule tested alongside; public cache with tags, the table of lifetimes by profile, and the difference between expiring in an action and revalidating in a route; the case of writes made outside the site (a script that writes straight to the database), with the revalidation route that solves it; dynamic data and Suspense, with the table of build symptoms; navigation with typed links, filters in the URL, and the three states of every route (loading, empty, and error); route or action, a webhook that only passes along the raw body, a proxy that only renews the session, and public variables kept apart from secrets. It comes with six reference sheets, seven TypeScript templates, and a checker, conferir.py, that only reads the project and flags client components importing server modules, actions without a guard, cached functions that read cookies, pages without loading or error states, and secrets read outside the designated module. Limitations: it covers the App Router; Pages Router, React without Next, and React Native are out of scope. Facts about the API were checked against the installed docs for Next 16.4.0, with Cache Components on; cache, proxy, and the error screen changed between versions 14, 15, and 16, and the skill tells Claude to check against your project's version before copying. Without Cache Components, the cache and Suspense parts follow a different model. The templates passed the type checker against Next 16.4 and the boundary test ran in Vitest, but no template was run in a build or on a server: the final test is in your project. Whatever the sheets mark as "to check" hasn't been verified, and the webhook template uses HMAC-SHA256, while the real format is up to each service. The checker reads text, doesn't follow the import chain, and can raise false alarms; not finding something doesn't prove it isn't there. For database and login, use the sister skill app-com-supabase; for payments, assinatura-com-stripe. Requirements: Python 3.8 or newer, only for the checker, which uses only the standard library, doesn't access the network, doesn't open .env files, and never prints a variable's value. To install, unzip the .zip into ~/.claude/skills/.
How to use
01
Copy the prompt
Use the Copy prompt button on this page.
02
Paste it into your AI
Open Claude Code in the project folder and paste the prompt.
03
Install the skill you downloaded
Install the downloaded file in Claude and call the skill in any chat.
In the package
- Prompt ready to copy and paste
- Skill as a .zip to install in Claude