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.
76
71%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./tests/ext_conformance/artifacts/agents-wshobson/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.mdQuality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description that clearly identifies its domain (Next.js 14+ App Router), lists specific capabilities (Server Components, streaming, parallel routes, data fetching), and provides explicit trigger guidance. The use of 'Master' as the opening verb is slightly informal but the description uses third person voice appropriately. The trigger terms are comprehensive and naturally match what developers would say when seeking Next.js help.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete capabilities: App Router, Server Components, streaming, parallel routes, and advanced data fetching. These are distinct, identifiable technical features rather than vague abstractions. | 3 / 3 |
Completeness | Clearly answers both 'what' (Next.js 14+ App Router with Server Components, streaming, parallel routes, advanced data fetching) and 'when' (explicit 'Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components'). | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'Next.js', 'App Router', 'Server Components', 'SSR/SSG', 'streaming', 'parallel routes', 'React Server Components'. These cover common variations of how developers discuss Next.js development. | 3 / 3 |
Distinctiveness Conflict Risk | Highly specific to Next.js 14+ App Router paradigm, which is a clear niche. The version specificity (14+), framework name, and specific features like parallel routes and streaming make it very unlikely to conflict with generic React or other framework skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
42%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill excels at providing concrete, executable code examples covering a comprehensive range of Next.js App Router patterns. However, it is far too verbose for a SKILL.md file—much of the content (rendering mode explanations, file conventions, basic do's/don'ts) is knowledge Claude already possesses. The monolithic structure with 8 full patterns inline makes it a poor fit for token-efficient context loading; it should be restructured as a concise overview with references to detailed pattern files.
Suggestions
Restructure as a concise overview (under 100 lines) with references to separate files like PATTERNS.md, CACHING.md, and ROUTES.md for detailed code examples.
Remove content Claude already knows: the rendering modes table, file conventions tree, and basic Do's/Don'ts list. Focus only on non-obvious patterns and project-specific conventions.
Add a clear workflow sequence for common tasks like 'Building a new App Router page' or 'Migrating a Pages Router route' with validation checkpoints.
Consolidate the 8 patterns into 2-3 key patterns inline with the rest referenced via progressive disclosure to respect token budget.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~400+ lines, with significant content Claude already knows (rendering mode descriptions, file conventions, basic fetch patterns). The 'When to Use This Skill' section, the rendering modes table, and the Do's/Don'ts are largely common knowledge for Claude. Many patterns could be condensed significantly. | 1 / 3 |
Actionability | The skill provides fully executable, copy-paste ready TypeScript code for every pattern. Code examples are complete with imports, type annotations, and realistic use cases covering Server Components, Client Components, Server Actions, parallel routes, intercepting routes, streaming, route handlers, and metadata. | 3 / 3 |
Workflow Clarity | Individual patterns are clearly presented but there's no sequenced workflow for building an app or migrating from Pages Router. The patterns are presented as isolated examples without explicit validation steps or feedback loops. For a skill covering migration and building full apps, the lack of step-by-step process with checkpoints is a gap. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of content with everything inline. Eight full patterns with complete code examples, caching strategies, best practices, and resources are all in a single file. The external links at the bottom are to general Next.js docs, not to organized sub-files. Content like individual patterns, caching strategies, and API route examples should be split into separate referenced files. | 1 / 3 |
Total | 7 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (544 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- Dicklesworthstone/pi_agent_rust
- Commit
47823e3
- 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.