formio-react-form

Embedding a Form.io form in React

Nested sub-skill. This file lives at formio-react-form/SKILL.md inside the formio-react skill and is loaded by path from formio-react's embed branch. Its name frontmatter exists so recursive-scan clients classify it correctly; it is not a separately-registered top-level skill, so do not invoke it by frontmatter name.

Getting a form onto a React page and controlling it from React. One API does the mounting:

<Form src={formJson} submission={submission} onSubmit={handleSubmit} />

Scope — mounting here, behaviour in formio-form

This skill covers only what differs because the host is React: mounting, the event surface, the live instance, the lifecycle contract, the provider, styling, and build environments.

Everything that lives in the form definition is owned by formio-form and reached by link, never restated here: conditionals, calculated values, validation rules, component logic, external data sources and cascading selects, wizard page logic, and the JSON Logic primer. That content is identical whatever renders the form, and a second copy is a copy that drifts.

When a React embedding question turns out to be a definition question — "how do I hide this field when that one is empty", asked inside a React app — route to the matching formio-form reference rather than answering locally.

Preflight — the Form.io MCP server

Check this when you reach your first Form.io tool call, not when this skill activates. The check is whether form_list is callable by you, under whatever name this client exposes it. If it is, proceed. If it is not, load the formio-mcp-setup skill and use it to help the user connect the server; that skill is the only remedy you offer, and this skill writes no MCP configuration itself.

A missing server blocks that call, not the turn. Reading this skill, answering a question from it, planning, and writing files to the working directory all need no server. Do everything that needs no server first and in full, then raise the gap when you actually reach the call that needs it. Opening with a blocked-on-setup message — or asking for a Project URL before there is anything to write to it — spends the user's turn on a step that was not due.