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

reusable-components

Refactor Vaadin 25 Flow views into reusable Composite-based components.

11|3|Updated Feb 26, 2026
Search Tags:#reusability#frontend-patterns#composite#ui-architecture#component-extraction#vaadin#vaadin-25
One-click install
npx skills add https://github.com/vaadin/claude-plugin --skill reusable-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reusable-components
Source: https://github.com/vaadin/claude-plugin/tree/main/skills/reusable-components
Command: npx skills add https://github.com/vaadin/claude-plugin --skill reusable-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides Claude to refactor Vaadin 25 Flow views into small, reusable components to improve maintainability, reduce complexity, and enable reuse across views. It targets views that grow beyond ~200 lines, contain cohesive groups, or display repeated UI patterns.

Core Features & Use Cases

  • Emphasizes using Composite<T> as the default base to encapsulate a view section and expose a clean, intent-based API.
  • Explains when to extend an existing component vs. preferring composition, keeping the public API focused and predictable.
  • Provides an extraction workflow: identify cohesive groups, define boundaries, extract into focused components, and wire them into the parent view.
  • Describes communication patterns between components: Parent→Child via direct method calls; Child→Parent via typed events.
  • Covers wrapper/slot patterns for layout components with named areas (e.g., a PageHeader with title and actions).
  • Defines API design principles (clear, intent-based methods like setTitle, setValue) and lifecycle considerations (onAttach/onDetach).
  • Highlights best practices for maintainable, reusable components and safe composition.

Quick Start

Start by identifying a monolithic view and extract a focused component using Composite<T>, then wire it into the parent view and test in isolation.

Frequently Asked Questions about reusable-components

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

FAQPage Schema
How do I refactor Vaadin 25 views into reusable components?▼

Refactor Vaadin 25 views into reusable components by identifying cohesive UI groups, extracting them into focused classes using Composite<T>, and wiring them into the parent view with intent-based APIs. This reduces complexity in views exceeding 200 lines.

When should I extract UI components from a monolithic Vaadin view?▼

Extract UI components from a monolithic Vaadin view when it grows beyond 200 lines, contains cohesive groups of elements, or displays repeated UI patterns. Extraction improves maintainability and enables reuse across multiple views.

What is the best way to communicate between parent and child components in Vaadin?▼

The best way to communicate between parent and child components in Vaadin is parent-to-child via direct method calls and child-to-parent via typed events. This keeps component APIs focused, predictable, and maintainable.

Should I extend an existing Vaadin component or use composition for UI extraction?▼

Prefer composition over extending an existing Vaadin component to keep the public API focused and predictable. Use Composite<T> as the default base to encapsulate view sections and expose clean, intent-based methods.

How do I create layout wrappers with named slot areas in Vaadin 25?▼

Create layout wrappers with named slot areas in Vaadin 25 using slot-based wrapper patterns. This allows you to build components like a PageHeader with distinct title and actions areas for flexible UI composition.

Does the reusable component workflow handle lifecycle methods like onAttach and onDetach?▼

Yes, the reusable component workflow handles lifecycle considerations including onAttach and onDetach. Defining API design principles alongside these lifecycle methods ensures safe composition and maintainable components.

Related Skills

Explore More Software Engineering Skills→
marcushellbergmarcushellberg
6

reusable-components

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

Community
Intermediate
marcushellbergmarcushellberg
6

vaadin-layouts

Guide Vaadin 25 layout implementation with HorizontalLayout and VerticalLayout.

Community
Intermediate
vaadinvaadin
11

data-providers

Bind and page data for Vaadin 25 grids and combos with data providers.

Official
Advanced
Ni-BuNi-Bu
4

improve-codebase-architecture

Identify architectural friction and refactoring opportunities in codebases.

Community
Advanced