nextjs-app-router
Skill3 starsChanged 8 months agoMITView on GitHub
Build, review, or migrate Next.js App Router applications with version-aware component boundaries, data fetching, caching, routing, and mutations. Use for App Router implementation and architecture tasks, not generic React optimization, copy-only edits, or Pages Router fixes that do not involve migration.
13 other projects use a version of this.
Adopted by
Most recently taken up by
- abdullahqureshi27/TaskCortextheir own version, first seen Nov 8, 2026
- geronco/commandvault-librarytheir own version, first seen Oct 13, 2026
- russolutionconsult/claude-skillstheir own version, first seen Oct 11, 2026
- SkillMedev/vercel-platformtheir own version, first seen Oct 5, 2026
- SkillMedev/full-stack-web-devtheir own version, first seen Oct 5, 2026
- sabahattink/antigravity-fullstack-hqtheir own version, first seen Sep 20, 2026
Used with
Projects with it also use skill-creator.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
SentrySkillskill-creator
Create new agent skills following the Agent Skills specification. Use when asked to "create a skill", "add a new skill", "write a skill", "make a skill", "build a skill", or scaffold a new skill with SKILL.md. Guides through requirements, writing, registration, and verification.
Also in 3 projects that use this
Other versions13 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 13
- sabahattink/antigravity-fullstack-hq★ 30same name
- jawwad-ali/claude-code-skills★ 4same name
- HamzaSheikh768/Agents-Skills-Lap★ 3same name
- amirrezaalasti/codescribe★ 2same name
- desilokesh1/antigravity-fullstack-hq★ 2same name
- dennisrongo/claude-skills★ 1same name
- geronco/commandvault-library★ 1same name
- SkillMedev/full-stack-web-dev★ 1same name
- SkillMedev/vercel-platform★ 1same name
- abdullahqureshi27/TaskCortex★ 0same name
3 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository17 other files it gives its agents.
- api-securitySkill
- ascii-artSkill
- code-readabilitySkill
- gotchasSkill
- llm-agent-securitySkill
- plain-docsSkill
- product-marketingSkill
- prompt-rewriteSkill
- react-performanceSkill
- react-testingSkill
- seoSkill
- spa-performanceSkill
- tailwind-design-systemSkill
- typescript-safetySkill
- ux-copySkill
- wcag-accessibilitySkill
- webgpuSkill
The file
We split this skill into the rules it gives an agent
4 rules. 0 are common, 2 are distinctive, and 2 are very specific to this project.
0
Common
Most of the 11 edited versions we read keep these.
2
Distinctive
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 14
Prefer version-matched docs bundled at node_modules/next/dist/docs/ on Next.js 16.2+, when available.
- Distinctive: line 18
Read only the resources needed for the task.
- Distinctive: line 37
Remove demonstrated waterfalls and unnecessary client code.
- Very specific: line 40
Use Server Components for server-only work.
“Common” is measured: kept by at least 6 in 10 of the 11 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Next.js App Router
Preserve the app's supported version and configuration. Prefer server rendering and direct server reads where they fit; keep interactive and live browser behavior where needed.
Establish the context
Inspect package.json, lockfile, route folders, next.config.*, and project instructions. Identify the installed Next.js/React versions, App vs Pages Router, runtime/deployment constraints, and whether Cache Components is enabled. In monorepos resolve these from the affected app. Do not upgrade packages or enable features merely to fit an example.
Prefer version-matched docs bundled at node_modules/next/dist/docs/ on Next.js 16.2+, when available. Otherwise consult official docs for the supported version. The live docs can describe a newer minor; confirm API version history and config before use. Distinguish stable APIs, experimental options, deprecations and project conventions.
Choose the relevant resource
Read only the resources needed for the task; follow their official links when a version or behavior is uncertain.
| Task | Resource |
| Server/client boundaries, composition, serialization | Server Components |
| Reads, streaming, browser data, actions, HTTP endpoints | Data fetching |
| Existing cache mode, Cache Components, private/remote cache, invalidation | Caching |
| Layouts, dynamic routes, search, parallel/intercepting routes | Routing |
| Request redirects/rewrites and optimistic auth gates | Proxy |
| Expected errors, loading, recovery, 404 response semantics | Error handling |
| Metadata exports, inheritance and SEO integration | Metadata |
| Image/font configuration and loading tradeoffs | Assets |
| Incremental Pages to App migration | Migration |
| Deliberate major/minor upgrades | Version changes |
Prioritize decisions
- Protect secrets and user data. Authenticate and authorize reads/mutations near the data, validate untrusted input, and keep personal data out of an incorrectly shared cache. Proxy and UI visibility are insufficient authorization.
- Preserve correctness across versions and rendering modes. Async request APIs, cache prerequisites, route conventions and recovery props depend on the installed version/config.
- Remove demonstrated waterfalls and unnecessary client code. Parallelize independent work; choose Suspense boundaries that preserve useful UI. Client fetching remains appropriate for polling, browser-only state and interactive updates.
- Tune caching, prefetch and asset hints to freshness, deployment and measured behavior. These are choices, not prerequisites for every App Router app.
Use Server Components for server-only work. Add 'use client' at a useful module boundary for interaction; it need not be a leaf. Use a Server Action for UI mutations when appropriate, or a Route Handler for an HTTP contract (including browser clients). Neither replaces authorization.
Validate the actual change
Run the affected app's existing typecheck, lint and build commands when available. Test the behavior that can fail: authenticated direct requests, cross-user isolation, post-mutation freshness, hard/soft navigation, errors, and loading. Do not call a snippet production-ready when imports, auth helpers or persistence are placeholders. State what ran and what remains untested.
For reviews, lead with actionable failures and their version/config scope. Separate optional improvements from correctness issues. For implementation, explain the chosen boundary/cache mode, changed behavior and verification.
Source review is scoped, not a blanket certification. See SOURCES.md for canonical links, applicable versions/configurations, checked sections, upstream dates and the freshness policy. The repository's pilot review/evaluation records are maintenance evidence and are not required at runtime.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

