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.
npx skills add next-safe-action/skills --skill safe-action-client -a claude-codeWhat 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
createSafeActionClientwith 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
createSafeActionClientinstance insrc/lib/safe-action.tswith custom metadata validation. - Create a Next.js server action validating email input with Zod and returning
returnValidationErrorsif already taken. - Build a state action using
stateActionto 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-code2Manually: put the files in place
~/.claude/skills/safe-action-client/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/safe-action-client/
1Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-client -a codex2Manually: put the files in place
.agents/skills/safe-action-client/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-client -a cursor2Manually: put the files in place
.cursor/skills/safe-action-client/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install next-safe-action/skills safe-action-client2Manually: put the files in place
.github/skills/safe-action-client/SKILL.md1Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-client -a gemini-cli2Platform CLI
gemini skills install https://github.com/next-safe-action/skills --path skills/safe-action-clientManually: put the files in place
.devin/skills/safe-action-client/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-client -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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.