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.
79
69%
Does it follow best practices?
Impact
97%
1.08xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/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 some potential overlap with general React or SSR-focused skills. Replacing 'Master' with specific action verbs would strengthen it.
Suggestions
Replace 'Master' with specific concrete actions like 'Configure routing, implement streaming, set up parallel routes, and optimize data fetching patterns in Next.js 14+ App Router'.
Add distinguishing terms to reduce conflict risk with general React skills, e.g., mention 'next.config', 'app directory', 'layout.tsx', or 'route handlers' as additional trigger terms.
| 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', and 'React Server Components'. Good coverage of common variations and terminology. | 3 / 3 |
Distinctiveness Conflict Risk | While Next.js-specific terms like 'App Router' and 'parallel routes' are distinctive, there could be overlap with general React skills or broader SSR/SSG skills. The mention of 'React Server Components' could conflict with a general React skill. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
57%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides high-quality, executable Next.js App Router code examples covering a comprehensive range of patterns, which is its primary strength. However, it suffers from being a monolithic reference document that doesn't leverage progressive disclosure, includes more patterns than necessary for a single skill file, and lacks workflow sequencing or validation guidance for building Next.js applications step by step.
Suggestions
Split the 8 patterns into separate referenced files (e.g., PATTERNS.md, CACHING.md, SEO.md) and keep SKILL.md as a concise overview with a quick start and navigation links.
Add a workflow section that sequences the patterns (e.g., 'Start with layout.tsx → add pages → add Server Actions → optimize with Suspense') with validation checkpoints like checking for hydration mismatches.
Remove patterns that cover well-known Next.js basics (e.g., basic route handlers, simple metadata) and focus on non-obvious gotchas and advanced patterns that Claude is less likely to know.
Trim the 'When to Use This Skill' section — this belongs in frontmatter description, not the body content.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~400 lines) with 8 full patterns, many of which cover concepts Claude already knows well (basic Server Components, route handlers, metadata). The rendering modes table and file conventions are useful but the sheer volume of code examples covering standard Next.js patterns is excessive. The 'When to Use This Skill' section is unnecessary filler. | 2 / 3 |
Actionability | All code examples are fully executable TypeScript with proper imports, types, and realistic implementations. The patterns cover complete working examples including error handling, loading states, and cache invalidation — all copy-paste ready. | 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 SSR output, checking hydration errors), and no feedback loops for common failure modes like serialization boundary errors. | 2 / 3 |
Progressive Disclosure | Everything is inlined in a single monolithic file with no references to supporting documents. The 8 patterns, caching strategies, and best practices could easily be split into separate files. With no bundle files provided, there's no progressive structure at all — this is a wall of code examples. | 1 / 3 |
Total | 8 / 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 (538 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- wshobson/agents
- Commit
34632bc
- 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.