client-side-views
Guide Claude on building client-side (React/Hilla) views in Vaadin 25. This skill should be used when the user asks to "build a client-side view", "create a React view", "use Hilla", "use @BrowserCallable", "file-based routing", "call Java from React", "create an offline view", "client-side rendering", "use ViewConfig", "create a Hilla endpoint", "use reactive endpoints", "subscribe to server push from React", "use signals in React", or needs help with React-based Vaadin views, file-based routing conventions, or type-safe backend communication.
64
77%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/client-side-views/SKILL.mdQuality
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 description excels at trigger term coverage and completeness, providing an extensive list of explicit trigger phrases that make it easy for Claude to select this skill. Its main weakness is that the 'what it does' portion is somewhat thin—it says 'Guide Claude on building client-side views' but doesn't enumerate the specific capabilities (e.g., setting up file-based routing, creating type-safe endpoints, configuring signals). The distinctiveness is excellent due to the highly specific technology stack.
Suggestions
Expand the opening 'what it does' clause to list specific concrete actions, e.g., 'Creates React/Hilla views, configures file-based routing, sets up @BrowserCallable endpoints, implements reactive signals, and enables offline capabilities in Vaadin 25.'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names the domain (client-side React/Hilla views in Vaadin 25) and mentions some actions like 'building client-side views,' but the 'what it does' portion is limited to 'Guide Claude on building client-side (React/Hilla) views' without listing multiple concrete actions like creating endpoints, configuring routing, setting up signals, etc. | 2 / 3 |
Completeness | The description clearly answers both 'what' (building client-side React/Hilla views in Vaadin 25) and 'when' with an extensive explicit 'Use when' clause listing numerous trigger phrases and scenarios. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'build a client-side view', 'create a React view', 'use Hilla', '@BrowserCallable', 'file-based routing', 'call Java from React', 'create an offline view', 'use ViewConfig', 'create a Hilla endpoint', 'use reactive endpoints', 'subscribe to server push from React', 'use signals in React'. These are highly specific and natural phrases. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with very specific technology stack (Vaadin 25, Hilla, React, @BrowserCallable, ViewConfig) and domain-specific triggers that are unlikely to conflict with generic React or Java skills. | 3 / 3 |
Total | 11 / 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, actionable skill with excellent code examples covering the major aspects of Hilla/React views in Vaadin 25. Its main weaknesses are references to non-existent bundle files ('the reference file'), some unnecessary conceptual explanations that Claude doesn't need, and the lack of an end-to-end workflow with validation checkpoints. The content would benefit from either providing the referenced files or inlining the critical details.
Suggestions
Create the referenced bundle files (e.g., a reference file for ViewConfig properties, error handling template, and Subscription API table) or inline the critical details to eliminate dead-end references.
Add an end-to-end workflow section showing the complete sequence for creating a new client-side view: create the .tsx file → create the @BrowserCallable service → verify generated clients → test the endpoint call, with explicit validation checkpoints.
Trim the 'When to Use Client-Side Views' section to a brief bullet list — Claude doesn't need the conceptual explanation of client-side vs server-side rendering tradeoffs.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is generally well-structured but includes some unnecessary explanations Claude would already know (e.g., explaining what client-side views are, when to use them vs Flow, explaining what signals do conceptually). The 'When to Use Client-Side Views' section and some best practices restate general knowledge. However, the code examples and tables are lean and efficient. | 2 / 3 |
Actionability | The skill provides fully executable, copy-paste-ready code examples throughout — Java endpoints, React components, routing conventions, ViewConfig, reactive subscriptions, and signals. Every major concept has a concrete, complete code example with correct imports. | 3 / 3 |
Workflow Clarity | The skill covers individual features well but lacks an end-to-end workflow showing how to create a new client-side view from scratch (e.g., create file → write endpoint → generate clients → test). There are no explicit validation checkpoints — for instance, no guidance on verifying that generated TypeScript clients are correct or that endpoint security annotations are properly applied. | 2 / 3 |
Progressive Disclosure | The skill references 'the reference file' multiple times (for ViewConfig properties, error handling template, Subscription API table) but no bundle files are provided, making these references dead ends. The content is well-sectioned but somewhat monolithic at ~200+ lines; some sections (like the full error handling or ViewConfig property table) could be split into referenced files for better organization. | 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.