vaadin
- 18 skills
- 0 followers
- 15 hours ago last updated
- ▌
- ▌ Extract Notable Changes · vaadinExtract 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.
- ▌ Vaadin Create Project · vaadinBootstrap 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` / create-vaadin.
- ▌ Vaadin Check Theme Mixing · vaadinDetect 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 stylesheets, or when the user reports styles or --lumo-* / --aura-* custom properties not resolving.
- ▌ Aura Theme · vaadin bundleGenerate 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 theme. Triggers on requests like "create a theme", "make it look more modern", "use dark mode with emerald accents", "compact dense layout", or any visual design system configuration for Vaadin/Aura.
- ▌ Vaadin Form Layout · vaadin bundleBuilds 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).
- ▌ Vaadin Frontend Design · vaadin bundleGuide 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", "add polish", "design a UI", "create a beautiful interface", or when building a new view where visual quality matters. Also trigger when the user wants to add animations, visual effects, or build polished component compositions in a Vaadin application.
- ▌ Repro · vaadin bundleReproduce 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 cause, pushes a shareable repro/<issue> branch, and (after confirmation) posts a verification-pending summary comment on the issue.
- ▌
- ▌ Signal Rules · vaadinRead 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.
- ▌ Stable Release Notes · vaadinPrepare 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 draft.
- ▌ Figma Theme · vaadinApply 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.
- ▌ Figma Survey · vaadin bundleSurvey 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.
- ▌ Figma To Vaadin · vaadinTranslate 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", "generate Vaadin code from Figma", "convert this frame to Java", or paste a Figma URL. Does NOT apply to React, HTML, web components, or other frontend frameworks — only Vaadin Flow (Java). Does NOT apply to design-only tasks such as editing Figma files or generating Figma components. Does NOT configure themes or visual design tokens — that is a separate skill.
- ▌ Implement Use Case · vaadinImplement 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 (prototype).
- ▌ Visual Verification · vaadinVisually verify an implemented use case using Playwright MCP. Use after implementing UI changes.
- ▌ Figma Visual Verification · vaadinVisually 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, when the user asks to "verify against the design", "check it matches Figma", "visually verify the view", or as a follow-up step after figma-to-vaadin. Produces a prioritized, actionable list of visual discrepancies — it does not fix them. Does NOT apply to backend/business-logic testing or general UI test suites — this is visual, design-fidelity verification only.
- ▌ Vaadin Modernization Audit · vaadin bundleAudit 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 chains, executeJs bridges) that newer capabilities like Signals and the typed Browser APIs simplify. Use when the user wants to audit or modernize a Vaadin codebase, asks 'what should we update', has just upgraded a Vaadin version (e.g. 24→25) and wants to know what's now possible, or asks whether a custom component has an official equivalent.