nextjs-app-router
Deep expertise in Next.js App Router patterns including route groups, parallel routes, intercepting routes, layouts, and loading states.
npx skills add a5c-ai/babysitter --skill nextjs-app-router --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Next.js App Router Skill Expert assistance for implementing Next.js App Router with advanced routing patterns and conventions. ## Capabilities - Design app directory structure with route groups - Implement parallel and intercepting routes - Configure layouts, templates, and loading states - Set up error boundaries and not-found pages - Implement streaming with Suspense - Configure route handlers for API endpoints ## Usage Invoke this skill when you need to: - Structure app directory for complex routing - Implement modal routes with interception - Create parallel route layouts - Configure streaming and loading states - Build API route handlers ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | routeType | string | Yes | page, layout, route, loading, error | | routePath | string | Yes | Route path in app directory | | features | array | No | parallel, intercept, group | | streaming | boolean | No | Enable streaming with Suspense | ### Configuration Example ```json { "routeType": "page", "routePath": "/dashboard/analytics", "features": ["parallel", "loading"], "streaming": true } ``` ## Route Structure Patterns ### Route Groups ``
- Capabilities
- Usage
- Inputs
- Configuration Example
- Route Structure Patterns
- Route Groups
- Parallel Routes
- Intercepting Routes
- Loading and Error States
- Route Handlers
- Streaming with Suspense
- Best Practices
- Target Processes
What does the nextjs-app-router skill do?
Deep expertise in Next.js App Router patterns including route groups, parallel routes, intercepting routes, layouts, and loading states.
How do I install it?
Run `npx skills add a5c-ai/babysitter --skill nextjs-app-router --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From a5c-ai/babysitter, a repository with 1,642 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.