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.
64
77%
Does it follow best practices?
Impact
—
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
89%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 solid description with excellent trigger term coverage and a clear 'Use when' clause that makes it easy for Claude to select appropriately. Its main weakness is the use of 'Master' as the leading verb, which is vague and aspirational rather than describing concrete actions the skill enables. The description would benefit from replacing 'Master' with specific actionable verbs.
Suggestions
Replace the vague verb 'Master' with specific concrete actions like 'Configure routing, implement streaming, set up data fetching patterns, and build layouts using Next.js 14+ App Router'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Next.js 14+ App Router) and lists several features (Server Components, streaming, parallel routes, data fetching), but uses the vague verb 'Master' rather than describing concrete actions like 'configure routes', 'implement streaming responses', or 'set up data fetching patterns'. | 2 / 3 |
Completeness | Clearly answers both what ('Server Components, streaming, parallel routes, and advanced data fetching') and when ('Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components') with an explicit 'Use when' clause. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'Next.js', 'App Router', 'Server Components', 'SSR', 'SSG', 'React Server Components', 'streaming', 'parallel routes', 'data fetching'. These cover common variations and terms developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Highly specific to Next.js 14+ App Router, which is a clear niche. The combination of version-specific framework features (parallel routes, streaming, RSC) makes it unlikely to conflict with generic React or web development skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
64%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides high-quality, executable Next.js App Router code examples that are up-to-date with Next.js 14+ conventions. However, it is verbose for a skill file—much of the content (basic rendering modes, file conventions, do's/don'ts) is knowledge Claude already possesses. The lack of workflow sequencing, validation steps, and progressive disclosure into bundle files limits its effectiveness as a concise, actionable reference.
Suggestions
Trim content Claude already knows (rendering modes table, basic file conventions, do's/don'ts) and focus on non-obvious patterns like intercepting routes and the Promise-based params API that are newer/tricky.
Split detailed patterns (parallel routes, intercepting routes, caching strategies) into separate bundle files and reference them from the main SKILL.md overview.
Add validation/verification guidance for complex patterns, e.g., 'After setting up intercepting routes, verify by: 1) clicking a link (should show modal), 2) navigating directly to URL (should show full page), 3) refreshing on modal URL (should show full page).'
Remove the 'When to Use This Skill' section—this is metadata that belongs in frontmatter, not in the body content.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~400 lines) and includes several patterns that Claude already understands well (basic Server Components, route handlers, metadata). The rendering modes table and file conventions are useful reference material, but the 'When to Use This Skill' section and 'Core Concepts' explanations add tokens without much value. The Do's/Don'ts section explains things Claude already knows (e.g., 'Don't use hooks in Server Components'). | 2 / 3 |
Actionability | All code examples are fully executable TypeScript with proper imports, types, and realistic patterns. The examples cover complete implementations including error handling, loading states, and edge cases. Code is copy-paste ready and follows current Next.js 14+ conventions (e.g., Promise-based params, async searchParams). | 3 / 3 |
Workflow Clarity | The patterns are presented as independent examples rather than a sequenced workflow. There are no validation checkpoints, no guidance on verifying that implementations work correctly, and no error recovery steps. For a skill covering complex topics like parallel routes and intercepting routes, there should be verification steps (e.g., 'test that the modal intercept works by navigating directly vs clicking'). | 2 / 3 |
Progressive Disclosure | All content is in a single monolithic file with no bundle files to offload detailed patterns. The 8 patterns plus caching strategies and best practices could benefit from being split into separate reference files. The external links at the bottom are helpful but the inline content is dense and could be better organized with references to supporting files. | 2 / 3 |
Total | 9 / 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
895269a
- 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.