# vaadin-form-layout

> Claude/Codex skill by [@vaadin](https://omgskills.com/library/vaadin/index.md) · 7 stars · Updated 2026-09-24

Builds the visual structure and layout of a form, entity editor, or data-entry view in Vaadin Flow (Java) from any spec source — Figma URL, screenshot, text, or prompt — choosing the fields and components, FormLayout sectioning, and responsive column layout. Use when asked to create, implement, build, or generate a form, entity editor, or data entry view in Vaadin, to "add fields", "add a form", or "build a layout for editing", or when the user describes collecting structured input from users — even if they don't say the word "form" explicitly. This skill covers the form's layout and components only; to wire the fields to a Java bean with Binder, converters, and validation, look up the Binder and Form Validation guides via the Vaadin docs MCP (search\_vaadin\_docs).

## Install

```sh
git clone https://github.com/vaadin/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/vaadin-form-layout ~/.claude/skills/vaadin-form-layout
```

## From README

Vaadin Form Creation Workflow Track these three steps as TODOs so progress stays visible and the work can be resumed if it's interrupted partway through. Work through them in order. Step 1 – Understand the input and plan Process the spec source first: fetch and inspect a Figma URL, read a screenshot, or parse a text prompt. Well-defined spec (explicit field list, or a design with clear fields and labels): implement exactly what's specified. Do not invent extra fields, rename labels, or add controls the spec doesn't call for. The output should be predictable and faithful to the input. Vague request (e.g. "make a customer form" with no field list): ask a few targeted clarifying questions before planning — which fields and their data types, how they group, and whether it should be a single section or several. Don't silently guess the contents.

## Links

- HTML page: https://omgskills.com/library/vaadin/agent-skills/skills/vaadin-form-layout/
- GitHub: https://github.com/vaadin/agent-skills
- Author: [@vaadin](https://omgskills.com/library/vaadin/index.md)

## More from this repo

- [aura-theme](https://omgskills.com/library/vaadin/agent-skills/skills/aura-theme/index.md) — Used to generate and customize Vaadin Aura theme CSS configurations.
   - [@vaadin](https://omgskills.com/library/vaadin/index.md) · 7 stars