skills.rest
marcushellberg
marcushellbergCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-grade Vaadin 25 interfaces with token-driven styling and theme variants.

6|1|Updated Feb 24, 2026
Search Tags:#design#theming#consistency#css#aesthetics#vaadin#ui-polish
One-click install
npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill frontend-design-marcushellberg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/marcushellberg/vaadin-development-plugin/tree/main/skills/frontend-design
Command: npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill frontend-design-marcushellberg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create visually distinctive, production-grade Vaadin 25 interfaces that go beyond default theme styling, delivering design clarity and consistency.

Core Features & Use Cases

  • Guidance on the Vaadin Theme System (Aura vs. Lumo), token-driven styling, and usage of theme variants.
  • Typography, color tokens, spacing, elevation, and motion guidelines to produce cohesive interfaces.
  • Practical patterns for styling and composing polished Vaadin components across dashboards, forms, and views.

Quick Start

Design a Vaadin 25 view by selecting a visual direction (e.g., clean professional, warm, or bold) and implement it with the platform's theming system, typography rules, and subtle motion.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a production-grade Vaadin 25 UI that goes beyond the default theme?▼

To create a production-grade Vaadin 25 UI, apply token-driven styling using the Vaadin theme system with typography, spacing, and elevation guidelines to achieve cohesive and visually distinctive interfaces.

What is the difference between the Aura and Lumo themes in Vaadin?▼

Aura and Lumo are Vaadin theme systems providing baseline styling. You select a visual direction and customize them using color tokens, theme variants, and typography rules to produce a polished, production-grade look.

How do I apply design tokens for spacing and typography in a Vaadin dashboard?▼

Apply design tokens for spacing and typography in a Vaadin dashboard by leveraging the platform's theming system, ensuring consistent visual hierarchy and cohesive component composition across data-rich views.

Can I use this approach to style a custom Vaadin component library?▼

Yes, you can apply these styling patterns to a custom Vaadin component library. The approach delivers cohesive interfaces and production-grade UI patterns suitable for admin dashboards, forms, and reusable components.

What's the best way to add motion and elevation to Vaadin views?▼

The best way to add motion and elevation to Vaadin views is by following subtle motion guidelines and using elevation tokens within the Vaadin theme system to produce polished, production-grade interfaces.

Does this Vaadin styling approach work for data-rich admin interfaces?▼

Yes, this Vaadin styling approach is specifically designed for data-rich admin interfaces, applying cohesive UI patterns across typography, spacing, and color tokens to ensure visual clarity in complex views.

Related Skills

Explore More Design & Creative Skills→
vaadinvaadin
11

theming

Guide Vaadin 25 theme selection and custom stylesheet implementation.

Official
Intermediate
tonehqtonehq
11

create-component

Generate React and Next.js UI component scaffolds with shadcn/ui and Tailwind CSS.

Official
Advanced
launchapp-devlaunchapp-dev
38

interface-design

Define typography, color tokens, spacing, and navigation for dashboard interfaces.

Official
Advanced
briosoemiliobriosoemilio

tailwindcss

Style web interfaces with utility-first Tailwind CSS classes.

Community
Advanced