safe-action-hooks — Claude Code skill for next-safe-action hooks

What safe-action-hooks does

The skill covers four hooks from next-safe-action/hooks: useAction, useOptimisticAction, useStateAction and useOptimisticStateAction. You pick by action kind first — .action() goes with the first two, .stateAction() with the other two. Each hook comes with a client component example: the "use client" directive, onSuccess and onError callbacks, a disabled button driven by isPending.

Queued writes get their own section. useOptimisticStateAction takes currentState and updateFn, then holds each dispatch until the previous one settles. The server sees the last confirmed state as prevResult. That matters for drag-to-reorder lists, Kanban boards, or any place where someone moves an item twice before the first save lands.

A few things will break it. currentState has to be a stable reference, because it is compared by identity. With <form action={formAction}> the server action must be a .stateAction(), and the input schema has to parse FormData — zod-form-data is the example given. The action also has to revalidate the state the page renders, otherwise the optimistic result drifts from what the page shows.

Install with npx skills add and the flag for your platform.