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.

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

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

A highly actionable, code-rich reference for the Next.js server/client component decision, with a clear decision tree and executable examples. Its weaknesses are verbosity from repetition and off-topic padding, and a monolithic structure with no progressive disclosure via bundle files.

Suggestions

Consolidate the repeated 'use client'/Suspense warnings into a single authoritative section and remove the off-topic TypeScript `any` lint material, which is not core to the server/client component choice.

Reconsider the 'CRITICAL PATTERN REQUIREMENT' demanding inline `(await searchParams).name` access — it reads as arbitrary stylistic preference rather than a Next.js requirement and adds tokens without teaching the decision.

Split the long-form anti-patterns and 'When Client Components ARE Appropriate' sections into a separate references file (e.g. references/anti-patterns.md) and link to it from SKILL.md to improve progressive disclosure.

Dimension	Reasoning	Score
Conciseness	Code examples are mostly lean, but the ~950-line body repeats the 'use client'/Suspense rules multiple times and includes off-topic padding (the TypeScript `any` lint section) plus an arbitrary 'inline access' pattern requirement framed as critical, so it could be tightened considerably.	3 / 5
Actionability	Abundant copy-paste-ready, executable TypeScript examples covering cookies, headers, searchParams, pathname, useSearchParams+Suspense, the React 'use' API, composition, and parallel fetching across the common cases.	5 / 5
Workflow Clarity	The Quick Decision Tree sequences the core server-vs-client choice unambiguously, but the skill is a reference guide rather than a checkpointed multi-step workflow; no destructive/batch operations are present so the validation cap does not apply.	4 / 5
Progressive Disclosure	The body is well-organized with clear section headers, but it is a monolithic ~950-line file with no bundle files (references/scripts/assets absent) and no one-level-deep references; substantial content (anti-patterns, 'when client components are appropriate') could be split into separate reference files.	3 / 5
	Total	15 / 20 Passed

Description

95%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 that concisely states the skill's purpose and provides comprehensive, natural trigger terms with an explicit activation clause. It uses third person throughout and clearly distinguishes its Next.js server/client-component niche.

Dimension	Reasoning	Score
Specificity	Lists several concrete actions (useSearchParams requiring Suspense + 'use client', navigation via Link/redirect/useRouter, cookies/headers access, avoiding mixing server/client APIs), but the lead framing 'Guide for choosing between...' is slightly abstract, keeping it just below comprehensive.	4 / 5
Completeness	Explicitly answers both 'what' (choosing between Server/Client Components in Next.js App Router) and 'when' ('Activates when prompt mentions...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Comprehensive natural trigger terms including synonyms and variations (useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, 'use client') that users would naturally say.	5 / 5
Distinctiveness Conflict Risk	Clear niche (Next.js App Router server/client component selection) with distinct, specific triggers and minimal overlap risk with other skills.	5 / 5
	Total	19 / 20 Passed

Validation

87%

Warnings & errors only

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

Criteria	Description	Result
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
Commit: 9dc2cb4

Reviewed: ~16 hours ago

Table of Contents

Discovery Implementation Validation

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.