vaadin-claude

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

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 ListSignal", "use SharedValueSignal", "use SharedNumberSignal", "use SharedListSignal", "use SharedMapSignal", "use SharedNodeSignal", "use local signals", "use shared signals", "use computed signals", "bind signals to components", "bindText", "bindValue", "bindEnabled", "bindVisible", "bindChildren", or needs help with reactive UI updates, signal transactions, signal effects, signal bindings, 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 tests for Vaadin 25 Flow views with the Browserless Testing framework (formerly UI Unit Testing). This skill should be used when the user asks to "write a UI test", "unit test a view", "test without a browser", "use BrowserlessTest", "use UIUnitTest", "test a Vaadin component", "browser-free testing", "browserless testing", or needs help with the Vaadin browserless testing framework, component testers, navigation in tests, or mocking Spring beans in Vaadin view 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.