A checklist and workflow for building and reviewing applications with Next.js 15, a React web framework, using its App Router. It covers planning, understanding an existing codebase, development, and performance review.

It is for planning and implementing Next.js applications, reviewing component boundaries and third-party packages, setting up loading and error pages, handling form changes, and optimizing the result.

It helps developers make consistent choices about server-rendered pages, browser-side interactivity, data fetching, forms, routing, and performance.

nextjs — Skill for Claude Code and Codex by DongDuong2001: A checklist and workflow for building and reviewing applications…

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/dongduong2001/pudo-code-system/nextjs

Any agent

npx skills add DongDuong2001/pudo-code-system --skill nextjs

Clone the repo

git clone --depth 1 https://github.com/DongDuong2001/pudo-code-system

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/dongduong2001/pudo-code-system/nextjs.svg)](https://agentmods.dev/skills/dongduong2001/pudo-code-system/nextjs)

Your own site

<a href="https://agentmods.dev/skills/dongduong2001/pudo-code-system/nextjs"><img src="https://agentmods.dev/badge/skills/dongduong2001/pudo-code-system/nextjs.svg" alt="Measured on agentmods" height="20"></a>

Per session 0 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 442 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00000	$0.00442
Opus 5	$0.00000	$0.00221
Sonnet 5	$0.00000	$0.00088
Haiku 4.5	$0.00000	$0.00044

Measured 5d ago against content hash 53e3d923484b, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

nextjs scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/frontend/nextjs/SKILL.md · 24 lines

What it actually says

Next.js 15 (App Router) PUDO Checklist

1. PLAN (Architecture & Strategy)

Rendering Strategy: Define which routes will be Server Components (RSC) and which require Client Components (use client).
Data Fetching: Plan caching strategies using Next.js 15's native fetch overrides and React.cache.
Routing Tree: Map out nested layouts, loading.tsx, error.tsx, and not-found.tsx boundaries.
Mutations: Plan Server Actions for data mutations instead of traditional API routes where possible.

2. UNDERSTAND (Context & Auditing)

RSC Boundary: Ensure use client directives are pushed as far down the component tree as possible.
Bundle Analysis: Audit third-party packages to ensure they are compatible with Server Components.
State Management: Review where global state (Zustand, Redux) is truly needed versus URL state or server state.

3. DEVELOP (Implementation)

Components: Build Server Components by default. Extract interactivity (hooks, events) into minimal Client Components.
Forms & Mutations: Use React 19 hooks (useActionState, useFormStatus) combined with Server Actions.
Streaming: Wrap slow data-fetching components in <Suspense> to stream HTML to the client progressively.
Assets: Utilize <Image>, <Link>, and next/font for automatic asset optimization.

4. OPTIMIZE (Performance & Review)

Caching: Verify Data Cache, Full Route Cache, and Router Cache behaviors. Configure revalidate tags correctly.
SEO & Metadata: Implement dynamic generateMetadata for accurate Open Graph and SEO tags.
Web Vitals: Check LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift) metrics.
Edge Compatibility: Ensure middleware and essential handlers are Edge-runtime compatible if deploying to Vercel/similar.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

5d ago First seen · 24 lines · 0 tokens per session scan A 53e3d923484b

Subscribe to this mod's changes

nextjs is a skill published in the GitHub repository DongDuong2001/pudo-code-system (5 stars, last pushed 28d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 442 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Frontend React antigravity-skills claude-skills cursor-rules docs kiro-ide opencode-skills

frontend-patterns

Framework-agnostic React/Vue patterns — component composition, hooks, TanStack Query, memoization, error boundaries. Use for generic React/Vue work (Vite, CRA, Storybook). For Next.js App Router / Server Components specifically, use senior-frontend instead.

tranhieutt/software_development_department · 63 tokens

senior-frontend

Next.js App Router specific patterns — Server Components, Client Components boundary, parallel fetching, bundle analysis, a11y. Use ONLY for Next.js 13+ App Router projects. For generic React/Vue patterns, use frontend-patterns instead.

tranhieutt/software_development_department · 56 tokens

scale-to-millions

Use this skill whenever the user is designing, reviewing, debugging, or answering interview questions about system/software architecture and scalability — e.g. "scale my app", "how do I handle more traffic", "design a URL shortener / news feed / chat system", "my API is slow under load", "should I shard my database"…

Rudra-narayan-muduli-001/Scale-to-Millions · 130 tokens

nextjs-patterns

Comprehensive Next.js development patterns for App Router, Server Components, TypeScript, and Tailwind CSS. Covers foundational principles, data fetching, routing, performance, and an 8-phase development workflow. Also includes Server Actions and Metadata patterns.

tranhieutt/software_development_department · 53 tokens

shadcn

Provides shadcn/ui component integration patterns, theming, and design system composition for React projects. Use when working with shadcn/ui or when the user mentions shadcn, shadcn/ui, or building a component library.

tranhieutt/software_development_department · 52 tokens

extract-source-sample

Given the path to a finished content-goose ad-run folder, extract everything that defines that ad — recipe shot list, VO script, characters, voices, world, atom-skills, master mp4 — and emit a source-sample.json in the exact shape the upload-ad-sample skill writes to the Goose Ads library. Also links every character…

gooseworks-ai/goose-skills · 160 tokens