Form Builder

Build accessible, production-ready forms using Astro pages + interactive Svelte components.

When to Use

Activate when user asks to:

• Create any form (contact, signup, login, checkout, etc.)
• Add form validation
• Handle form submission
• Implement accessible error handling and focus management
• Add stable data-testid hooks for E2E tests

Stack

• Astro — pages/routing/layout
• Svelte — client-side form state + validation + API calls
• Tailwind CSS — consistent styling (dark theme)

Examples

• Svelte form component — full client-side pattern (validation, focus, submit lifecycle)
• Astro embedding — how to render and hydrate the form from an Astro page

Install

No additional libraries are required by this skill.

Use it in projects that already have Astro + Svelte set up; then follow these conventions:

• Astro pages embed interactive forms as Svelte components with a hydration directive (e.g. client:load).
• Svelte components manage their own form state, fieldErrors, and submitting state.
• Validate client-side for UX, but assume server-side validation remains authoritative.
• Use accessible error patterns (aria-invalid, aria-describedby, role="alert") and focus the first invalid field on submit.
• Add stable data-testid attributes for E2E tests.