vaadin-layouts
Guide Claude on using Vaadin 25 HorizontalLayout and VerticalLayout correctly. This skill should be used when the user asks to "create a layout", "arrange components", "align items", "fix layout sizing", "use HorizontalLayout", "use VerticalLayout", or needs help with spacing, padding, margins, flex-grow, flex-shrink, or alignment in Vaadin Flow views. Also trigger when debugging layout issues like components shrinking unexpectedly or overflowing their container, or when choosing between layout components (HorizontalLayout vs VerticalLayout vs FlexLayout vs AppLayout).
68
82%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is an excellent skill description that thoroughly covers what the skill does, when it should be triggered, and uses highly specific Vaadin-domain terminology. It includes both high-level use cases (creating layouts, arranging components) and specific debugging scenarios (components shrinking, overflowing), making it very actionable for skill selection. The only minor note is the use of second-person framing ('Guide Claude on...') but this doesn't significantly detract from quality.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and concepts: layout creation, component arrangement, alignment, sizing fixes, spacing, padding, margins, flex-grow, flex-shrink, debugging layout issues like shrinking/overflowing, and choosing between layout components. | 3 / 3 |
Completeness | Clearly answers both 'what' (guide on using Vaadin 25 HorizontalLayout and VerticalLayout correctly) and 'when' (explicit trigger phrases like 'create a layout', 'arrange components', debugging layout issues, choosing between layout components). The 'Use when' equivalent is thoroughly spelled out. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'create a layout', 'arrange components', 'align items', 'fix layout sizing', 'HorizontalLayout', 'VerticalLayout', 'FlexLayout', 'AppLayout', 'spacing', 'padding', 'margins', 'flex-grow', 'flex-shrink', 'components shrinking unexpectedly', 'overflowing'. These are highly natural phrases a Vaadin developer would use. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche: Vaadin 25 layout components specifically. The mention of Vaadin-specific classes (HorizontalLayout, VerticalLayout, FlexLayout, AppLayout) and Vaadin Flow views makes it very unlikely to conflict with generic CSS layout or other framework layout skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
64%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid, well-structured Vaadin layout skill that provides genuinely useful, version-specific guidance (especially the Vaadin 25 flex behavior change and the asymmetric defaults). The actionability is excellent with concrete code examples throughout. The main weaknesses are moderate verbosity in some explanatory sections and the lack of a structured debugging/troubleshooting workflow with validation steps.
Suggestions
Add a structured troubleshooting workflow section with explicit steps: 'If components are shrinking → check X → try Y → verify by Z' to improve workflow clarity.
Trim the 'When NOT to Use' section to be more concise — Claude knows what CSS Grid and form layouts are; focus on the decision criteria rather than explaining what each alternative does.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient and covers genuinely useful information Claude wouldn't inherently know (Vaadin 25-specific defaults, the asymmetric padding/spacing behavior, the v25 flex change). However, some sections are slightly verbose — the 'When NOT to Use' section explains what AppLayout and Dashboard do at length, and the FlexLayout section could be tighter. The explanations of flexbox concepts (main axis, cross axis) border on things Claude already knows. | 2 / 3 |
Actionability | The skill provides concrete, executable Java code examples for all key operations: spacing configuration, flex-grow, overflow fixes, wrapping, and theme variants. The API calls are specific and copy-paste ready (e.g., `layout.setSpacing(12, Unit.PIXELS)`, `layout.getThemeList().add("spacing-xs")`). | 3 / 3 |
Workflow Clarity | The skill is primarily a reference/guide rather than a multi-step workflow, but the best practices section and the 'When NOT to Use' decision tree provide good sequencing for layout selection. However, there are no explicit validation checkpoints — for instance, no guidance on how to verify a layout is rendering correctly or debug when it isn't, beyond the overflow trap fix. The debugging guidance is scattered rather than structured as a troubleshooting workflow. | 2 / 3 |
Progressive Disclosure | The skill references `references/layout-cheatsheet.md` at the end and mentions MCP tools at the top, which is good. However, the bundle has no files, so the cheatsheet reference is unverifiable. The main content is fairly long (~150 lines of substantive content) and some sections like the detailed 'When NOT to Use' guidance or the legacy behavior note could potentially be split into reference files. The structure is reasonable but could benefit from better separation. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- vaadin/claude-plugin
- Commit
e47fdfe
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.