vaadin

Survey a Figma design against what a Vaadin app already builds, interview the user in rounds on every divergence, and write the project's design spec. Ends in the spec plus a delta in the conversation — never in code, theme CSS, or a ticket.

Implement a GitHub ticket end-to-end. Use when asked to implement, build, or work on a use case or issue with a known solution. Not for diagnosing a bug without a fix in hand (diagnosing-bugs), reviewing existing work (code-review), or throwaway exploration…

Apply a settled design spec to a Vaadin Aura app's global theme: write only what differs from the theme's defaults, prove it in the browser, and refresh the resolved token values the spec records.

Translate Figma designs into Vaadin Flow (Java) UI code using the Figma MCP and the Vaadin docs tools. Use this skill whenever the user wants to implement a Figma frame, screen, or component as Vaadin Java code — even if they just say "implement this design",…

Visually verify a Vaadin Flow view against the Figma design it was implemented from, using the Playwright MCP server to render the running app and a Figma screenshot as the reference. Use this after implementing or changing a Vaadin view from a Figma design,…

Audit a Vaadin project for modernization opportunities and emit independent, session-ready suggestions (report only, never edits) — custom components that official Vaadin components now cover, and old patterns (manual UI state sync, UI.access pushes, listener…

Visually verify an implemented use case using Playwright MCP. Use after implementing UI changes.

Reproduce a Vaadin web component bug from a GitHub issue in vaadin/web-components. Builds a minimal dev-page reproduction, confirms the bug in a running browser with playwright-cli, points at the likely root cause, pushes a shareable repro/<issue> branch, and…

Prepare GitHub release notes for a beta or stable web-components release. Adds a "Changes Since {previous}" block (breaking / behavior altering changes and new features only, since the previous minor) on top of the bot-generated "Changes Since" block in the…

Cherry-pick a PR to a target version branch

Reproduce a Vaadin Flow component bug from a GitHub issue in vaadin/flow-components or a component-specific issue in vaadin/flow. Builds a minimal integration-test View, confirms the bug in a running browser with playwright-cli, points at the likely root…

Read these rules whenever you add, modify, or review `bind*` methods (e.g. `bindError`, `bindEnabled`, `bindVisible`), or work with `Signal` or `SignalPropertySupport` types in component code.

Cherry-pick a PR to a target version branch

Guide the agent on creating visually distinctive, polished Vaadin 25 interfaces that go beyond default theme styling. This skill should be used when the user asks to "make it look good", "improve the design", "style the view", "make it visually appealing",…

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.…

Generate and customize Vaadin Aura theme CSS configurations. Use when the user wants to create a new theme, adjust visual styles, customize a design system, pick colors, change typography, or configure the look and feel of a Vaadin application using the Aura…

Detect whether a Vaadin project mixes the Aura and Lumo base themes, which produces conflicting styles and unresolved CSS custom properties. Use when reviewing or building a Vaadin UI, switching or configuring a theme, applying theme variants, importing theme…

Bootstrap a new Vaadin project by downloading a fresh skeleton from start.vaadin.com and extracting it into a directory. Use when the user asks to create, scaffold, bootstrap, or start a new Vaadin application or project. Mirrors `npm init vaadin` /…

Extract the notable changes for platform release note. Use when generating the Notable Changes / New and Noteworthy section of a Vaadin platform release note for a given platform version.