recursica-skill-forms

Place the label to the left of the field on the same row, right-aligned, with one field per row in a single column. Stack the label above the field only when the form container is too narrow for both, and never mix placements within one form at a breakpoint.

Validate inline on blur with a non-blocking field-level indicator, and keep the submit button disabled until every required field is complete and valid. Errors must combine a visual state change with a non-color cue like an icon or message that restates the violated rule.

Go multi-step when the task has discrete stages, high field volume, or downstream branching. Keep one long form when sections are cross-referential, since moving back and forth between steps costs more than scrolling.

No. A card is for repeating peer objects, while a form is one object's properties, so the boundary separates nothing. Group fields with headings and the components' built-in spacing instead.

The formLayout prop defaults to stacked, so omitting it renders the fallback on any container width. Pass formLayout="side-by-side" on every field — note that layouts is the token axis name and is silently dropped as an unknown prop.

It does not cover control-type selection such as dropdown versus radio versus checkbox, which is a separate skill, nor submission logging and data retention, which are backend concerns. Cross-step validation, search and filter inputs, and form-level error summaries require asking the human rather than guessing.