CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-eng-vision-widget-promoter

Promotes legacy views to modern UI.Widget classes, hooks up performUpdate() rendering, and exports default views.

57

Quality

72%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/ui-eng-vision-widget-promoter/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

75%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a tight, actionable migration guide: numbered steps, concrete TypeScript patterns for each, safety rules, and a self-audit checklist with build/test verification. It falls short of top marks only in small ways — a truncated code example, checklist-style rather than inline validation, and one unlinked external reference. Overall a strong, reviewable skill document.

Suggestions

Complete the truncated constructor example (show the rest of the class or trim it to just the constructor signature) so the snippet is copy-paste ready.

Turn the "docs/ui_engineering.md" mention into an explicit link like the ui-widgets reference so navigation is consistent.

Add an explicit validate step with the actual build/test command (e.g. the specific npm script) in the Mental Audit instead of the bare question "Does the code compile and do tests pass?".

DimensionReasoningScore

Conciseness

The body is lean and spends its tokens on non-obvious specifics (e.g. "VBox and HBox inherit directly from Widget. They fully support view injection...") plus executable snippets, with only minor trimmable redundancy — the opening paragraph ("completes the architectural transition, upgrading the component from legacy base classes...") restates the description. That fits the 4 anchor (efficient, minor instances of over-explanation) rather than the fully lean 5.

4 / 5

Actionability

The guidance is mostly executable: concrete TypeScript for the DEFAULT_VIEW export, the INJECT/WidgetDependencies constructor, the performUpdate() override, and the <devtools-widget> usage. It stays at 4 rather than 5 because snippets are fragments — the constructor example is truncated mid-class, and imports/helpers (viewConfig, Lit, View) are not shown — leaving minor gaps for copy-paste use.

4 / 5

Workflow Clarity

The three migration steps are clearly sequenced (inheritance, view delegates, cleanup) and validation is present via the "Mental Audit" checklist ("Does the code compile and do tests pass?") and screenshot-diff debugging guidance. It does not reach 5 because validation is an end-of-work checklist rather than explicit mid-flow checkpoints or a validate-fix-retry loop.

4 / 5

Progressive Disclosure

The body is well sectioned at ~90 lines with one-level-deep, clearly signaled references ([devtools-ui-widgets](../ui-widgets/SKILL.md)); no bundle files exist, so there is nothing to split out. It fits 4 rather than 5 because the docs/ui_engineering.md reference is a bare mention rather than a link, and the code examples could live in the referenced parent skill where the framework rules already do.

4 / 5

Total

16

/

20

Passed

Description

58%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description communicates three concrete, domain-specific actions but omits any trigger guidance, so a user or Claude cannot tell from the description alone when to invoke it. Keywords are accurate but jargon-heavy, lacking the natural synonyms users would actually say. Adding a "Use when..." clause with plain-language triggers would resolve the main gaps.

Suggestions

Append an explicit trigger clause, e.g. "Use when migrating a DevTools view/panel off SimpleView or legacy wrapper layouts to the modern UI.Widget architecture."

Add natural-language synonyms users would say ("migrate", "modernize", "refactor to UI.Widget", "devtools-widget") alongside the API names.

Mention the migration's input/output context (legacy view classes -> modern widget) more plainly so the description reads as a task, not just API vocabulary.

DimensionReasoningScore

Specificity

The description names the domain and three concrete actions: "Promotes legacy views to modern UI.Widget classes", "hooks up performUpdate() rendering", "and exports default views". These are specific, API-level actions rather than generic verbs, but coverage of the full migration scope is incomplete (e.g., removing legacy wrappers, dependency injection), which keeps it below the comprehensive 5 anchor.

4 / 5

Completeness

The "what" is clear (three named actions), but there is no "Use when..." clause or any equivalent trigger guidance, which caps completeness at 3 per the judging guidelines.

3 / 5

Trigger Term Quality

Relevant keywords exist ("legacy views", "UI.Widget", "performUpdate()", "default views") but they are technical jargon; the natural phrases a user would say ("migrate", "modernize", "refactor this view/panel") are missing, matching the anchor for some relevant keywords without common variations.

3 / 5

Distinctiveness Conflict Risk

"UI.Widget" and "performUpdate()" carve out a clear niche (DevTools widget migration) with minimal conflict risk against generic skills; the slightly broad "legacy views" term leaves minor overlap risk, so it fits the 4 anchor rather than the clearly-distinct 5.

4 / 5

Total

14

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository
ChromeDevTools/devtools-frontend
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.