AgentSkillsCN

astro-actions

专家 Astro 服务器动作——defineAction、astro:actions、Zod 验证、ActionError、HTML 表单动作、接受表单、渐进增强、重定向模式。适用于处理表单提交、突变或任何具有类型安全的服务器端逻辑时使用。

SKILL.md
--- frontmatter
name: astro-actions
description: Expert Astro Server Actions — defineAction, astro:actions, Zod validation, ActionError, HTML form actions, accept form, progressive enhancement, redirect patterns. Use when handling form submissions, mutations, or any server-side logic with type safety.
versions:
  astro: 6
  zod: 4
user-invocable: true
references: references/overview.md, references/defining-actions.md, references/error-handling.md, references/forms.md, references/progressive-enhancement.md, references/templates/contact-form.md, references/templates/json-action.md
related-skills: astro-6, astro-content, astro-islands

Astro Actions Expert

Type-safe server functions with automatic validation, standardized errors, and progressive enhancement.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

  1. fuse-ai-pilot:explore-codebase - Check existing actions in src/actions/
  2. fuse-ai-pilot:research-expert - Verify latest Actions docs via Context7/Exa
  3. mcp__context7__query-docs - Get defineAction and ActionError examples

After implementation, run fuse-ai-pilot:sniper for validation.


Overview

When to Use

  • Handling form submissions with server-side validation
  • Creating type-safe backend mutations without API boilerplate
  • Building progressive enhancement (works without JS)
  • Replacing API endpoints for client-server communication

Why Astro Actions

FeatureBenefit
defineAction()Type-safe server function definition
Zod validationAutomatic JSON and FormData parsing
ActionErrorStandardized error codes and messages
accept: 'form'Direct HTML form submission support
Progressive enhancementWorks without JavaScript enabled
astro:actionsClient import for type-safe calls

Core Concepts

Action Structure

All actions live in src/actions/index.ts and export a server object:

typescript
// src/actions/index.ts
import { defineAction } from 'astro:actions';
import { z } from 'astro/zod';

export const server = {
  myAction: defineAction({ /* ... */ })
}

Accept Modes

ModeDescription
accept: 'json' (default)Parses JSON request body
accept: 'form'Parses HTML FormData directly

Error Codes

Standard HTTP-aligned codes: UNAUTHORIZED, FORBIDDEN, NOT_FOUND, BAD_REQUEST, INTERNAL_SERVER_ERROR, CONFLICT, TOO_MANY_REQUESTS.


Reference Guide

NeedReference
Concepts & architectureoverview.md
defineAction patternsdefining-actions.md
ActionError handlingerror-handling.md
HTML form integrationforms.md
Progressive enhancementprogressive-enhancement.md
Contact form templatetemplates/contact-form.md
JSON action templatetemplates/json-action.md

Best Practices

  1. Always define input schema — Never skip Zod validation
  2. Use ActionError for known errors — Standardized codes for client handling
  3. accept: 'form' for HTML forms — Native form submission support
  4. Progressive enhancement — Form works without JS, enhanced with it
  5. Check ctx.cookies for auth — Throw UNAUTHORIZED when not logged in