skills.rest
vaadin
vaadinOFFICIAL
Explore all skills by this author →
Website𝕏@vaadinGitHub

frontend-design

Stylize Vaadin 25 Java/Flow views with theme tokens and component-level CSS.

11|3|Updated Feb 26, 2026
Search Tags:#design#theming#ui#css#aura#vaadin#lumo
One-click install
npx skills add https://github.com/vaadin/claude-plugin --skill frontend-design-vaadin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/vaadin/claude-plugin/tree/main/skills/frontend-design
Command: npx skills add https://github.com/vaadin/claude-plugin --skill frontend-design-vaadin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Many Vaadin views look generic out of the box and lack the refined visual hierarchy, cohesive spacing, and polished interactions that users expect. This Skill helps developers and designers transform server-side Vaadin 25 Java/Flow views into production-grade interfaces by prescribing theme-first customizations, component styling patterns, and subtle motion that work with Lumo or Aura and respect accessibility and dark mode.

Core Features & Use Cases

  • Theme-first approach: Guidance for choosing Aura or Lumo, overriding theme tokens for colors, typography, spacing, and radii to change the entire app look consistently.
  • Component styling and composition: Patterns for using component theme variants, ::part selectors, LumoUtility classes, and view-scoped CSS to build polished cards, badges, dashboards, and forms.
  • Motion, density, and accessibility: Recipes for subtle CSS animations, staggered reveals, hover interactions, density choices (compact vs airy), and checks for dark mode and contrast.
  • Use cases: Polish an admin data-dense dashboard, style a customer-facing landing view, or create a compact internal tool UI with consistent elevation, spacing, and typography.

Quick Start

Describe the view and desired aesthetic and ask the skill to improve your Vaadin 25 Java view by recommending theme token overrides, component styles, spacing adjustments, and subtle CSS animations.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize Vaadin Lumo and Aura theme tokens for colors, typography, and spacing?▼

To style Vaadin 25 components, use component theme variants, ::part selectors, LumoUtility classes, and view-scoped CSS. These patterns allow you to build polished cards, badges, and forms while maintaining consistent elevation and typography across your application.

How do I add CSS animations and density control to a Vaadin dashboard?▼

Vaadin 25 Java/Flow projects support theme customization, component ::part styling, LumoUtility usage, and responsive layouts. You can apply these capabilities across dashboards, forms, and marketing pages for production-grade interface polish.

How do I style specific parts of Vaadin components using CSS?▼

Yes, you can implement both dark mode and accessibility checks in Vaadin by applying guidance for contrast verification and density choices. This ensures your themed components meet accessibility standards while supporting dark mode visual requirements.

What is the best way to polish a generic looking Vaadin view?▼

The best way to polish a generic Vaadin view is applying a theme-first approach with theme token overrides, component styling patterns, and subtle motion. This transforms server-side Java/Flow views into visually distinctive, production-grade interfaces.

Related Skills

Explore More Design & Creative Skills→
marcushellbergmarcushellberg
6

theming

Configure Vaadin 25 theme loading with @StyleSheet and ColorScheme.

Community
Intermediate
moughamirmoughamir

tailwindcss-advanced-design-systems

Define Tailwind CSS design tokens and semantic theme utilities with @theme and CSS variables.

Community
Advanced
marcushellbergmarcushellberg
6

ui-unit-testing

Write browser-free UI unit tests for Vaadin 25 views with UIUnitTest.

Community
Intermediate
GACLoveGACLove
2

tailwind-design-system

Generate Tailwind CSS v4 design system assets with @theme tokens and CVA patterns.

Community
Intermediate