gh-djankies-claude-configs-react-19/skills/implementing-server-actions/SKILL.md

name, description, allowed-tools, version

name	description	allowed-tools	version
implementing-server-actions	Teaches Server Actions in React 19 for form handling and data mutations. Use when implementing forms, mutations, or server-side logic. Server Actions are async functions marked with 'use server'.	Read, Write, Edit	1.0.0

Server Actions

Server Actions are async functions executed on the server, callable from Client Components.

Key Concepts

Defining Server Actions:

'use server';

export async function createUser(formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  const user = await db.users.create({ name, email });
  return { success: true, userId: user.id };
}

Using in Forms:

'use client';

import { createUser } from './actions';

function SignupForm() {
  return (
    <form action={createUser}>
      <input name="name" required />
      <input name="email" type="email" required />
      <button type="submit">Sign Up</button>
    </form>
  );
}

Security Requirements

MUST validate all inputs:

'use server';

import { z } from 'zod';

const schema = z.object({
  name: z.string().min(2).max(50),
  email: z.string().email(),
});

export async function createUser(formData) {
  const result = schema.safeParse({
    name: formData.get('name'),
    email: formData.get('email'),
  });

  if (!result.success) {
    return { error: result.error.flatten().fieldErrors };
  }

  const user = await db.users.create(result.data);
  return { success: true, userId: user.id };
}

MUST check authentication:

'use server';

export async function deletePost(postId) {
  const session = await getSession();

  if (!session?.user) {
    throw new Error('Unauthorized');
  }

  const post = await db.posts.findUnique({ where: { id: postId } });

  if (post.authorId !== session.user.id) {
    throw new Error('Forbidden');
  }

  await db.posts.delete({ where: { id: postId } });
  return { success: true };
}

Progressive Enhancement

Server Actions work before JavaScript loads:

'use client';

import { useActionState } from 'react';
import { submitForm } from './actions';

function Form() {
  const [state, formAction] = useActionState(
    submitForm,
    null,
    '/api/submit'
  );

  return <form action={formAction}>...</form>;
}

For comprehensive Server Actions documentation, see: research/react-19-comprehensive.md lines 644-733.

Related Skills

Zod v4 Error Handling:

• handling-zod-errors skill from the zod-4 plugin - SafeParse pattern, error flattening, and user-friendly error messages for server action validation

Prisma 6 Integration:

• If setting up PrismaClient singleton pattern for Server Actions in serverless Next.js, use the creating-client-singletons skill from prisma-6 for proper initialization preventing connection pool exhaustion.
• If validating database inputs in server actions, use the validating-query-inputs skill from prisma-6 for Zod validation pipeline patterns
• If ensuring type-safe Prisma queries with GetPayload patterns, use the ensuring-query-type-safety skill from prisma-6 for type-safe database operations
• For multi-step mutations and complex database operations, use the handling-transaction-errors skill from prisma-6 for comprehensive transaction error handling in server actions