Skip to main content
skill CX Codex

safe-action-client — Claude Code skill: what it does, how to install

Guides agents in configuring next-safe-action clients and defining type-safe Next.js server actions with input schemas and structured error returns.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add next-safe-action/skills --skill safe-action-client -a claude-code
Open on GitHub

What safe-action-client does

This skill guides coding assistants through setting up createSafeActionClient and building server actions with Standard Schema validators like Zod or Valibot. It enforces the immutable chaining order, sequencing middleware, schema definitions, and action handlers properly.

The model stops omitting the "use server" declaration at the top of action modules. If defineMetadataSchema is configured on the client, skipping .metadata() before .action() triggers a TypeScript compiler error immediately.

It also clarifies server error mechanics. Instead of returning plain objects, the assistant uses returnValidationErrors for form fields and returnServerError for anticipated domain issues.

What it helps with

  • configure createSafeActionClient with input and output schemas
  • attach pre-validation and post-validation middleware to the client chain
  • return typed field-level validation errors using returnValidationErrors
  • define stateful actions for optimistic UI updates via stateAction

Example prompts for the agent

  • Set up a createSafeActionClient instance in src/lib/safe-action.ts with custom metadata validation.
  • Create a Next.js server action validating email input with Zod and returning returnValidationErrors if already taken.
  • Build a state action using stateAction to manage an optimistic counter.

How to install safe-action-client

1Skills CLI (Vercel)

npx skills add next-safe-action/skills --skill safe-action-client -a claude-code

2Manually: put the files in place

~/.claude/skills/safe-action-client/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/safe-action-client/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about safe-action-client

How to install safe-action-client in Claude Code?

Run npx skills add next-safe-action/skills --skill safe-action-client -a claude-code in your terminal. This writes the skill file to ~/.claude/skills/safe-action-client/SKILL.md.

What does safe-action-client do?

It teaches coding assistants the chaining syntax and error handling conventions of next-safe-action. This prevents common bugs like omitted server directives or untyped error payloads.

How does it handle expected business errors?

For standard application failures that pass schema validation, the skill directs the assistant to call returnServerError with a typed payload.

Similar skills

All skills for Backend and APIs →

From the same set9

safe-action-middleware A skill that walks your agent through writing next-safe-action middleware: auth, authorization, logging, rate limits and context extension. CX Codex +1 1,200installs safe-action-validation-errors Guides coding assistants on handling input and manual validation errors in next-safe-action. Useful when writing server actions and UI error displays. CX Codex +1 1,200installs safe-action-advanced This skill covers advanced next-safe-action patterns for bound inputs, metadata, framework errors, inferred types, and server callbacks. CX Codex +1 1,200installs safe-action-hooks A skill that tells your agent which next-safe-action hook fits a form or optimistic UI, and how to wire it to the server action. CX Codex +1 1,200installs safe-action-forms This skill guides next-safe-action form integrations, from native HTML submission to React Hook Form, optimistic updates, and file uploads. CX Codex +1 1,200installs safe-action-testing Tells the agent how to write Vitest tests for next-safe-action actions and hooks: validation, middleware, server errors. CX Codex +1 1,100installs safe-action-better-auth This skill wires Better Auth into next-safe-action: the middleware fetches the session, rejects unauthenticated calls and hands you a typed context. CX Codex +1 477installs safe-action-tanstack-query Connects next-safe-action mutations to TanStack Query with typed error handling, cache updates, and invalidation. Use it when React Query already handles your client data. CX Codex +1 438installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor