Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →webiny/webiny-form-model
Building forms with the FormModel system — field types, renderers, layout, validation, conditional rules, computed fields, and dynamic zones.
Passed 19 of 22 test cases with the skill, and 3 of 22 without it.
and 30 more in the full report
17 fixed2 passed either way2 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 17 test cases the skill fixed. Same model, same prompt, with and without the skill.
Render the built-in Webiny UI alert component that displays active validation errors for a presenter's form instance with a custom CSS class in TSX.
| Checked | Without skill | With skill |
|---|---|---|
| Imports FormErrors from webiny/admin/form. | Missed | Passed |
| Renders <FormErrors form={presenter.vm.form} className="..." />. | Missed | Passed |
The instructions your model reads when the skill loads.
The Form Model is Webiny's declarative form system. Define fields with a fluent builder API (fields.text(), fields.datetime(), etc.), arrange them with a layout builder (layout.row(), layout.tabs(), etc.), and validate with Zod schemas or imperative rules. Fields support conditional visibility, computed values, reactive context from other fields (.context()), and deeply nested object/list structures with templates (dynamic zones).
All fields are created via the fields registry callback. Each builder method returns a chainable builder.
fields.text();
Default renderer: textInput. Value: string | null.
fields.text().label("Title").placeholder("Enter title").required("Title is required")
fields.text().renderer("textarea", { rows: 4 })
fields.text().list().renderer("tags").defaultValue([])
fields.text().list().renderer("textInputs", { addItemLabel: "Add text" })
fields.text().list().renderer("textareas", { addItemLabel: "Add description" })
fields.text().renderer("codeEditor", { language: "html", height: 300 })
fields.text().options([
{ label: "Option A", value: "a" },
{ label: "Option B", value: "b" }
]) // auto-switches to "select" renderer
fields.text().options([...]).renderer("radioButtons")
fields.text().list().options([...]).renderer("checkboxes")
// Dynamic options — callback receives { field, form }, re-evaluated reactively
fields.text().options(({ form }) => {
const type = form.field("general.type").getValue();
return getOptionsForType(type);
})
test cases passed, vs 3 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.