How do I install the Nextjs App Router Patterns skill?

Run npx skillmds@latest add tomevault-io/nextjs-app-router-patterns-7 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Nextjs App Router Patterns safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Nextjs App Router Patterns?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Nextjs App Router Patterns free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Nextjs App Router Patterns?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Nextjs App Router Patterns by tomevault-io

Name: Nextjs App Router Patterns
Author: tomevault-io

Nextjs App Router Patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Serve... Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

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.md for detailed patterns and examples.

AGI Framework Integration

Adapted for @techwavedev/agi-agent-kit Original source: antigravity-awesome-skills

Memory-First Protocol

Retrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.

# Check for prior frontend/design context before starting
python3 execution/memory_manager.py auto --query "design system decisions and component patterns for Nextjs App Router Patterns"

Storing Results

After completing work, store frontend/design decisions for future sessions:

python3 execution/memory_manager.py store \
  --content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \
  --type decision --project <project> \
  --tags nextjs-app-router-patterns frontend

Multi-Agent Collaboration

Share design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).

python3 execution/cross_agent_context.py store \
  --agent "<your-agent>" \
  --action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \
  --project <project>

Design Memory Persistence

Store design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: nextjs-app-router-patterns-7description: Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Serve... Use when this capability is needed.---# Next.js App Router PatternsComprehensive 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.md` for detailed patterns and examples.---## AGI Framework Integration> **Adapted for [@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit)**> Original source: [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)### Memory-First ProtocolRetrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.```bash# Check for prior frontend/design context before startingpython3 execution/memory_manager.py auto --query "design system decisions and component patterns for Nextjs App Router Patterns"```### Storing ResultsAfter completing work, store frontend/design decisions for future sessions:```bashpython3 execution/memory_manager.py store \ --content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \ --type decision --project <project> \ --tags nextjs-app-router-patterns frontend```### Multi-Agent CollaborationShare design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).```bashpython3 execution/cross_agent_context.py store \ --agent "<your-agent>" \ --action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \ --project <project>```### Design Memory PersistenceStore design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/techwavedev) — claim your Tome and manage your conversions.

Frequently asked questions