mcpField
T
tanstack-form

tanstack-form

github.com/exceptionlessDevelopment2.5k210 installsUpdated 1d ago
Repository

About tanstack-form

A skill for building forms with @tanstack/svelte-form in the described Svelte application. It documents schema validation, server-error handling, submission state, and success-only form transitions.

Key features

  1. 01Extend generated Zod schemas
  2. 02Separate synchronous validation and async submission
  3. 03Map ProblemDetails to form errors
  4. 04Preserve values after failures
  5. 05Handle pending and successful states

Use cases

  1. 01Add feature-specific form validation
  2. 02Display API field and form errors
  3. 03Prevent duplicate submissions
  4. 04Close dialogs only after successful saves

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/exceptionless/exceptionless --skill tanstack-form

After installing, type/tanstack-formin Claude Code to confirm it loaded.

Details

From the project README

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, and problemDetailsToFormErrors.

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

  1. Define typed default values and extend generated Zod schemas for feature-specific or cross-field constraints.
  2. 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.
  3. Await the operation. Map expected ProblemDetails with problemDetailsToFormErrors; provide a form-level error for an unexpected failure without exposing internal details.
  4. Connect field state through ariaInvalid and mapFieldErrors. Display form-level errors as well as field errors so non-field failures remain visible.
  5. 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.

Comments

Markdown supported