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 Server Components.

Install with Tessl CLI

npx tessl i github:Dicklesworthstone/pi_agent_rust --skill nextjs-app-router-patterns

What are skills?

Review — 82%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Validation — 10 / 11 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

100%

30%

Reading List Bookmarks Feature

Server Actions and cache invalidation

Criteria

Without context

With context

use server directive

100%

revalidateTag after mutation

100%

revalidatePath after mutation

100%

cookies import from next/headers

100%

cookies call awaited

100%

redirect from next/navigation

100%

use client on interactive component

100%

useTransition for pending state

100%

Error returned as object

100%

Without context: $0.3081 · 11m 1s · 13 turns · 105 in / 4,734 out tokens

With context: $0.4022 · 10m 1s · 15 turns · 89 in / 4,417 out tokens

90%

10%

Developer Profile Page

Streaming with Suspense and colocated data fetching

Criteria

Without context

With context

Suspense wraps slow sections

100%

Skeleton fallbacks provided

100%

Critical data fetched blocking

100%

Data colocated in async components

100%

loading.tsx created

use client only for interactivity

100%

No fetch in client components

100%

searchParams awaited

100%

Suspense key for param changes

100%

Without context: $0.5671 · 21m 48s · 20 turns · 153 in / 9,936 out tokens

With context: $0.9379 · 18m 8s · 22 turns · 169 in / 9,917 out tokens

100%

30%

Recipe Blog API and Page

Dynamic route handlers and SEO metadata

Criteria

Without context

With context

NextRequest in handler

100%

NextResponse.json for responses

100%

params typed as Promise

100%

params awaited in handler

100%

404 with status 404

100%

POST returns 201

100%

generateMetadata async

100%

openGraph metadata

100%

twitter metadata

100%

generateStaticParams

100%

notFound from next/navigation

100%

Without context: $0.2450 · 5m 22s · 12 turns · 97 in / 3,254 out tokens

With context: $0.6517 · 13m 19s · 24 turns · 178 in / 6,682 out tokens

Evaluated: about 15 hours ago
Agent: Claude Code

Table of Contents

Reading List Bookmarks Feature Developer Profile Page Recipe Blog API and Page

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.