vaadin-claude

Vaadin Claude Plugin

Skills and tools for building high-quality Vaadin 25 applications with Java/Flow.

Overview

This plugin provides Claude with deep knowledge about Vaadin 25 development patterns, best practices, and common pitfalls. It covers layouts, responsive design, component composition, forms, testing, data binding, and reactive state management. The plugin also integrates with the Vaadin MCP server for real-time documentation lookups.

Skills

Skill	Triggers when you ask about...
theming	Theme selection (Aura vs Lumo), color customization, dark mode, design tokens, component variants, utility classes
frontend-design	Visual design, styling, animations, polished component compositions, making views look distinctive
vaadin-layouts	HorizontalLayout, VerticalLayout, alignment, spacing, padding, flex-grow, layout sizing issues
responsive-layouts	Mobile support, breakpoints, media queries, container queries, responsive utility classes
reusable-components	Custom components, Composite, component APIs, HasValue, HasComponents, encapsulation
forms-and-validation	Binder, form fields, validation, converters, required fields, cross-field validation
ui-unit-testing	Browser-free tests, UIUnitTest, component testers, fast view testing
testbench-testing	End-to-end tests, TestBench, page objects, ElementQuery, browser testing
data-providers	Grid data binding, lazy loading, filtering, sorting, Spring Pageable integration
third-party-components	Web Component wrapping, React component integration, @Tag, @NpmPackage, ReactAdapterComponent, DOM events, property sync
signals	Reactive state, ValueSignal, NumberSignal, effects, computed signals, shared state
views-and-navigation	Views, routes, navigation, AppLayout, router layouts, SideNav, URL parameters, master-detail

MCP Integration

This plugin includes the Vaadin MCP server, which provides:

• search_vaadin_docs — search the official Vaadin documentation
• get_component_java_api — get Java API docs for any Vaadin component
• get_component_styling — get styling/theming docs for components
• get_full_document — retrieve complete documentation pages
• get_vaadin_version — check the latest Vaadin version

Target Version

• Vaadin 25 (Java/Flow development model)
• Spring Boot 4 / JUnit 6 compatible

Prerequisites

• Claude Code version 1.0.33 or later (run claude --version to check)

Installation

Option 1: Install from marketplace (recommended)

1. Add the marketplace:

   /plugin marketplace add vaadin/claude-plugin
   

2. Install the plugin:

   /plugin install vaadin-claude@vaadin-claude-plugin
   

   Or open the plugin manager with /plugin, go to the Discover tab, and select vaadin-claude to install interactively.

Option 2: Install from local directory

Clone the repository and load it directly:

git clone https://github.com/vaadin/claude-plugin.git
claude --plugin-dir ./claude-plugin

Usage

The skills and MCP tools activate automatically based on conversation context. Ask about any Vaadin development topic and Claude will use the relevant skill along with the Vaadin MCP server for up-to-date documentation.

Examples

• "Set up Aura theme with a custom color palette"
• "Create a responsive master-detail view"
• "Add form validation with Binder"
• "Write UI unit tests for my view"
• "Wrap a third-party Web Component for use in Flow"

Updating

If you installed from the marketplace, update by running:

/plugin marketplace update vaadin-claude-plugin

Or enable auto-updates in the plugin manager under the Marketplaces tab.