CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

nextjs-client-cookie-pattern

Pattern for client components calling server actions to set cookies in Next.js. Covers the two-file pattern of a client component with user interaction (onClick, form submission) that calls a server action to modify cookies. Use when building features like authentication, preferences, or session management where client-side triggers need to set/modify server-side cookies.

63

Quality

79%

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-client-cookie-pattern/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.

The body delivers fully executable, copy-paste-ready code covering the common Next.js cookie scenarios, but at roughly twice the necessary length: repeated example variants, a redundant summary, and explanations of basics Claude already knows pad it out, and all example material is inlined rather than split into reference files. Trimming to one canonical example plus moving variants to references would preserve its strengths.

Suggestions

Cut the three Real-World Examples down to one canonical example inline and move the theme-toggle, consent-banner, and language-selector variants into a references/EXAMPLES.md, removing the near-duplicate cookieStore.set blocks.

Delete sections that restate what Claude already knows: the 'Why This Pattern?' explanation of browser cookie restrictions, the generic 'NEVER use any' TypeScript section, and the closing Summary that repeats the Pattern Overview.

Collapse 'The Pattern' sketch into the Complete Implementation section so the two-file structure is shown once with code instead of twice.

DimensionReasoningScore

Conciseness

Noticeably verbose: three "Real-World Examples" each repeat the same cookieStore.set pattern, "The Pattern" section restates what "Complete Implementation" then shows in code, the Summary repeats the overview, and sections explain knowledge Claude already has (why browsers restrict cookie manipulation, a generic "NEVER use any" TypeScript rule). Not 3 because the padding is pervasive across multiple sections rather than a few instances; not 1 because the core instruction is genuinely useful and code-focused.

2 / 5

Actionability

All code is complete, executable, and copy-paste ready: a full client component and server action pair, plus working variants for form submission, redirect-after-login, and reading cookies on both server and client. The common cases (onClick, form, theme/language preference, consent banner) are covered with specific options objects. Nothing is pseudocode or hand-wavy.

5 / 5

Workflow Clarity

The two-file pattern is clearly sequenced (client component with handler → server action file → import and call), reinforced by a Quick Checklist and a File Structure diagram. Not 5 because there are no validation or verification checkpoints (e.g. confirming the action fires or the cookie appears); the 5 anchor demands explicit validation steps and error-recovery loops.

4 / 5

Progressive Disclosure

Section headers and code fences make the document navigable, but everything lives in one ~390-line SKILL.md with no references at all: the three Real-World Examples (~115 lines), the route-handler alternative, and the cookie-reading section are inlined content that belongs in one-level-deep reference files. Not 4 because content that should be split out is inline; not 2 because the structure itself is clear and well-organized rather than minimal.

3 / 5

Total

14

/

20

Passed

Description

87%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 explicitly states both what the skill covers and when to use it, with natural trigger terms and a clearly delineated niche. Its only weakness is that the stated capabilities are variations of one action (set/modify cookies) rather than a broader set of concrete actions.

DimensionReasoningScore

Specificity

The description names concrete mechanisms — "client component with user interaction (onClick, form submission) that calls a server action to modify cookies" — but its coverage is a single capability (set/modify cookies) described from several angles rather than the multiple distinct actions of the 5 anchor. Not 3 because it goes beyond naming the domain to specify the two-file mechanism and interaction triggers.

4 / 5

Completeness

Both questions are answered explicitly: what ("Pattern for client components calling server actions to set cookies in Next.js... two-file pattern") and when ("Use when building features like authentication, preferences, or session management where client-side triggers need to set/modify server-side cookies"). The 'when' clause is explicit with concrete trigger scenarios, matching the 5 anchor; the 4 anchor requires a weaker or less specific 'when', which this does not.

5 / 5

Trigger Term Quality

Good keyword coverage with natural phrases users would say: "client components", "server actions", "set cookies", "Next.js", "authentication", "preferences", "session management". A few natural terms are missing (e.g. "App Router", "set cookie on button click", "cookie consent"), keeping it below the comprehensive 5 anchor.

4 / 5

Distinctiveness Conflict Risk

The description carves out a clear niche (Next.js client-component-to-server-action cookie setting) with distinct triggers (authentication, preferences, session management). Minimal overlap risk with generic cookie or React skills; the 4 anchor's "minor overlap risk with closely related skills" is less accurate than the clear-niche 5 anchor.

5 / 5

Total

18

/

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

allowed_tools_field

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

Warning

Total

15

/

16

Passed

Repository

AzizBelhassan/timeverse

Path

.agents/skills/nextjs-client-cookie-pattern/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.