skills.rest
webdevcody
webdevcodyCOMMUNITY
Explore all skills by this author →
Website𝕏@webdevcodyGitHub

add-form

Scaffold create/edit form flows in TanStack Start apps with shared Zod schemas.

22|3|Updated Jul 28, 2024
Search Tags:#tanstack start#zod#server actions#cache invalidation#shadcn ui#react-hook-form#form scaffolding
One-click install
npx skills add https://github.com/webdevcody/go-mailing-list --skill add-form-webdevcody
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-form
Source: https://github.com/webdevcody/go-mailing-list/tree/main/.claude/skills/add-form
Command: npx skills add https://github.com/webdevcody/go-mailing-list --skill add-form-webdevcody

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents client/server form validation drift by ensuring the same Zod schema drives both the UI resolver and the server-side input validation. It also standardizes UX patterns like pending states, field-level error rendering, and post-mutation invalidations so list pages refresh reliably after submissions.

Core Features & Use Cases

  • Shared schema on both sides: Define a single Zod schema once and reuse it in both the client form resolver and the server function validator.
  • Convention-aware form scaffolding: Detect whether the project uses react-hook-form (typical shadcn setup) or TanStack Form, then generate the form using the matching primitives and patterns already present.
  • End-to-end wiring: Create a server function in src/fn/ that calls the appropriate use-case/data-access function, then connect it with a mutation that handles pending state, success toasts, error toasts, and query invalidations.
  • Security guardrails: Never trust ownership/author IDs from form input; assign/derive them server-side from the authenticated session helper used by the project.
  • Layer discipline: Do not write db.insert/Drizzle calls directly inside server functions; route persistence through the data-access layer.

Quick Start

Ask the Skill to scaffold a form for creating or editing your entity by specifying the route/page location, the exact fields (types and required/optional), and what should happen on success.

Frequently Asked Questions about add-form

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share Zod form validation between client and server in TanStack Start?▼

To share Zod form validation, define a single Zod schema and reuse it as both the client resolver and the server function validator. This prevents validation drift and ensures both sides enforce identical rules.

What is the best way to scaffold a create or edit form with shadcn UI and react-hook-form?▼

Scaffolding a create or edit form with shadcn UI involves using react-hook-form matched with a shared Zod resolver. This generates form primitives with field-level error messages and built-in pending state handling.

How do I handle TanStack Start server function mutations and query cache invalidation?▼

Handling TanStack Start server function mutations requires routing persistence through a data-access layer, then wiring the mutation to trigger query cache invalidation and display success or error toasts on completion.

Does this form scaffolding approach support TanStack Form or only react-hook-form?▼

The form scaffolding approach supports both. It detects whether your project uses react-hook-form or TanStack Form, then generates the matching form primitives and patterns already present in your codebase.

Why should ownership IDs be derived from the session instead of form input?▼

Ownership IDs must be derived from the session to maintain security guardrails. Trusting author IDs from form input allows malicious users to spoof ownership, whereas server-side session derivation ensures secure data mutations.

How do I keep Drizzle database writes out of TanStack Start server functions?▼

To keep Drizzle database writes out of server functions, enforce layer discipline by routing all db.insert calls through a dedicated data-access layer. The server function should only call this data-access layer.

Related Skills

Explore More Software Engineering Skills→
damandeep611damandeep611

agentic-jumpstart-react

Provide React 19 patterns for TanStack Start apps with shadcn/ui and TanStack Query.

Community
Advanced
greyhaven-aigreyhaven-ai
29

grey-haven-tanstack-patterns

Standardize TanStack Start, Router, and Query patterns in React 19 applications.

Community
Intermediate
sgcarstrendssgcarstrends
21

server-actions

Create or update Next.js server actions with Zod validation and cache revalidation.

Official
Advanced
ngocnhanvongocnhanvo

forms

Create and validate React forms with react-hook-form and shadcn/ui.

Community
Intermediate