Sandbox Bench
vercel/next.js
Benchmark React or Next.js changes on Vercel Sandbox VMs with paired A/B statistics: react PR/commit vs base, or Next.js PR/commit vs base, measured end-to-end through the bench/render-pipeline app…
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
MITAuto-check passed
Install Nextjs App Router Patterns
$ npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install davila7/claude-code-templates nextjs-app-router-patterns --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cli-tool/components/skills/web-development/nextjs-app-router-patterns .claude/skills/nextjs-app-router-patterns && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "nextjs-app-router-patterns" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/nextjs-app-router-patterns into .claude/skills/nextjs-app-router-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nextjs-app-router-patterns", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/nextjs-app-router-patternsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install davila7/claude-code-templates nextjs-app-router-patterns --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .agents/skills && cp -r skills-src/cli-tool/components/skills/web-development/nextjs-app-router-patterns .agents/skills/nextjs-app-router-patterns && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "nextjs-app-router-patterns" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/nextjs-app-router-patterns into .agents/skills/nextjs-app-router-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nextjs-app-router-patterns", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install davila7/claude-code-templates nextjs-app-router-patterns --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/cli-tool/components/skills/web-development/nextjs-app-router-patterns .cursor/skills/nextjs-app-router-patterns && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "nextjs-app-router-patterns" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/nextjs-app-router-patterns into .cursor/skills/nextjs-app-router-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nextjs-app-router-patterns", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/davila7/claude-code-templates.git --path cli-tool/components/skills/web-development/nextjs-app-router-patterns--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install davila7/claude-code-templates nextjs-app-router-patterns --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/cli-tool/components/skills/web-development/nextjs-app-router-patterns .gemini/skills/nextjs-app-router-patterns && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "nextjs-app-router-patterns" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/nextjs-app-router-patterns into .gemini/skills/nextjs-app-router-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nextjs-app-router-patterns", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install davila7/claude-code-templates nextjs-app-router-patternsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .github/skills && cp -r skills-src/cli-tool/components/skills/web-development/nextjs-app-router-patterns .github/skills/nextjs-app-router-patterns && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "nextjs-app-router-patterns" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/nextjs-app-router-patterns into .github/skills/nextjs-app-router-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nextjs-app-router-patterns", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install davila7/claude-code-templates nextjs-app-router-patterns --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/davila7/claude-code-templates.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/cli-tool/components/skills/web-development/nextjs-app-router-patterns .opencode/skills/nextjs-app-router-patterns && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "nextjs-app-router-patterns" agent skill from https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/web-development/nextjs-app-router-patterns into .opencode/skills/nextjs-app-router-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nextjs-app-router-patterns", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
nextjs-app-router-patterns- GitHub stars
- 32k
- Used in
- 11 other repos
- Token cost
- ~296 tokens
- SKILL.md length
- 117 words
- Files
- 2
- Skills in repo
- 477
- Repo updated
- First seen
- Licence
- MIT
At a glance
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
- SKILL.md covers Use this skill when, Do not use this skill when, Instructions and Resources
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Nextjs App Router Patterns is an agent skill from davila7/claude-code-templates. Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
Its SKILL.md is about 300 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `resources/implementation-playbook.md`).
It works with Next.js and React. The repository describes itself as: CLI tool for configuring and monitoring Claude Code. The licence is MIT.
Example prompts
- “/nextjs-app-router-patterns”
What it can do on your machine
Read from SKILL.md and the folder at commit 14680ec. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Nextjs App Router Patterns loads about 296 tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 117 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from davila7/claude-code-templates at commit 14680ec, republished under its MIT licence (© davila7). 117 words, ~296 tokens.
Download SKILL.mdSave it as
.claude/skills/nextjs-app-router-patterns/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- nextjs-app-router-patterns
- description
- Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
- risk
- safe
- source
- community
- date_added
- 2026-02-27
Next.js App Router Patterns
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
Use this skill when
- Building new Next.js applications with App Router
- Migrating from Pages Router to App Router
- Implementing Server Components and streaming
- Setting up parallel and intercepting routes
- Optimizing data fetching and caching
- Building full-stack features with Server Actions
Do not use this skill when
- The task is unrelated to next.js app router patterns
- You need a different domain or tool outside this scope
Instructions
- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
- If detailed examples are required, open
resources/implementation-playbook.md.
Resources
resources/implementation-playbook.mdfor detailed patterns and examples.
© davila7, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in cli-tool/components/skills/web-development/nextjs-app-router-patterns of davila7/claude-code-templates.
- SKILL.md
- resources/implementation-playbook.md
Open the folder on GitHubat commit 14680ec
Used in 11 other repositories
We found 27 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 11 other GitHub owners. This page covers the copy in davila7/claude-code-templates, which our catalogue first saw on October 7, 2026.
- wshobson/agentsplugins/frontend-mobile-development/skills/nextjs-app-router-patterns
- aiskillstore/marketplaceskills/sickn33/nextjs-app-router-patternsskills/wshobson/nextjs-app-router-patterns
- sickn33/agentic-awesome-skillsskills/nextjs-app-router-patternsplugins/agentic-awesome-skills/skills/nextjs-app-router-patterns+3 more
- rmyndharis/antigravity-skillsskills/nextjs-app-router-patterns
- Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI.agent/skills/nextjs-app-router-patterns
- agent-skills-hub/agent-skills-hubskills/nextjs-app-router-patterns
- lingxling/awesome-skills-cnantigravity-awesome-skills/skills/nextjs-app-router-patternsantigravity-awesome-skills/plugins/agentic-awesome-skills/skills/nextjs-app-router-patterns+3 more
- benjaminasterA/antigravity-awesome-skillsskills/nextjs-app-router-patterns
- LeoYeAI/openclaw-master-skillsskills/nextjs-app-router-patterns
- henryalouf/ruflow.agents/skills/nextjs-app-router-patterns.agents/skills/antigravity-awesome-skills/skills/nextjs-app-router-patterns+6 more
- infometa/workbuddyskillsplugins/codebuddy-plugins-official/external_plugins/frontend-mobile-development/skills/nextjs-app-router-patterns
Compare with similar skills
Nextjs App Router Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Nextjs App Router Patterns this skilldavila7/claude-code-templates | 32k | 11 repos | ~296 | Automated safety check: Pass | MIT | |
| Sandbox Benchvercel/next.js | 143k | — | ~4.1k | Automated safety check: Pass | MIT | |
| AI SDKvercel-labs/ai-facts | 168 | 21 repos | ~1.2k | Automated safety check: Pass | None | |
| Chakra UI v3 Builderchakra-ui/chakra-ui | 41k | — | ~3.1k | Automated safety check: Pass | MIT | |
| Remotion Best Practiceslyonjs/shortvid.io | 147 | 33 repos | ~1k | Automated safety check: Pass | MIT | |
| React View Transitions Guidevercel-labs/next-beats | 167 | 10 repos | ~3.1k | Automated safety check: Pass | MIT |
Similar skills
- Official
- Official
AI SDK
vercel-labs/ai-facts
Answer questions about the AI SDK and help build AI-powered features.
Chakra UI v3 Builder
chakra-ui/chakra-ui
Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.
Remotion Best Practices
lyonjs/shortvid.io
Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.
- Official
React View Transitions Guide
vercel-labs/next-beats
Guides implementing animated page and state transitions in React with the native View Transition API, covering shared elements, list reorders and directional navigation.
Website Cloner
JCodesMore/ai-website-cloner-template
Rebuilds existing web pages as editable local code that matches their content, assets, responsive layout and interactions, including Framer sites and animated pages.
More from davila7/claude-code-templates
All 477 skills in this repoPerplexity Web Search
davila7/claude-code-templates
Runs web-grounded searches through Perplexity's Sonar models over OpenRouter for current events, recent literature and cited facts beyond the model's training cutoff.
Neuropixels Data Analysis
davila7/claude-code-templates
Analyzes Neuropixels recordings from SpikeGLX or Open Ephys through preprocessing, drift correction, Kilosort4 spike sorting, quality metrics and curation.
Scientific Venue Templates
davila7/claude-code-templates
Supplies LaTeX templates and formatting rules for journals, conferences, posters, and grant proposals, then can check a draft against them.
Brand Voice Content Creator
davila7/claude-code-templates
Analyzes a brand's existing writing to lock in a consistent voice, then builds SEO blog posts and platform-specific social content around it.
CAPA Officer
davila7/claude-code-templates
Guides corrective and preventive action (CAPA) work in a quality management system, from initiation and root cause analysis through effectiveness verification.
Fda Consultant Specialist
davila7/claude-code-templates
Senior FDA consultant and specialist for medical device companies including HIPAA compliance and requirement management.
Related
Questions about Nextjs App Router Patterns
What does Nextjs App Router Patterns do?
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development. Nextjs App Router Patterns is an agent skill from davila7/claude-code-templates.js 14+ App Router architecture, Server Components, and modern full-stack React development.
How do I install Nextjs App Router Patterns in Claude Code?
Run `npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a claude-code`. Or copy the skill folder (cli-tool/components/skills/web-development/nextjs-app-router-patterns in davila7/claude-code-templates) into .claude/skills/nextjs-app-router-patterns in your project. Claude Code loads it when a task matches its description.
How do I install Nextjs App Router Patterns in Codex?
Run `npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a codex`. Or copy the skill folder (cli-tool/components/skills/web-development/nextjs-app-router-patterns in davila7/claude-code-templates) into .agents/skills/nextjs-app-router-patterns in your project. Codex loads it when a task matches its description.
Can I use Nextjs App Router Patterns in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add davila7/claude-code-templates --skill nextjs-app-router-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nextjs-app-router-patterns, .gemini/skills/nextjs-app-router-patterns, .github/skills/nextjs-app-router-patterns and .opencode/skills/nextjs-app-router-patterns in your project.
What does Nextjs App Router Patterns need to run?
SKILL.md names no scripts, command-line tools or credentials: Nextjs App Router Patterns is instructions for the agent only.
Does Nextjs App Router Patterns access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Nextjs App Router Patterns safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Nextjs App Router Patterns use?
Nextjs App Router Patterns is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Nextjs App Router Patterns use?
About 296 tokens (SKILL.md is roughly 1.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Nextjs App Router Patterns?
Skills that share tags, products or a category with Nextjs App Router Patterns: Sandbox Bench (vercel/next.js, 143k stars), AI SDK (vercel-labs/ai-facts, 168 stars), Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars) and Remotion Best Practices (lyonjs/shortvid.io, 147 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Nextjs App Router Patterns?
davila7 (a GitHub user) maintains it in davila7/claude-code-templates, which has 32,463 GitHub stars. The repository holds 477 skills in this directory. The repository was last updated on October 8, 2026.
Source: davila7/claude-code-templates on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.