Guide Claude on building responsive Vaadin 25 layouts that adapt to different screen sizes. This skill should be used when the user asks to "make a layout responsive", "support mobile", "adapt to screen size", "use breakpoints", "use media queries", "use container queries", "responsive design", "mobile first", or needs help making a Vaadin Flow view work well on both desktop and mobile devices.
68
83%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
89%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 a well-crafted description with strong trigger term coverage and clear 'when to use' guidance. Its main weakness is that the 'what' portion is somewhat general—it describes the goal (responsive layouts) but doesn't enumerate specific concrete actions or techniques. The Vaadin 25 specificity and comprehensive trigger terms make it highly distinctive and easy for Claude to select appropriately.
Suggestions
Add specific concrete actions to the 'what' portion, e.g., 'Configures FormLayout responsive steps, sets up CSS container queries, uses Vaadin's responsive layout components like Board and FlexLayout, and applies mobile-first styling.'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names the domain (Vaadin 25 responsive layouts) and a general action ('building responsive layouts that adapt to different screen sizes'), but does not list multiple specific concrete actions like using specific layout components, configuring breakpoints, or setting up CSS container queries. | 2 / 3 |
Completeness | Clearly answers both 'what' (building responsive Vaadin 25 layouts that adapt to different screen sizes) and 'when' (explicit 'Use when' clause with a comprehensive list of trigger phrases and scenarios). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms: 'make a layout responsive', 'support mobile', 'adapt to screen size', 'use breakpoints', 'use media queries', 'use container queries', 'responsive design', 'mobile first', plus mentions of desktop and mobile devices. These are terms users would naturally say. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive due to the specific framework (Vaadin 25) and specific concern (responsive layouts). The combination of Vaadin Flow with responsive design creates a clear niche unlikely to conflict with general CSS or other framework skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-crafted skill with strong actionability — executable Java and CSS examples cover the key responsive patterns clearly. The main weaknesses are moderate verbosity in the introductory sections (design philosophy, general responsiveness concepts Claude already knows) and a reference to a bundle file that doesn't exist. The structure and practical patterns are excellent for guiding Claude through Vaadin 25 responsive layout tasks.
Suggestions
Trim the 'Design Philosophy' section to 2-3 lines — Claude doesn't need the general explanation of what responsiveness means or the three-strategy framework explained at length.
Ensure the referenced 'references/responsive-patterns.md' file exists in the bundle, or remove the reference if it doesn't exist.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient but includes some unnecessary explanatory text, such as the 'Design Philosophy' section explaining three strategies and the general description of what responsiveness means. These are concepts Claude already understands. The component list and patterns sections are well-targeted, but the overall document could be tightened. | 2 / 3 |
Actionability | The skill provides fully executable Java and CSS code examples throughout, including concrete patterns like collapsible filter panels, responsive card grids, and Lumo utility class usage. The setup code, breakpoint table, and copy-paste-ready examples make this highly actionable. | 3 / 3 |
Workflow Clarity | For a responsive layout skill, there isn't a destructive multi-step workflow requiring validation checkpoints. The content clearly sequences the approach: choose strategy → leverage built-in components → apply CSS/utility classes → follow patterns. The best practices section provides clear guidance on what to do and what to avoid. This is appropriate for the skill's nature. | 3 / 3 |
Progressive Disclosure | The document references 'references/responsive-patterns.md' at the end, but no bundle files are provided, so we can't verify this reference exists. The main content is well-structured with clear sections, but the document is fairly long (~150 lines of content) and some sections like the full patterns could potentially be split into referenced files for better organization. | 2 / 3 |
Total | 10 / 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 | |
e47fdfe
Table of Contents
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.