agentleFS
Sign inStart free
gabriellstgabriellst/codm/.claude/skills/form/SKILL.md

form

Skill4 starsChanged 2 months agoMITView on GitHub

Create forms with TanStack Form and SDK validation. Single child — react (Base UI + Maskito). No astro variant — forms on landing pages should be implemented as React islands and follow the react child.

We split this skill into the rules it gives an agent

2 rules. 0 are common, 1 is distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 4 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    If the path is ambiguous, ask the user once and don't proceed until they answer.

    line 17
  2. Very specific:

    Native primitives win: Use the platform's input primitives (Base UI on react).

    line 25

“Common” is measured: kept by at least 6 in 10 of the 4 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Create Form (parent)

A form is the interactive surface between the user and an SDK mutation. It owns its field state via TanStack Form, validates against the same Zod schema the controller declared, and submits via an SDK mutation hook.

Platform routing (READ FIRST)

Working file pathUse
packages/app/react/**./react/SKILL.md + ./react/registry.yaml — TanStack Form + Base UI primitives, Maskito masks, Dialog forms
packages/app/astro/**No astro variant. Forms are an interactive concern; landing pages aren't where they belong. If a form genuinely needs to live on a marketing page (newsletter signup, contact form), implement it as a React island inside packages/app/astro/src/components/<Name>.tsx and follow the react/ child below — but most forms should live in packages/app/react/.

If the path is ambiguous, ask the user once and don't proceed until they answer.

Shared principles

  1. SDK schema is the single source of truth. Forms validate against xxxMutationRequestSchema from @codm/client-typescript/<service>. Never hand-roll validation rules.
  2. TanStack Form owns field state. useForm({ defaultValues, validators: { onChange: schema }, onSubmit }). Never useState for form values.
  3. Submit via the SDK mutation hook. On success: toast / Toast + queryClient.invalidateQueries({ queryKey: ... }). Never call fetch directly.
  4. Same Zod schema as the controller. That's the contract the backend enforces too.
  5. Native primitives win. Use the platform's input primitives (Base UI on react). Wrap in a FormField to wire id={field.name} + label.

When to use this skill

  • Adding a create / edit / delete form for any backend mutation.
  • Wrapping a single-step or multi-step wizard.

When NOT to use this skill

  • Building the dialog shell → /component (react).
  • Adding a read-only filter bar → /component.

Checklist (parent-level)

  • Platform identified from working directory (or asked the user).
  • Reading only the matching child SKILL + registry.
  • Form validates against the SDK request schema, no hand-rolled rules.
  • Submit goes through the SDK mutation hook + invalidates the relevant query keys.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free