frontend-designlisted

# Creating Distinctive Vaadin Interfaces Use the Vaadin MCP tools (`search_vaadin_docs`, `get_component_styling`, `get_component_java_api`) to look up the latest documentation whenever uncertain about a specific API detail. Always set `vaadin_version` to `"25"` and `ui_language` to `"java"`. This skill guides creation of distinctive, polished Vaadin interfaces that go beyond default theme styling. The goal is production-grade code with genuine attention to aesthetic detail — not generic defaults. ## Design Thinking Before writing code, understand the context and commit to a clear aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? An admin dashboard has different design needs than a customer-facing portal. - **Tone**: Pick a direction: clean and professional, warm and approachable, bold and data-dense, light and airy, dark and focused, editorial, playful, or refined. The direction should serve the users and the content. - **Constraints**: Vaadin component library, Vaadin theme system (Aura or Lumo), server-side rendering model, accessibility requirements. - **Differentiation**: What makes this interface feel crafted rather than default? What detail will users notice? **CRITICAL**: Choose a clear direction and execute it consistently. Every color, spacing, and typography choice should reinforce the same aesthetic. A cohesive simple design always beats an inconsistent elaborate one. Then implement working code (Java + CSS) that is: -