Form builder
Everything required to take a form product from an empty folder to a form someone can build, preview, embed, and connect. The host app — its framework, its component library, its accounts — wraps these pieces. The pieces themselves stay free of that host, so the same builder can sit inside an embedded admin or a standalone dashboard.
Install the skills and work through them in order.
Order
- form-definition — the document both sides share: field catalog, widths, submission keys, steps, conditional rules, and save-time warnings. Nothing else has a shape until this exists, and it ships with no UI dependencies.
- form-builder-canvas — the authoring surface: palette, drag-and-drop canvas, inspector. It edits the document from step 1.
- form-preview — a panel that mounts the real renderer against the in-memory document, unsaved edits included.
- form-web-component — that renderer, as custom elements a host page can drop in. They fetch the published document and post submissions.
- form-integrations — after the submission row is saved, deliver it to a spreadsheet, a list, a CRM, or a webhook. Connectors are modules behind one interface.
How they lock together
The canvas writes a FormDefinition. The preview and the embed both read it,
so a width, a conditional rule, or a step title changes in one renderer. The
embed's submit handler persists a row whose keys are the field names, then
the dispatcher looks up destination in the integration catalog.
Leave the host's accounts, billing, and navigation outside this recipe. Pass the current account into the builder; keep it out of the form document and out of the custom elements.