CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

ui-eng-vision-widget-promoter

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

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 dense, expert-level rulebook with executable TypeScript patterns, a clear three-step migration sequence, and an explicit self-audit checklist plus safety rules for screenshot goldens. Main weaknesses are run-on bullets that bury several rules each and code examples with placeholder ellipses rather than complete snippets.

Suggestions

Split the multi-rule WrapperWidget and ViewOutput bullets into short, individually scannable rules (or move the extended rationale into a reference file) to tighten token efficiency.

Complete the DEFAULT_VIEW and widget() code examples instead of 'html`...`' placeholders so they are copy-paste ready.

Add the concrete build/test commands behind the 'Does the code compile and do tests pass?' audit question to make the validation checkpoint executable.

DimensionReasoningScore

Conciseness

Nearly all content is project-specific rule-making (e.g., 'Never instantiate a child widget... in the presenter', 'Preserve existing standalone/module-level DOM helper functions') with no explanation of concepts Claude already knows. Not 5 because several bullets (the WrapperWidget and ViewOutput rules) are long run-on walls mixing multiple rules that could be tightened or split.

4 / 5

Actionability

Concrete TypeScript examples are given for DEFAULT_VIEW, the INJECT-based constructor, performUpdate(), and the widget() directive ('html`${widget(MyWidgetClass, {params})}`'). Not 5 because some examples contain '...' placeholders (the DEFAULT_VIEW body) and fragments rather than fully copy-paste-ready code; not 3 because the guidance is overwhelmingly executable rather than pseudocode.

4 / 5

Workflow Clarity

A clear three-step sequence (inheritance change, view delegate upgrade, wrapper cleanup) plus a 'Mental Audit' checklist ('Does the code compile and do tests pass?') and an error-recovery cue ('Look at the screenshot diffs to debug'). Not 5 because validation checkpoints are stated as self-audit questions without concrete build/test commands or an explicit validate-fix-retry loop.

4 / 5

Progressive Disclosure

Well-organized sections with a clearly signaled one-level reference ('Follow the rules defined in [`devtools-ui-widgets`](../ui-widgets/SKILL.md)') and no nested reference chains; no bundle files exist to verify further. Not 5 because dense multi-rule bullets are inlined in SKILL.md where separate reference files would ease navigation, and a mention of 'docs/uiengineering.md' is not a clearly signaled link.

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 states concrete, distinct capabilities in third person with no fluff, but it entirely lacks a 'when to use' clause and relies on implementation jargon rather than natural trigger phrases. Adding explicit usage triggers and common synonyms would raise completeness and trigger-term quality.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when migrating DevTools views off SimpleView or legacy wrappers onto UI.Widget during UI modernization passes.'

Include natural synonyms users would say, such as 'migrate', 'refactor', or 'modernize legacy DevTools views', alongside the API jargon.

Briefly broaden the capability list to cover the other documented actions (dependency injection via INJECT, WrapperWidget cleanup) for fuller coverage.

DimensionReasoningScore

Specificity

Quotes: 'Promotes legacy views to modern UI.Widget classes', 'hooks up performUpdate() rendering', 'exports default views' — three concrete, verifiable actions. Not 5 because coverage of the migration workflow (e.g., dependency injection, wrapper cleanup) is incomplete; not 3 because it lists several specific actions rather than just 1-2.

4 / 5

Completeness

The 'what' is clear ('Promotes legacy views to modern UI.Widget classes...'), but there is no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines. Not 2 because the 'what' is specific rather than vague.

3 / 5

Trigger Term Quality

Quotes: 'UI.Widget classes', 'performUpdate() rendering', 'default views' — relevant domain keywords but they are implementation jargon. Missing natural user phrasings and synonyms such as 'migrate', 'refactor', 'modernize', or 'DevTools views', so it matches 'some relevant keywords but missing common variations' rather than the good-coverage anchor.

3 / 5

Distinctiveness Conflict Risk

Quotes: 'legacy views', 'UI.Widget classes', 'performUpdate()' — a clear DevTools widget-migration niche unlikely to trigger unrelated skills. Not 5 because it overlaps with closely related UI-migration skills (the body references a sibling ui-widgets skill), leaving minor conflict risk.

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

Path

.agents/skills/ui-eng-vision-widget-promoter/SKILL.md

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.