# 🎨 Vaadin Flow Premium UI

Antigravity skills for creating stunning, modern Vaadin Flow UIs with React-level visual quality.

---

The problem: AI-generated Vaadin Flow UIs tend to be functional but visually bland — default fonts, generic colors, no animations, flat layouts. They look nothing like what a React developer would expect from a modern web app.

The solution: This plugin teaches AI agents to produce stunning, premium UIs in Vaadin Flow — with curated color palettes, Google Fonts, glassmorphism, micro-animations, responsive layouts, and dark mode — all in pure Java + CSS.

---

✨ What's Included

#	Skill	Purpose	Trigger
1	vaadin-design-system	Design tokens, Lumo theming, typography, color palettes, dark mode	Any Vaadin Flow task (mandatory)
2	vaadin-layout-mastery	CSS Grid dashboards, AppLayout sidebars, cards, hero sections, responsive	Building layouts or page structures
3	vaadin-component-styling	Premium Grid, Dialog, Form, Tabs, Button hierarchy, ::part() styling	Enhancing stock Vaadin components
4	vaadin-animation-interaction	CSS animations, transitions, skeleton loading, scroll effects	Adding motion or interactive polish
5	vaadin-premium-patterns	5 complete UI recipes: Dashboard, Login, Settings, Chat, Profile	Building full views or pages
6	vaadin-custom-components	Custom Lit components with Java API bridges	When stock components aren't enough

Skill Dependency Graph

┌─────────────────────────┐
│  1. vaadin-design-system │  ◄── Foundation (always activated first)
│       (Foundation)       │
└──────┬──────┬──────┬─────┘
       │      │      │
       ▼      │      ▼
┌──────────┐  │  ┌──────────────────┐
│ 2. Layout│  │  │ 3. Component     │
│  Mastery │  │  │    Styling       │
└────┬─────┘  │  └──────┬───────────┘
     │        │         │
     ▼        │         ▼
     ┌────────┴─────────┐
     │ 4. Animation &   │
     │    Interaction    │
     └────────┬─────────┘
              │
              ▼
     ┌────────────────┐     ┌──────────────────┐
     │ 5. Premium     │◄────│ 6. Custom        │
     │    Patterns    │     │    Components     │
     └────────────────┘     └──────────────────┘

---

🚀 Installation

One-Command Install

# Linux / macOS
git clone https://github.com/kdevultra/vaadin-flow-premium-ui.git \
  ~/.gemini/config/plugins/vaadin-flow-premium-ui

# Windows (PowerShell)
git clone https://github.com/kdevultra/vaadin-flow-premium-ui.git `
  "$env:USERPROFILE\.gemini\config\plugins\vaadin-flow-premium-ui"

That's it! The skills are automatically discovered on your next Antigravity conversation.

Manual Install

1. Download or clone this repository
2. Copy the entire folder to your Antigravity plugins directory:
   • Linux/macOS: ~/.gemini/config/plugins/vaadin-flow-premium-ui/
   • Windows: %USERPROFILE%\.gemini\config\plugins\vaadin-flow-premium-ui\
3. Verify plugin.json is at the root of the plugin directory

Verify Installation

Start a new Antigravity conversation and ask:

Create a modern login page with Vaadin Flow

The agent should activate vaadin-design-system (foundation) and vaadin-premium-patterns (Glass Login recipe) automatically.

---

🎯 Quick Start

Example Prompts

Try these prompts to see the skills in action:

"Build an admin dashboard with Vaadin Flow — stat cards, data grid, and a sidebar"

→ Activates: design-system, layout-mastery, component-styling, premium-patterns

"Create a glassmorphism login page with animated gradient background in Vaadin"

→ Activates: design-system, animation-interaction, premium-patterns

"Style my Vaadin Grid to look premium with striped rows, hover effects, and badge renderers"

→ Activates: design-system, component-styling

"Add skeleton loading animations to my Vaadin dashboard"

→ Activates: animation-interaction

"Create an animated counter web component for Vaadin Flow"

→ Activates: custom-components

---

🏗️ Design Philosophy

CSS-First, Java-Second

The single most important principle: visual excellence in Vaadin comes from CSS, not Java.

✅ DO: Define CSS classes in theme files, apply with addClassName()
❌ DON'T: Use component.getStyle().set("color", "red") — unmaintainable

Layered Styling Hierarchy

Always use the simplest approach that works:

Lumo CSS Variables          ← Start here
  → Lumo Utility Classes
    → Component Variants
      → Custom CSS Classes
        → ::part() Selectors
          → Custom Lit Components  ← Last resort

The React Parity Checklist

Every generated view must pass these quality gates:

• ✅ Custom typography (Google Fonts, not browser defaults)
• ✅ Curated color palette (HSL-tuned, not generic CSS named colors)
• ✅ Smooth transitions on all interactive elements
• ✅ Responsive across breakpoints
• ✅ Dark mode support
• ✅ Consistent spacing via Lumo space tokens
• ✅ Subtle shadows and depth
• ✅ Micro-animations for state changes

---

📦 Skill Details

1. vaadin-design-system (Foundation)

Always activated first. Establishes the design foundation:

• Theme directory setup (frontend/themes/{app}/)
• Lumo CSS variable overrides (colors, typography, spacing, shadows)
• HSL-based custom color palette generation (50-900 scale)
• Google Fonts integration
• Dark mode ([theme~="dark"]) setup and toggle
• LumoUtility Java-side utility classes

Includes reference files:

• references/lumo-variables.md — Exhaustive Lumo variable table
• references/color-palettes.md — 3 pre-built premium palettes (Indigo Corporate, Emerald SaaS, Amber Warm)

2. vaadin-layout-mastery (Structure)

Modern layout patterns:

• The Golden Rule: CSS Grid for 2D structure, Flexbox for 1D alignment
• AppLayout with styled sidebar (SideNav, dark drawer, glassmorphism navbar)
• Dashboard grid (auto-fit / minmax responsive widget grid)
• Card component with hover elevation
• Hero sections with gradient backgrounds
• Master-detail patterns
• Responsive breakpoint strategies

Includes examples: DashboardLayout.java + CSS, SidebarLayout.java + CSS

3. vaadin-component-styling (Enhancement)

Transform stock components into premium UI elements:

• Component variant reference (Button, Grid, Dialog, Tabs, Notification)
• ::part() shadow DOM styling methodology
• Button hierarchy: Primary → Secondary → Tertiary → Danger → Ghost → Gradient
• Grid: Striped rows, hover highlights, badge/progress/avatar cell renderers
• Dialog: Rounded corners, backdrop blur, slide-in animation
• Forms: Sectioned, 2-column responsive, validation states
• Tabs: Animated underline, icon+text, vertical

Includes: references/shadow-parts.md — ::part() reference for 15 components

4. vaadin-animation-interaction (Motion)

Bring UIs to life:

• 12+ reusable CSS @keyframes (fadeIn, slideUp, pulse, shake, shimmer, spin, etc.)
• Class-based animation triggers from Java (onAttach + requestAnimationFrame)
• Skeleton loading / shimmer screens
• Page enter/exit transitions
• Scroll-triggered reveal (IntersectionObserver via executeJs)
• Button interaction recipes (ripple, press scale, success checkmark)
• Staggered list animations

Includes: examples/animations.css (drop-in animation library), examples/SkeletonLoader.java

5. vaadin-premium-patterns (Recipes)

Complete, production-ready UI patterns:

Pattern	Visual Highlights
Admin Dashboard	Stat cards with gradient accents, chart area, data grid with badge renderers
Glass Login	Glassmorphism card on animated gradient background
Modern Settings	Tabbed sections, toggle switches, save confirmation toast
Chat Interface	Message bubbles, typing indicator animation, auto-scroll
User Profile	Cover image, overlapping avatar, stat counters, activity feed

Each pattern includes a Java class + companion CSS file with dark mode and responsive support.

6. vaadin-custom-components (Escape Hatch)

When stock components can't achieve the desired effect:

• Decision tree: "Do you need a custom component?"
• Lit component creation + Java bridge (@Tag, @JsModule)
• Property/event binding patterns
• @ClientCallable for server-client communication
• Lumo theme integration inside Lit shadow DOM
• 7 recipe sketches (animated counter, circular progress, sparkline, gradient text, confetti, ripple, toast)

Includes: examples/animated-counter.ts + examples/AnimatedCounter.java (complete working example)

---

🔧 Requirements

• Antigravity (Google Antigravity AI coding assistant)
• Vaadin Flow 24.x (current LTS)
• Java 17+

---

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines on:

• Adding new skills or patterns
• Improving existing examples
• Code style requirements (CSS-first, Lumo variables, no inline styles)
• Testing your changes locally

Ideas for Contributions

• Additional premium patterns (e.g., Kanban board, file manager, onboarding wizard)
• Vaadin 25 compatibility notes
• Integration patterns for chart libraries (ApexCharts, ECharts)
• Accessibility audit improvements
• Additional color palettes

---

📄 License

This project is licensed under the Apache License 2.0.

---

🙏 Acknowledgments

• Vaadin for the excellent Flow framework and Lumo design system
• Google Antigravity for the AI agent platform
• The Vaadin community for design inspiration and best practices

---

Built with ❤️ for the Vaadin + AI community