vaadin-development

Guide Claude on building client-side (React/Hilla) views in Vaadin 25. This skill should be used when the user asks to "build a client-side view", "create a React view", "use Hilla", "use @BrowserCallable", "file-based routing", "call Java from React", "create an offline view", "client-side rendering", "use ViewConfig", "create a Hilla endpoint", "use reactive endpoints", "subscribe to server push from React", "use signals in React", or needs help with React-based Vaadin views, file-based routing conventions, or type-safe backend communication.

Guide Claude on using Vaadin 25 data providers efficiently for Grid, ComboBox, and other listing components. This skill should be used when the user asks to "load data into a grid", "use a data provider", "lazy load data", "paginate grid data", "filter a grid", "sort a grid", "use setItems", "use CallbackDataProvider", "bind a Spring service to a grid", "use setItemsPageable", or needs help with in-memory vs lazy data binding, filtering, sorting, or custom data providers in Vaadin Flow.

Guide Claude on building forms with Binder and robust validation in Vaadin 25 Flow. This skill should be used when the user asks to "create a form", "bind fields", "validate input", "use Binder", "use BeanValidationBinder", "add validation", "convert field values", "handle form submission", "cross-field validation", or needs help with field binding, converters, required fields, custom validators, or form error handling in Vaadin Flow.

Guide Claude 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.

Guide Claude on building responsive Vaadin 25 layouts that adapt to different screen sizes. This skill should be used when the user asks to "make a layout responsive", "support mobile", "adapt to screen size", "use breakpoints", "use media queries", "use container queries", "responsive design", "mobile first", or needs help making a Vaadin Flow view work well on both desktop and mobile devices.

Guide Claude on structuring Vaadin 25 Flow views into focused, reusable components. This skill should be used when the user asks to "structure a view", "organize view code", "break down a complex view", "extract a component", "split a view into components", "simplify a large view", "create a reusable component", "use Composite", "compose components", or when a view is growing beyond ~200 lines, has multiple logical sections, or contains repeated UI patterns.

Guide Claude on securing Vaadin 25 applications with Spring Security. This skill should be used when the user asks to "add security", "add login", "create a login view", "create a login form", "use Spring Security", "secure a view", "add authentication", "add authorization", "use @RolesAllowed", "use @PermitAll", "use @AnonymousAllowed", "use @DenyAll", "use VaadinSecurityConfigurer", "add OAuth2", "use OAuth2 login", "use Google login", "use Keycloak", "use GitHub login", "add logout", "add a logout button", "use AuthenticationContext", "protect a view", "role-based access", "configure SecurityFilterChain", or needs help with view access control, login forms, OAuth2 providers, or logout handling in Vaadin Flow.

Guide Claude on using Vaadin Signals for reactive state management in Vaadin 25 Flow. This skill should be used when the user asks to "use signals", "manage state reactively", "share state between users", "use reactive state", "use ValueSignal", "use NumberSignal", "use ListSignal", "use computed signals", "use ComponentEffect", "bind signals to components", or needs help with reactive UI updates, signal transactions, signal factories, or thread-safe state management in Vaadin Flow.

Guide Claude on writing end-to-end browser tests with Vaadin TestBench in Vaadin 25. This skill should be used when the user asks to "write an end-to-end test", "write a browser test", "use TestBench", "create a page object", "test in a real browser", "integration test a Vaadin app", "visual regression test", "cross-browser test", or needs help with TestBench Element API, ElementQuery, page objects, or TestBenchTestCase.

Guide Claude on Vaadin 25 theming with both Aura and Lumo themes. This skill should be used when the user asks to "choose a theme", "set up Aura", "set up Lumo", "customize the theme", "change colors", "enable dark mode", "customize design tokens", "use theme variants", "use utility classes", "change the color scheme", or needs help with theme-specific CSS custom properties, component theme variants, or building a custom theme in Vaadin 25.

Guide Claude on integrating third-party Web Components and React components from npm into Vaadin 25 Flow applications. This skill should be used when the user asks to "integrate a web component", "wrap a web component", "third-party component", "@Tag", "@NpmPackage", "@JsModule", "@DomEvent", "@EventData", "@Synchronize", "integrate a React component", "wrap a React component", "ReactAdapterComponent", "ReactAdapterElement", "npm component", "PropertyDescriptor", "callJsFunction", "synchronize properties", or "listen to DOM events".

Guide Claude on writing fast, browser-free UI unit tests for Vaadin 25 Flow views. This skill should be used when the user asks to "write a UI test", "unit test a view", "test without a browser", "use UIUnitTest", "test a Vaadin component", "browser-free testing", "browser-less testing", or needs help with the TestBench UI unit testing framework, component testers, navigation in tests, or mocking Spring beans in Vaadin UI tests.

Guide Claude on using Vaadin 25 HorizontalLayout and VerticalLayout correctly. This skill should be used when the user asks to "create a layout", "arrange components", "align items", "fix layout sizing", "use HorizontalLayout", "use VerticalLayout", or needs help with spacing, padding, margins, flex-grow, flex-shrink, or alignment in Vaadin Flow views. Also trigger when debugging layout issues like components shrinking unexpectedly or overflowing their container, or when choosing between layout components (HorizontalLayout vs VerticalLayout vs FlexLayout vs AppLayout).

Guide Claude on creating Vaadin 25 views with @Route, setting up router layouts (AppLayout, @Layout), navigation between views, and passing data via URL parameters. This skill should be used when the user asks to "create a view", "add a route", "use @Route", "set up navigation", "use AppLayout", "build a navigation menu", "use SideNav", "pass data between views", "use route parameters", "use query parameters", "create a master-detail view", "use @Layout", "use RouterLayout", "use @ParentLayout", "use @RoutePrefix", "use @Menu", "use RouterLink", or "navigate programmatically". Also trigger when the user needs help choosing between route parameters and query parameters, building a MainLayout with a drawer and navigation menu, or structuring nested router layouts.