CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

65

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

72%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, token-efficient overview with executable Quick Start code and exemplary progressive disclosure to a single real reference file. The main weakness is workflow clarity: as a patterns reference it provides no sequenced, checkpointed procedures for the multi-step tasks it names (e.g., Pages Router migration, Server Actions).

Suggestions

Add a short step-by-step workflow for the most common multi-step task the skill names — e.g., 'Migrating a page from Pages Router' (move file, convert getServerSideProps to async Server Component, replace useEffect fetching, verify with next build) with explicit verification checkpoints.

Replace the conceptual rendering-modes table with Next.js-specific guidance Claude would not already know (e.g., App Router-specific gotchas or version-specific behaviors), trimming the re-explanation of Server vs Client Component basics.

Make the Quick Start self-contained: either define or drop the undefined imports ('./providers', 'ProductGrid'), and add one minimal 'use client' example so the client-boundary pattern is executable as written.

DimensionReasoningScore

Conciseness

The body is efficient — a table, a file-convention tree, one compact Quick Start, and terse do's/don'ts — but the rendering-modes table ('Server Components: Data fetching, heavy computation, secrets / Client Components: Interactivity, hooks, browser APIs') re-explains concepts Claude already knows, matching anchor 4 rather than the fully lean anchor 5.

4 / 5

Actionability

The Quick Start gives complete, executable TypeScript for layout.tsx and an async data-fetching page with ISR revalidation, plus a concrete file-conventions reference; however it imports undefined components ('./providers', 'ProductGrid') and shows no 'use client' or route-handler example, so it is mostly executable with minor gaps (anchor 4) rather than fully copy-paste ready (anchor 5).

4 / 5

Workflow Clarity

This is a patterns reference rather than a multi-step procedure: the body offers a loose navigation sequence (Quick Start, then 'Read that file when the navigation tier above is insufficient') but no explicit sequenced workflow or checkpoints, fitting anchor 3; it is not anchor 4 because no validation or stepwise guidance is present for tasks like migration or implementing a Server Action.

3 / 5

Progressive Disclosure

The SKILL.md body is a lean overview with well-organized sections and a single clearly signaled, one-level-deep reference ('Detailed pattern documentation lives in references/details.md'), which exists as a real file of worked examples — matching anchor 5's clear overview with well-signaled references.

5 / 5

Total

16

/

20

Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description that explicitly states what the skill covers and when to use it, with domain-specific trigger terms. Its weaknesses are minor: capability framing as feature areas rather than actions, and an unscoped SSR/SSG trigger that slightly raises overlap risk with generic React skills.

DimensionReasoningScore

Specificity

The description lists several concrete capability areas — 'Server Components, streaming, parallel routes, and advanced data fetching' — but they are feature names rather than actions and coverage has minor gaps (no mutations/Server Actions or routing conventions), matching anchor 4 rather than the comprehensive action coverage of anchor 5.

4 / 5

Completeness

It clearly answers both questions: the 'what' ('Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching') and an explicit 'when' with concrete trigger phrases ('Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components'), matching anchor 5; anchor 4 would require a weaker or less explicit 'when' clause.

5 / 5

Trigger Term Quality

'Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components' provides good natural keyword coverage (Next.js, App Router, SSR/SSG, Server Components), but misses common phrasings users would say such as 'migrating from Pages Router', 'RSC', or 'route handlers', fitting anchor 4 rather than the comprehensive synonym coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

'Next.js 14+ App Router' carves a clear niche with distinct triggers, but 'implementing SSR/SSG' is unscoped and could also match a generic React or SSR-framework skill, giving minor overlap risk consistent with anchor 4 rather than the minimal conflict risk of anchor 5.

4 / 5

Total

17

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

wshobson/agents

Path

plugins/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md

Reviewed

Table of Contents

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.