next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
62
45%
Does it follow best practices?
Impact
90%
1.09xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/next-best-practices/SKILL.mdQuality
Discovery
32%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description reads as a comma-separated list of Next.js topics rather than a proper skill description. It lacks action verbs describing what the skill does and completely omits any 'Use when...' guidance for skill selection. While the Next.js domain focus provides some distinctiveness, the generic topic terms risk overlap with other web development skills.
Suggestions
Add a 'Use when...' clause with explicit triggers, e.g., 'Use when building or reviewing Next.js applications, App Router projects, or when the user asks about server components, routing, or Next.js configuration.'
Replace the topic list with concrete action verbs, e.g., 'Guides implementation of Next.js file conventions, configures React Server Component boundaries, sets up route handlers and API routes, optimizes images and fonts with next/image and next/font.'
Expand trigger terms to include common user phrasings like 'React Server Components', 'App Router', 'server actions', 'next/image', 'next/font', 'loading.tsx', 'layout.tsx', and 'middleware'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names the domain (Next.js) and lists several specific topic areas (RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling), but these read more as a list of topics than concrete actions. There are no verbs describing what the skill actually does (e.g., 'configures', 'generates', 'validates'). | 2 / 3 |
Completeness | The description partially addresses 'what' (Next.js best practices across various areas) but completely lacks any 'when' clause or explicit trigger guidance. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and since the 'what' is also weak (topic list rather than actions), this scores a 1. | 1 / 3 |
Trigger Term Quality | Includes relevant keywords like 'Next.js', 'RSC', 'route handlers', 'image/font optimization', 'metadata', and 'error handling' that users might mention. However, it misses common variations and natural phrasings users would say (e.g., 'server components', 'React Server Components', 'App Router', 'pages directory', 'next/image', 'loading states'). | 2 / 3 |
Distinctiveness Conflict Risk | The Next.js focus provides some distinctiveness, but terms like 'error handling', 'data patterns', 'bundling', and 'metadata' are very generic and could easily overlap with general React skills, general web development skills, or other framework-specific skills. | 2 / 3 |
Total | 7 / 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.
This SKILL.md excels as a navigation hub — it's extremely concise and perfectly structured for progressive disclosure across many sub-topics. However, it provides essentially zero actionable content on its own; it's entirely dependent on the referenced files (which were not provided for evaluation). The skill would benefit from at least a minimal quick-start section with concrete, executable guidance directly in the main file.
Suggestions
Add a 'Quick Start' or 'Key Rules' section at the top with 3-5 of the most critical, concrete rules (e.g., 'Always use `next/image` over `<img>`', 'Never use async in client components') so the SKILL.md is actionable even without loading sub-files.
Include at least one executable code example in the main file — for instance, a minimal RSC boundary pattern or async params migration example — to raise actionability from purely referential to immediately useful.
Consider adding a brief workflow for common tasks (e.g., 'When creating a new route: 1. Create page.tsx, 2. Add error.tsx, 3. Add loading.tsx') to improve workflow clarity.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely lean — the SKILL.md is essentially a table of contents with one-line descriptions and links to detailed files. No unnecessary explanations, no concepts Claude already knows. Every token serves as navigation. | 3 / 3 |
Actionability | The SKILL.md itself contains zero executable code, commands, or concrete guidance. It is entirely composed of references to other files. Without the bundle files, there is nothing actionable in this document alone. | 1 / 3 |
Workflow Clarity | The sections are logically organized and clearly labeled, providing a reasonable mental model of Next.js concerns. However, there are no multi-step workflows, validation checkpoints, or sequenced processes described — it's purely a directory of topics. | 2 / 3 |
Progressive Disclosure | This is a textbook example of progressive disclosure: a concise overview with well-signaled, one-level-deep references to specific topic files. Each section clearly describes what the linked file covers, making navigation easy and predictable. | 3 / 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 |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- vercel-labs/next-skills
- Commit
dc1de9c
- 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.