next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
Install with Tessl CLI
npx tessl i github:vercel-labs/next-skills --skill next-best-practicesOverall
score
65%
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillEvaluation — 90%
↑ 1.10xAgent success when using this skill
Validation for skill structure
Discovery
43%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 effectively lists specific Next.js capabilities and technical areas, demonstrating good domain knowledge. However, it critically lacks explicit trigger guidance ('Use when...') which would help Claude know when to select this skill over others. The description reads more like a feature list than a selection guide.
Suggestions
Add a 'Use when...' clause specifying triggers like 'when the user asks about Next.js projects, App Router, React Server Components, or Next.js-specific patterns'
Expand trigger terms to include common variations: 'React Server Components' (not just RSC), 'App Router', 'pages directory', 'next.config.js'
Clarify the scope to distinguish from general React skills, e.g., 'Next.js-specific patterns distinct from vanilla React'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and concepts: file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling. These are concrete, actionable areas within Next.js development. | 3 / 3 |
Completeness | Describes what the skill covers (Next.js best practices across various areas) but completely lacks a 'Use when...' clause or any explicit trigger guidance for when Claude should select this skill. | 1 / 3 |
Trigger Term Quality | Includes 'Next.js' as a strong trigger term and technical terms like 'RSC', 'route handlers', 'metadata' that developers would use. However, missing common variations like 'React Server Components' spelled out, 'App Router', 'pages router', or file extensions like '.tsx'. | 2 / 3 |
Distinctiveness Conflict Risk | The 'Next.js' focus provides some distinctiveness, but terms like 'data patterns', 'error handling', and 'bundling' are generic enough to potentially overlap with general React, JavaScript, or web development skills. | 2 / 3 |
Total | 8 / 12 Passed |
Implementation
73%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill excels as a well-organized index/navigation hub for Next.js best practices, with excellent progressive disclosure and token efficiency. However, it functions purely as a table of contents with no actionable content in the main file itself - all concrete guidance is delegated to referenced files, which limits its standalone utility.
Suggestions
Add a 'Quick Reference' section at the top with 2-3 most common patterns as executable code snippets (e.g., basic RSC boundary, async params usage)
Include a brief workflow section indicating the order to check these practices when reviewing/writing Next.js code (e.g., 'Start with RSC boundaries, then check async patterns, then...')
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely lean and efficient. No unnecessary explanations of what Next.js is or how React works. Every line points to specific, actionable content without padding. | 3 / 3 |
Actionability | The skill itself is a navigation hub with no executable code or concrete examples - all actionable content is delegated to referenced files. While the references are well-organized, the main file provides no copy-paste ready guidance. | 2 / 3 |
Workflow Clarity | Sections are logically organized by topic, but there's no sequencing guidance for when to apply which practices, no validation checkpoints, and no workflow for debugging or implementing these patterns in order. | 2 / 3 |
Progressive Disclosure | Excellent progressive disclosure with clear one-level-deep references. Each section provides a brief context hint (what's covered) before linking to detailed files. Navigation is intuitive and well-signaled. | 3 / 3 |
Total | 10 / 12 Passed |
Validation
63%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 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
body_examples | No examples detected (no code fences and no 'Example' wording) | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 10 / 16 Passed | |
- 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.