CtrlK
BlogDocsLog inGet started
Tessl Logo

responsive-layouts

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

Quality

83%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

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.'

DimensionReasoningScore

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.

DimensionReasoningScore

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.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
vaadin/claude-plugin
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.