playbooks

home / skills / oimiragieo / agent-studio / form-and-actions-in-sveltekit

form-and-actions-in-sveltekit skill

/.claude/skills/form-and-actions-in-sveltekit

This skill helps enforce SvelteKit form actions and client-side validation with progressive enhancement, guiding server handling and refactoring for best

npx playbooks add skill oimiragieo/agent-studio --skill form-and-actions-in-sveltekit

Review the files below or copy the command above to add this skill to your agents.

Files (12)
SKILL.md
1.6 KB
---
name: form-and-actions-in-sveltekit
description: Describes Form and Actions implementations.
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit]
globs: '**/*.svelte'
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# Form And Actions In Sveltekit Skill

<identity>
You are a coding standards expert specializing in form and actions in sveltekit.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for guideline compliance
- Suggest improvements based on best practices
- Explain why certain patterns are preferred
- Help refactor code to meet standards
</capabilities>

<instructions>
When reviewing or writing code, apply these guidelines:

- Utilize SvelteKit's form actions for server-side form handling.
- Implement proper client-side form validation using Svelte's reactive declarations.
- Use progressive enhancement for JavaScript-optional form submissions.
  </instructions>

<examples>
Example usage:
```
User: "Review this code for form and actions in sveltekit compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]
```
</examples>

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Overview

This skill teaches practical patterns for building forms and actions in SvelteKit. It focuses on using SvelteKit form actions for server-side handling, applying reactive client-side validation, and enabling progressive enhancement so forms work without JavaScript. It is written for developers who want secure, maintainable, and accessible form workflows.

How this skill works

The skill inspects SvelteKit routes and +page/+server action handlers to verify correct use of actions and type-safe request handling. It checks client-side Svelte components for reactive validation, state management, and ARIA attributes. It also evaluates progressive enhancement by ensuring forms degrade gracefully when JavaScript is disabled and that fetch-based enhancements reuse the same action endpoints.

When to use it

  • When implementing form submissions that require server-side processing or validation
  • When converting legacy client-side form code to SvelteKit actions
  • When you need secure handling of form payloads and CSRF-safe interactions
  • When improving UX with progressive enhancement and reactive validation
  • When auditing accessibility and error handling for forms

Best practices

  • Define actions in +server.js/+server.ts and keep business logic server-side to avoid leaking secrets
  • Use Svelte reactive declarations ($:) to validate fields and compute derived form state
  • Return structured validation results from actions and render errors back into the form using load data or form stores
  • Make forms work without JavaScript by using native <form> submissions that target actions, then progressively enhance with fetch or form actions on the client
  • Avoid duplicating validation logic: share common validation between client and server or treat server as the source of truth for security

Example use cases

  • Contact form that validates email client-side, posts to an action, and returns success or field-level errors
  • Signup form that performs server-side uniqueness checks (username/email) and preserves input on error
  • Admin form that performs file uploads and processes data entirely in an action handler
  • Progressive checkout form where initial submission works with native form and optional JS enhances with optimistic UI

FAQ

Should I validate on client and server?

Yes. Client validation improves UX, but server validation is required for security and must be authoritative.

How do I preserve form state after a server error?

Return the submitted values and error map from the action and rehydrate the form fields from that response or use SvelteKit's form store.