CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

nextjs-server-client-components

Guide for choosing between Server Components and Client Components in Next.js App Router. CRITICAL for useSearchParams (requires Suspense + 'use client'), navigation (Link, redirect, useRouter), cookies/headers access, and 'use client' directive. Activates when prompt mentions useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, or 'use client'. Essential for avoiding mixing server/client APIs.

61

Quality

77%

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 ./.agents/skills/nextjs-server-client-components/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

50%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 highly actionable on Next.js-specific topics (executable code, correct/wrong contrasts, a decision tree) but is severely bloated with generic React knowledge Claude already possesses, contains contradictory searchParams pattern guidance, and crams everything into a single ~950-line file with no progressive disclosure. It would benefit most from aggressive trimming and moving detail patterns into reference files.

Suggestions

Cut the generic React sections (useState counter, ContactForm, LiveChat WebSocket, GeolocationDisplay, confetti button, ThemeProvider) and the bulleted 'Need React hooks / Browser-only APIs' lists — Claude already knows when interactivity requires a Client Component; keep only the Next.js-specific rules (async cookies()/params/searchParams in 15+, Suspense + 'use client' for useSearchParams, composition over import).

Resolve the contradictory searchParams guidance: one section mandates destructuring ('you MUST use destructuring to keep the searchParams identifier visible') while a later section marks destructuring '❌ WRONG / Not preferred' — pick one pattern, state it once, and either justify or delete the 'satisfies code review and testing patterns' rationale.

Move the secondary detail (React 'use' API variants, composition pattern, the five client-component use-case examples, anti-pattern catalog) into a references/ file, leaving SKILL.md as a concise overview with well-signaled one-level-deep references.

DimensionReasoningScore

Conciseness

The ~950-line body spends hundreds of lines teaching React fundamentals Claude already knows: a useState counter, a controlled ContactForm, a WebSocket LiveChat, GeolocationDisplay, a confetti button, a ThemeProvider, plus generic lists like 'Need React hooks (useState, useEffect, useContext, etc.)' and 'Browser-only APIs (window, localStorage, navigator)'. This goes beyond anchor 2's 'several unnecessary explanations', but the genuinely Next.js-specific material (async cookies() in Next.js 15+, searchParams as Promise, Suspense requirement for useSearchParams) prevents a score of 1.

2 / 5

Actionability

The body provides extensive concrete, near copy-paste-ready TypeScript with explicit correct/wrong contrasts for cookies, headers, searchParams, params, and Suspense wrapping. It is not a 5 because many blocks depend on undefined helpers (fetchUser(), fetchProducts(), searchProducts(), a Product type), the ThemeProvider drops its children type, and the 'Testing Component Type' section is commentary rather than executable guidance — matching anchor 4's 'minor gaps'.

4 / 5

Workflow Clarity

The Quick Decision Tree gives a clear decision flow and the skill involves no destructive/batch operations needing validation, but the searchParams guidance is internally contradictory: 'you MUST use destructuring to keep the searchParams identifier visible' is followed later by '❌ WRONG: Destructuring... Not preferred', with an opaque rationale ('Satisfies code review and testing patterns'). This leaves the reader uncertain which pattern to follow, matching anchor 3 rather than 4.

3 / 5

Progressive Disclosure

Section headers and the decision tree give the document real structure, but it is a ~950-line monolith with no bundle files at all: the React 'use' API details, composition patterns, the five 'When Client Components ARE Appropriate' sections, and all anti-patterns are inlined rather than split into reference files, and the only external pointer ('see Advanced Routing skill') references a sibling skill not in this bundle. This matches anchor 3's 'content that should be separate is inline', and is not anchor 2 because structure is present and clearly labeled.

3 / 5

Total

12

/

20

Passed

Description

96%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.

A strong description: it states concrete capabilities with specific technical requirements and provides an explicit, comprehensive activation clause full of natural trigger terms. The only weakness is minor overlap risk with a sibling routing skill on broad terms like 'navigation' and 'routing'.

DimensionReasoningScore

Specificity

The description names the domain ('choosing between Server Components and Client Components in Next.js App Router') and lists multiple concrete capabilities with specific requirements attached: 'useSearchParams (requires Suspense + 'use client')', 'navigation (Link, redirect, useRouter)', 'cookies/headers access', and the ''use client' directive'. Coverage is comprehensive for this domain, matching anchor 5 rather than anchor 4's 'minor gaps'.

5 / 5

Completeness

It explicitly answers both what ('Guide for choosing between Server Components and Client Components... CRITICAL for useSearchParams... navigation... cookies/headers access') and when ('Activates when prompt mentions...') with concrete trigger phrases. This matches anchor 5 exactly; it is not 4 because the when-clause is fully explicit rather than vague.

5 / 5

Trigger Term Quality

The explicit activation clause covers twelve natural terms users would actually say: 'useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, or 'use client''. This includes hook names, the directive, and routing vocabulary; only trivial variants (e.g., useRouter) are omitted, which does not rise to anchor 4's 'a few natural terms missing'.

5 / 5

Distinctiveness Conflict Risk

The niche is tightly defined by Next.js-specific APIs (useSearchParams, 'use client', cookies/headers), but broad trigger terms like 'navigation', 'routing', and 'redirect' could also plausibly activate a sibling Next.js routing skill — the body itself references an 'Advanced Routing skill' — giving minor overlap risk with closely related skills, which matches anchor 4.

4 / 5

Total

19

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

Total

14

/

16

Passed

Repository

AzizBelhassan/timeverse

Path

.agents/skills/nextjs-server-client-components/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.