CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

nextjs-best-practices

Next.js App Router principles. Server Components, data fetching, routing patterns.

Quality

68%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/nextjs-best-practices/SKILL.md

The canonical home for this skill is nextjs-best-practices in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

67%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-organized, token-efficient reference card with a genuinely useful server-vs-client decision tree, but it is almost entirely principle statements: no executable code examples and several vague high-level bullets ('Handle errors gracefully', 'Analyze with bundle analyzer') leave the reader without concrete steps. Removing the basic-knowledge padding (HTTP verb table, filler 'When to Use' line) and adding a few short code snippets would lift it substantially.

Suggestions

Add small executable snippets for the key patterns — e.g. a 'use client' component example, fetch with { next: { revalidate: 60 } }, and a generateMetadata export — so the guidance is copy-paste ready.

Delete content Claude already knows: the GET/POST/PUT/DELETE verb table and generic bullets like 'Return proper status codes' and 'Handle errors gracefully'.

Remove the boilerplate 'When to Use' section ('This skill is applicable to execute the workflow or actions described in the overview.'), which adds no information, and replace vague directives like 'Analyze with bundle analyzer' with a specific command or config.

DimensionReasoningScore

Conciseness

The body is mostly a lean, dense reference (tables, a decision tree, short bullet lists) with little padding, but contains minor trimmable instances of over-explanation: the HTTP verb table ('GET | Read data', 'POST | Create data') re-teaches basic knowledge Claude already has, generic bullets like 'Handle errors gracefully' and 'Return proper status codes' add little, and the closing 'When to Use' line ('This skill is applicable to execute the workflow or actions described in the overview.') is filler. This matches anchor 4 ('minor instances of over-explanation that could be trimmed'), not 3, because the bulk is compact and non-redundant, and not 5 because of those few padded spots.

4 / 5

Actionability

Some guidance is concrete — the server-vs-client decision tree, the file-convention table (page.tsx, layout.tsx, loading.tsx, error.tsx), and route-organization patterns are specific and usable. However, there is no executable code anywhere (no 'use client' example, no fetch with { next: { revalidate: 60 } }, no generateMetadata snippet), and many bullets stay high-level ('Validate input with Zod', 'Provide blur placeholder', 'Analyze with bundle analyzer') without the specifics needed to execute. This matches anchor 3 ('Some concrete guidance but incomplete... missing key details'), not 4, because most sections describe principles rather than instruct with copy-ready snippets.

3 / 5

Workflow Clarity

The server-vs-client decision tree is a clear, unambiguous sequenced decision process, and the ten numbered sections are coherently organized; no destructive or batch operations exist, so validation checkpoints are not required. This fits anchor 4 (clear sequence, minor gaps) — not 5, because beyond the decision tree the skill presents principle lists ('Best Practices' bullets) with no sequencing or verification, and not 3, since the primary decision workflow is explicit and error-free to follow.

4 / 5

Progressive Disclosure

No bundle files exist (references/, scripts/, assets/ are absent, verified), and the single ~200-line SKILL.md is organized into ten clean, numbered sections with consistent headers and tables — good structure with content appropriately placed for a single-file skill, matching anchor 4. It is not 5 because everything is inline with no progressive layering or navigational pointers (acceptable at this size, but the skill is not a lean overview pointing to detail files), and the boilerplate 'When to Use' section adds navigational noise; not 3, because nothing that clearly belongs in a separate file is buried.

4 / 5

Total

15

/

20

Passed

Description

56%Weight 40%Scale 1-5

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 identifies a specific and distinctive domain (Next.js App Router) but reads as a topic list rather than a capability statement: it has no action verbs and no 'Use when...' trigger clause, capping completeness at 3. Trigger terms are good but lack common variations like 'Client Components', 'React', or 'SSR'.

Suggestions

Add an explicit trigger clause, e.g. 'Use when building or refactoring Next.js App Router applications, deciding between Server and Client Components, or configuring caching and data fetching.'

Replace topic nouns with concrete action verbs, e.g. 'Guides component architecture decisions, data fetching, routing conventions, and caching configuration for Next.js App Router projects.'

Include common trigger variations users would actually say, such as 'Client Components', 'use client', 'React', 'SSR', 'server actions', and 'page.tsx / layout.tsx'.

DimensionReasoningScore

Specificity

The description names a concrete domain ('Next.js App Router principles. Server Components, data fetching, routing patterns.') but contains no action verbs whatsoever — it lists topic labels rather than concrete actions the skill performs. It matches anchor 2 ('Names the domain but actions are minimal or generic'), not 1 because the domain is specific rather than vague, and not 3 because no concrete actions are stated.

2 / 5

Completeness

The 'what' is reasonably clear (Next.js App Router development principles across server components, data fetching, and routing), but no 'when' is present — there is no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines. It is not 2 because the 'what' is domain-specific and discernible rather than vague.

3 / 5

Trigger Term Quality

Natural terms users would say are present: 'Next.js', 'App Router', 'Server Components', 'data fetching', 'routing'. Coverage is good but misses common variations such as 'Client Components', 'React', 'SSR', or file conventions like 'page.tsx', so it falls short of anchor 5's synonym/extension-level coverage while exceeding anchor 3's sparse-keyword example.

4 / 5

Distinctiveness Conflict Risk

'Next.js App Router' is a clear, specific niche that is distinct from general React or web-framework skills. Generic phrases like 'data fetching' and 'routing patterns' create minor overlap risk with general web-development skills, keeping it at anchor 4 rather than anchor 5's minimal-conflict standard.

4 / 5

Total

13

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

plugins/AI-Agents-Safe-Coding-Skills-claude/skills/nextjs-best-practices/SKILL.md

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.