CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

62

Quality

74%

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 ./tests/ext_conformance/artifacts/agents-wshobson/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md

The canonical home for this skill is nextjs-app-router-patterns in wshobson/agents

SKILL.md
Quality
Evals
Security

Quality

Content

65%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 content is a well-structured, actionable catalog of App Router patterns with executable code covering the common cases. Its main weaknesses are the lack of validation feedback loops in mutation workflows and zero progressive disclosure to separate reference files for a skill this size.

Suggestions

Add an explicit validate-fix-retry feedback loop to the Server Actions pattern (e.g. re-validate input on error before redirect) to lift workflow clarity above 3.

Split the detailed patterns into one-level-deep reference files (e.g. PATTERNS.md, CACHING.md) linked from a concise overview in SKILL.md to improve progressive disclosure.

Resolve the misleading Don't ("Don't pass serializable data") and clarify that non-serializable values cannot cross the Server→Client boundary, trimming confusion without adding length.

DimensionReasoningScore

Conciseness

The body is code-dense with lean prose and no padding about what Next.js or React is, but the ~340-line monolith and minor over-explanation in the Do's/Don'ts (e.g. the confusing "Don't pass serializable data" bullet) leave a little trimmable fat.

4 / 5

Actionability

Eight patterns plus quick start and caching provide concrete, real-API TypeScript code, but undefined helpers (getProducts, db, ProductCard, getPhoto) keep the snippets from being fully copy-paste runnable, so minor gaps remain.

4 / 5

Workflow Clarity

This is a patterns catalog rather than a sequenced workflow; the Server Action examples show rough validate-then-process-then-redirect flow and error handling, but there are no explicit validation checkpoints or validate-fix-retry feedback loops for the mutation patterns.

3 / 5

Progressive Disclosure

Section structure is clear (headers, tables, code blocks), but all eight patterns, caching strategies, and best practices are inlined in one ~340-line SKILL.md with no bundle files or one-level-deep references, fitting the "content that should be separate is inline" anchor.

3 / 5

Total

14

/

20

Passed

Description

83%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 is strong: it clearly answers both what and when with concrete, natural trigger phrases tied to a specific framework niche. It is slightly held back by the abstract verb "master" and minor overlap risk with broader React skills.

DimensionReasoningScore

Specificity

"Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching" names the domain plus four concrete capability areas, but "master" is an abstract verb and "advanced data fetching" is somewhat generic, so it stops short of comprehensive discrete actions.

4 / 5

Completeness

It explicitly states what the skill does ("Master Next.js 14+ App Router with...") and when to use it ("Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components") with concrete trigger phrases, matching the top anchor.

5 / 5

Trigger Term Quality

"building Next.js applications, implementing SSR/SSG, or optimizing React Server Components" supplies natural terms users would say, with good but not exhaustive coverage (e.g. "React"/"frontend" synonyms absent).

4 / 5

Distinctiveness Conflict Risk

"Next.js 14+ App Router" is a clear niche with distinct triggers, but "optimizing React Server Components" and "SSR/SSG" overlap slightly with general React or other framework skills, so minor conflict risk remains.

4 / 5

Total

17

/

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (544 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository
Dicklesworthstone/pi_agent_rust
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.