/react-forms

Make it your own.

In Claude Code, use the slash command and add your context. In Codex, select react-forms from the just-vibe skill picker, then send the same brief.

Version 0.11.0 also supports /jv react-forms, /just-vibe react-forms and /jv:react-forms in Claude. See shortcut setup and context examples.

What the agent does

1. Reuse the project's form conventions and separate client-side convenience validation from server authority.
2. Model editing, validating, submitting, rejected and successful states; preserve entered values after failures and prevent unintended duplicate submissions.
3. Map server field and global errors to usable focus and announcements, and verify them.

Inputs

• fields, validation rules, submission contract, and accessibility requirements.

Optional context: scope, references, constraints, successCriteria, environment, mode, budget.

Scope

Reads

Input state, validation, submission, errors, pending/success, and recovery.

Writes

Apply: only the requested local changes and relevant isolated verification. Inspect/plan requests remain inspection/planning. External actions require their exact action and target in session authorization.

Mode

Apply; fields, validation rules, submission contract, and accessibility requirements.

Prerequisites

Component source, React/framework versions, state/data conventions, and relevant test tooling. Browser/profiler evidence is needed for measured rendering claims. Preserve existing framework and state libraries unless changing them is part of the request.

Expected output

• Form implementation with its field/error contract and submission state machine, and keyboard and server-failure checks.

How the work is checked

• Invalid input is actionable without losing data; server rejection and double submission have deliberate outcomes.
• A server rejection under a form Action retains the entered field values.

When to stop or clarify

• Do not invent business validation or trust client validation as authorization. Real submissions use only the authorized environment.

Handling missing context

Infer

Read component callers, ownership of state, installed React/framework versions and existing interaction tests.

Assume

Retain the framework and state library; preserve intended loading/error/empty behavior while resolving the named bug.

Ask

Ask when product semantics such as persistence, optimistic failure or reset behavior have conflicting evidence; missing profiler access only blocks measured performance claims.

Technical guidance

Evidence

Inspect validation ownership, input types, submission identity, pending state and server error shape.

Method

Preserve draft values on recoverable errors, map field/general errors and handle concurrent or uncertain submissions deliberately.

Pitfall

A disabled button alone does not prevent retries or duplicate server effects; number parsing can turn an empty field into zero.

Check

Test invalid, empty, zero, double-submit, delayed response and retry cases; verify labels, error associations and focus.

Situational decisions

When duplicate clicks or retries can create duplicate effects: Coordinate UI pending state with server idempotency; disabling a button alone is insufficient.

When the form uses React 19 Actions (form action or useActionState): A completed Action resets uncontrolled fields even when it returns validation errors as state. When input must survive a rejection, return the submitted values and bind defaultValue to them, use controlled inputs, or submit through onSubmit with startTransition. Use useFormStatus for pending UI, and useOptimistic only with reconciliation against the server result.

The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.

Keep exploring