Nextjs App Router Patterns
If you're working with Next.js 14 or later and need solid patterns for App Router, this covers the essentials: Server Components, streaming, parallel and intercepting routes, data fetching strategies, and Server Actions. It's built for both greenfield apps and Pages Router migrations. The skill includes a separate implementation playbook with detailed examples, which is smart since App Router conventions are still settling and it helps to see patterns side by side. This works best when you're already committed to App Router and need architectural guidance, not if you're still deciding between routing approaches or working with older Next.js versions.
- skills.sh installs
- 501
- GitHub stars
- 43.1K
- last updated
- Jul 14, 2026
Install
$ npx -y skills add sickn33/antigravity-awesome-skills --skill nextjs-app-router-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/sickn33/antigravity-awesome-skills
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from sickn33/antigravity-awesome-skills
All 708- Cc Skill Frontend Patterns495
- Upstash Qstash472
- Signup Flow Cro465
- Outlook Automation464
- Requesting Code Review464
- Startup Business Analyst Market Opportunity463
- Design Orchestration462
- Blockrun459
- Receiving Code Review458
- Rust Pro458
- Golang Pro455
- Firecrawl Scraper454
- Finishing A Development Branch453
- Api Testing Observability Api Mock451
- Free Tool Strategy451
- Telegram Automation451
- Slack Gif Creator450
- Codebase Cleanup Tech Debt448
- Referral Program446
- Popup Cro445
- Frontend Mobile Security Xss Scan444
- Frontend Mobile Development Component Scaffold442
- Prompt Engineering Patterns442
- C Pro439
Recommended
More Frontend Development1
frontend-designsecondsky/claude-skillsCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat479skills.sh installs
frontend-designsecondsky/claude-skillsCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat479skills.sh installs2
angular-developmentmanutej/luxor-claude-marketplaceComprehensive Angular framework development covering components, directives, services, dependency injection, routing, and reactive programming based on official463skills.sh installs
angular-developmentmanutej/luxor-claude-marketplaceComprehensive Angular framework development covering components, directives, services, dependency injection, routing, and reactive programming based on official463skills.sh installs3svelte-developmentmanutej/luxor-claude-marketplaceComprehensive Svelte development skill covering reactivity runes, components, stores, lifecycle, transitions, and modern Svelte 5 patterns436skills.sh installs
svelte-developmentmanutej/luxor-claude-marketplaceComprehensive Svelte development skill covering reactivity runes, components, stores, lifecycle, transitions, and modern Svelte 5 patterns436skills.sh installs4nuxt-productionsecondsky/claude-skills| Nuxt 4 production optimization: hydration, performance, testing with Vitest, deployment to Cloudflare/Vercel/Netlify, and v4 migration. Use when: debugging hy425skills.sh installs
nuxt-productionsecondsky/claude-skills| Nuxt 4 production optimization: hydration, performance, testing with Vitest, deployment to Cloudflare/Vercel/Netlify, and v4 migration. Use when: debugging hy425skills.sh installs5
dribbble-ui-skillsihlamury/design-skillsDribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.413skills.sh installs
dribbble-ui-skillsihlamury/design-skillsDribbble's UI design system. Use when building interfaces inspired by Dribbble's aesthetic - light mode, Inter font, 4px grid.413skills.sh installs6notion-ui-skillsihlamury/design-skillsNotion's UI design system. Use when building interfaces inspired by Notion's aesthetic - light mode, Inter font, 4px grid.402skills.sh installs
notion-ui-skillsihlamury/design-skillsNotion's UI design system. Use when building interfaces inspired by Notion's aesthetic - light mode, Inter font, 4px grid.402skills.sh installs