tanstack-form
Handles form state management and Zod schema validation within Svelte 5 applications.
Install
mkdir -p .claude/skills/tanstack-form && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1563" && unzip -o skill.zip -d .claude/skills/tanstack-form && rm skill.zipInstalls to .claude/skills/tanstack-form
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use this skill when building or modifying forms with TanStack Form and Zod validation. Covers createForm, field-level validation, error handling, and mapping ProblemDetails API errors to form fields. Apply when adding new forms, implementing validation logic, or handling form submission in the Svelte frontend.Key capabilities
- →Manage form state using TanStack Form
- →Implement field-level validation with Zod schemas
- →Map API ProblemDetails errors to form fields
- →Handle form submission states and async operations
- →Integrate forms within Svelte components
How it works
It uses TanStack Form to manage state and Zod for validation, providing patterns to map backend error responses directly to UI fields.
Inputs & outputs
When to use tanstack-form
- →Creating complex forms
- →Validating user input with Zod
- →Managing form state in Svelte
- →Implementing form error handling
About this skill
TanStack Form
Use @tanstack/svelte-form with feature schemas derived from $generated/schemas. Extend schemas in feature-owned files; do not edit generated output.
Current examples
src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte: form creation, submission, field composition, and submitting state.src/Exceptionless.Web/ClientApp/src/lib/features/auth/schemas.ts: generated schema exports and feature-specific validation.src/Exceptionless.Web/ClientApp/src/lib/features/shared/validation.ts:ariaInvalid,mapFieldErrors, andproblemDetailsToFormErrors.
Follow the current implementations rather than duplicating form infrastructure. Map API ProblemDetails into field/form errors, retain entered values after failure, and close dialogs only after successful submission.
Use installed Field components with associated labels and validation attributes. Disable duplicate submission while pending. See shadcn-svelte for component composition.
Submission lifecycle
- Define typed default values and extend generated Zod schemas for feature-specific or cross-field constraints.
- Use the current form's synchronous validation hook for schema errors and asynchronous submission hook for the server operation. Follow the referenced implementation's hook contracts rather than moving API calls between hooks blindly.
- Await the operation. Map expected ProblemDetails with
problemDetailsToFormErrors; provide a form-level error for an unexpected failure without exposing internal details. - Connect field state through
ariaInvalidandmapFieldErrors. Display form-level errors as well as field errors so non-field failures remain visible. - Keep pending state active through required work. Preserve values on failure; reset, navigate, or close a dialog only after success and any required cache reconciliation.
Check invalid input, server rejection, repeated submission, and successful completion. A dialog closing is not by itself proof that the save succeeded.
When not to use it
- →When building forms outside of a Svelte 5 environment
- →When not using TanStack Form for state management
Prerequisites
Limitations
- →Relies on specific project structures for schema generation
- →Requires integration with existing UI component libraries
How it compares
It provides a standardized pattern for mapping complex API error structures to form fields, which is typically handled manually.
Compared to similar skills
tanstack-form side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| tanstack-form (this skill) | 16 | 3mo | No flags | Intermediate |
| svelte-ui-design | 23 | 10mo | No flags | Intermediate |
| tanstack-query | 7 | 3mo | No flags | Intermediate |
| svelte | 3 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by exceptionless
View all by exceptionless →You might also like
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.
tanstack-query
exceptionless
Data fetching and caching with TanStack Query in Svelte. Query patterns, mutations, cache invalidation, WebSocket-driven updates, and optimistic updates. Keywords: createQuery, createMutation, TanStack Query, query keys, cache invalidation, optimistic updates, refetch, stale time, @exceptionless/fetchclient, WebSocket
svelte
EpicenterHQ
Svelte 5 patterns including TanStack Query mutations, shadcn-svelte components, and component composition. Use when writing Svelte components, using TanStack Query, or working with shadcn-svelte UI.
svelte-migrate
temporalio
Migrate a Svelte 4 component to Svelte 5 runes syntax. Use when asked to migrate, convert, or upgrade a .svelte file to Svelte 5.
admin-crud-page
svelte-society
Create admin dashboard pages with tables, forms, and actions
component-builder
svelte-society
Create UI components using tailwind-variants for type-safe styling. Use when creating or editing components in src/lib/ui/.