server-actions-design

What problem does it solve?

This Skill solves the design confusion and security pitfalls of Next.js Server Actions by showing how to treat a function-like call as a public, invokable endpoint that must validate inputs, enforce authorization, and update cached UI correctly.

Core Features & Use Cases

• Contract clarity for 'use server': explains how the directive turns a server function into an invokable action callable from the browser.
• Progressive enhancement form integration: uses the HTML form action attribute so mutations work without JavaScript and upgrade cleanly with React.
• React 19 action state UX: shows how to use useActionState and useFormStatus for pending/validation-aware user interfaces.
• Mutation correctness with revalidation: covers when and how to apply revalidatePath, revalidateTag, and redirect after successful mutations.
• Security boundary discipline: details the required checks (authentication, authorization, runtime input validation) and common anti-patterns that create vulnerabilities.

Quick Start

Use this skill to design a secure “create comment” Server Action that validates input, authorizes the user, returns serializable results, and revalidates the affected post route after the mutation.