reusable-components

Decompose large Vaadin 25 views into reusable components with Composite<T> and typed events.

6|1|Updated Feb 24, 2026
One-click install
npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill reusable-components-marcushellberg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: reusable-components
Source: https://github.com/marcushellberg/vaadin-development-plugin/tree/main/skills/reusable-components
Command: npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill reusable-components-marcushellberg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vaadin 25 view code often grows into large, monolithic blocks that are hard to maintain, test, and reuse. This guide teaches how to break down views into cohesive, reusable components to improve maintainability and composability.

Core Features & Use Cases

  • Guidelines for when to extract a component (e.g., views exceeding ~200 lines, cohesive groups, repeated UI patterns).
  • Patterns for building components with Composite<T> and when to extend existing components, plus API design practices.
  • Techniques for parent→child communication via direct method calls and child→parent communication via typed events, including lifecycle considerations.

Quick Start

Start by identifying a large Vaadin 25 view and refactoring it into focused components, then wire them together in the parent view.

Frequently Asked Questions about reusable-components

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

FAQPage Schema
How do I refactor a large Vaadin 25 view into reusable components?

Refactor large Vaadin 25 views by decomposing monolithic blocks exceeding 200 lines into focused, cohesive components using Composite<T> for API design and wiring them together in the parent view.

When should I extract a component from a Vaadin view?

Extract a component from a Vaadin view when the view exceeds roughly 200 lines, contains repeated UI patterns, or includes cohesive groups of elements that can be isolated to improve maintainability and composability.

How does parent to child communication work in Vaadin composite components?

Parent to child communication in Vaadin composite components is handled via direct method calls on the child component, while child to parent communication uses typed events to maintain clean component boundaries.

What is the best way to structure Vaadin 25 views for maintainability?

Structure Vaadin 25 views for maintainability by breaking large monolithic blocks into focused, reusable components with clear component boundaries, Composite<T> API design, event-based communication, and lifecycle management.

Does this Vaadin refactoring approach work for forms and dashboards?

Yes, this Vaadin refactoring approach works for typical Vaadin 25 screens such as orders, dashboards, and forms where views grow beyond 200 lines and contain repeated patterns requiring decomposition.

Why does my Vaadin 25 view code become hard to maintain and test?

Vaadin 25 view code becomes hard to maintain and test when it grows into large, monolithic blocks, making it difficult to reuse patterns and manage component boundaries, event-based communication, and lifecycle considerations.