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.
69
62%
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
82%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 good trigger term coverage and explicit 'Use when' guidance. Its main weakness is that the capabilities are described more as feature areas than concrete actions (e.g., 'Master' is vague), and there's moderate overlap risk with general React skills. Replacing the verb 'Master' with specific actions would strengthen it.
Suggestions
Replace 'Master' with specific concrete actions like 'Configure routing, implement streaming, set up parallel routes, and optimize data fetching in Next.js 14+ App Router'.
Add distinctiveness by mentioning file types or patterns unique to Next.js App Router (e.g., 'layout.tsx', 'loading.tsx', 'app/ directory structure') to reduce conflict with general React skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Next.js 14+ App Router) and mentions several features (Server Components, streaming, parallel routes, data fetching), but uses 'Master' which is vague and doesn't describe concrete actions like 'configure routes', 'implement caching', or 'set up middleware'. | 2 / 3 |
Completeness | Clearly answers both what ('Next.js 14+ App Router with 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', 'streaming', 'parallel routes', 'data fetching', 'React Server Components'. Good coverage of terms developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | While Next.js-specific terms provide some distinction, there could be overlap with a general React skill or a broader web framework skill. The mention of 'React Server Components' and 'SSR/SSG' could trigger alongside other React or rendering-focused skills. | 2 / 3 |
Total | 10 / 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.
This skill is highly actionable with excellent, up-to-date code examples covering the full breadth of Next.js App Router patterns. However, it is far too verbose for a skill file—most of this content is well-known Next.js documentation that Claude already understands, and the monolithic structure wastes context window tokens. It would benefit greatly from aggressive condensation to only non-obvious patterns/gotchas and splitting detailed examples into referenced sub-files.
Suggestions
Reduce the content by 60-70%: remove patterns Claude already knows (basic layouts, route handlers, metadata) and focus only on non-obvious gotchas, common mistakes, and project-specific conventions.
Split detailed pattern examples into separate referenced files (e.g., PATTERNS.md, CACHING.md) and keep SKILL.md as a concise overview with links.
Add a workflow section with sequenced steps for common tasks like 'adding a new feature route' with validation checkpoints (e.g., verify server/client boundary, test streaming behavior).
Remove the 'When to Use This Skill' and 'Core Concepts' sections entirely—Claude knows when Next.js patterns apply and understands rendering modes.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~400+ lines, with extensive code examples that cover many patterns Claude already knows well. The 'When to Use This Skill' section, rendering modes table, and file conventions are all information Claude has internalized. Much of this could be condensed to just the non-obvious patterns and gotchas. | 1 / 3 |
Actionability | Every pattern includes fully executable, copy-paste ready TypeScript code with proper imports, types, and realistic use cases. The code examples are complete and follow current Next.js 14+ conventions (e.g., Promise-based params, async Server Components). | 3 / 3 |
Workflow Clarity | The patterns are presented as isolated examples rather than a sequenced workflow. There's no guidance on the order of implementation, no validation checkpoints (e.g., verifying Server Components work before adding streaming), and no error recovery steps for common pitfalls like serialization boundary issues. | 2 / 3 |
Progressive Disclosure | Everything is in a single monolithic file with no references to separate detailed documents. The 8 full patterns with complete code examples, caching strategies, and best practices all inline creates a wall of content that should be split into separate files (e.g., PATTERNS.md, CACHING.md, API-ROUTES.md). | 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
6e3d68c
- 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.