CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

nextjs-use-search-params-suspense

Pattern for using useSearchParams hook with Suspense boundary in Next.js. Covers the required combination of 'use client' directive and Suspense wrapper when accessing URL query parameters in client components. Use when building search interfaces, filters, pagination, or any feature that needs to read/manipulate URL query parameters client-side.

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-use-search-params-suspense/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

Highly actionable content with complete, executable examples and a useful mistake gallery, but severely over-invested in tokens: the same wrapper boilerplate is repeated across seven full code examples, and basic-knowledge sections (no-any, React 18 Suspense theory) pad the file. The monolithic single-file structure inlines an example gallery that should live in a reference file.

Suggestions

Cut redundant examples: keep one canonical pattern (single-file) plus one real-world example inline, and move the remaining examples (search, filters, pagination, debounce) to a references/examples.md file linked from a short '## Examples' section — this fixes both the conciseness and progressive-disclosure scores.

Remove the "TypeScript: NEVER Use `any` Type" section and the "Why Suspense?" explanation — Claude already knows not to use `any` and how React 18 Suspense works; keep only the non-obvious fact (Next.js requires the Suspense boundary).

Add the concrete failure signal (the Next.js build error emitted when useSearchParams lacks a Suspense boundary) so Claude can recognize and verify correct application of the pattern.

DimensionReasoningScore

Conciseness

At ~570 lines, the body is noticeably verbose with several padded sections: five-plus complete code examples (Single-File, Inline, three Real-World Examples, two Common Patterns) each repeat the identical 'use client'/Suspense wrapper boilerplate, "Why Suspense?" re-explains React 18 mechanics Claude already knows, and the "TypeScript: NEVER Use `any` Type" section teaches a basic TypeScript convention. Not anchor 1 because the bulk is executable code rather than prose conceptual padding.

2 / 5

Actionability

All examples are complete, executable, copy-paste-ready TypeScript covering the common cases: search, product filters, pagination, debounced input, multi-value reads via getAll(), and param updates via URLSearchParams + router.push. The ❌/✅ mistake pairs make correct vs. incorrect application unambiguous.

5 / 5

Workflow Clarity

The "Quick Checklist" section provides a clear ordered sequence (add 'use client', import Suspense, wrap the component, provide a fallback) and the single action — applying the pattern — is unambiguous. Minor gap: no verification guidance (e.g., the specific Next.js build error thrown when Suspense is missing) to confirm the pattern was applied correctly; no destructive or batch operations, so no validation cap applies.

4 / 5

Progressive Disclosure

No bundle files exist, so everything is inline in one monolithic 570-line file. Section headers are well-organized, but 200+ lines of the real-world example gallery (search, filters, pagination, debounce) are content that clearly belongs in a separate examples reference. This is anchor 3's "some structure but content that should be separate is inline" rather than anchor 2, since the internal structure and navigation are genuinely good.

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.

A strong description that clearly and explicitly states both what the skill covers and when to use it, with concrete technical terms and natural trigger phrases. The only weaknesses are minor: a few missing synonyms ("query params", "query string") and trigger terms broad enough to slightly overlap generic React/Next.js skills.

DimensionReasoningScore

Specificity

Lists several specific concrete actions: "using useSearchParams hook with Suspense boundary", "the required combination of 'use client' directive and Suspense wrapper", and "read/manipulate URL query parameters client-side". It stops short of anchor 5 because major capabilities from the body (updating params via useRouter, the server-component searchParams prop alternative) are not covered, but it exceeds anchor 3's 1-2 concrete actions.

4 / 5

Completeness

Explicitly answers both questions: the what ("Pattern for using useSearchParams hook with Suspense boundary in Next.js") and the when ("Use when building search interfaces, filters, pagination, or any feature that needs to read/manipulate URL query parameters client-side") with concrete trigger phrases, matching the anchor-5 example structure.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "search interfaces, filters, pagination", "URL query parameters", "Next.js", "client-side" — phrases users would actually say. Not anchor 5 because common variations like "query params", "query string", "URL parameters", or "App Router" are missing.

4 / 5

Distinctiveness Conflict Risk

A clear Next.js-specific niche with distinct triggers (useSearchParams, Suspense, URL query parameters), so mostly distinct. Minor overlap risk remains because "search interfaces, filters, pagination" are broad terms that could also match generic React or Next.js development skills.

4 / 5

Total

17

/

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 (574 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-use-search-params-suspense/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.