devtools-ui-widgets

Guidelines for building UI widgets using the MVP architecture in DevTools. Covers Widget lifecycle, lit-html views, and state management.

Quality

58%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.agents/skills/ui-widgets/SKILL.md

Quality

Content

63%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 highly actionable with concrete, copy-paste-ready examples and clearly sequenced workflows, but it is lengthy with several full examples inlined and contains a few minor typos/inconsistencies. Progressive disclosure is limited because no bundle files exist and most detailed material lives inline.

Suggestions

Fix the typo "UI.Widget.wiget" / "wiget" to "widget" and ensure the `widget` directive is imported (the example imports `widgetConfig` but calls `widget`).

Move the full step-by-step tutorial and testing guide into separate reference files (e.g. TUTORIAL.md, TESTING.md) and summarize them in SKILL.md with one-level-deep links.

Tighten prose sections (e.g. "Improving this Guide", styling notes) to reduce token load without losing the concrete rules.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient and assumes Claude's competence (no long explanations of what MVP is), but at ~375 lines with three full worked examples inlined it could be trimmed or externalized, matching the mostly-efficient-but-could-be-tightened anchor at 3 rather than 4.	3 / 5
Actionability	Provides concrete, copy-paste-ready TypeScript with exact signatures, field names, and a full testing example covering common cases, but minor gaps and inconsistencies ("UI.Widget.wiget" typo, unused `widgetConfig` import, `widget` referenced before import) keep it just below fully-executable at 5.	4 / 5
Workflow Clarity	The "Refactoring Legacy Components" and "Step-by-Step Implementation Example" sections are clearly numbered and sequenced; this is a code-pattern guide rather than a destructive/batch operation, so the missing validation-feedback loops only represent a minor gap, matching the clear-sequence anchor at 4.	4 / 5
Progressive Disclosure	No bundle files exist and the entire guide (~375 lines) is inlined under well-organized headers, but content that arguably belongs in separate files (full worked tutorial, testing guide, refactoring guide) is all inline, matching the some-structure-but-could-be-better-organized anchor at 3.	3 / 5
	Total	14 / 20 Passed

Description

53%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 clearly identifies a specific niche and lists relevant sub-topics, but it omits any explicit "Use when..." trigger guidance and uses generic verbs rather than concrete actions. It is solid but falls short of the strongest examples on completeness and trigger coverage.

Suggestions

Add a "Use when..." clause naming concrete triggers, e.g. "Use when building or refactoring DevTools UI widgets, or when working with the MVP Widget/lit-html view pattern."

Replace generic verbs ("Guidelines for building", "Covers") with concrete actions like "Build, compose, and refactor DevTools UI widgets using the MVP architecture."

Add natural keyword variants a user might say, such as "Widget", "Presenter", "lit-html view", "DevTools front_end widgets".

Dimension	Reasoning	Score
Specificity	Names the domain (DevTools UI widgets, MVP) and 2-3 concrete areas ("Widget lifecycle, lit-html views, and state management"), but verbs are generic ("Guidelines for building", "Covers") rather than concrete actions, so it falls short of the comprehensive-action anchor at 4.	3 / 5
Completeness	Provides a clear "what" but has no "Use when..." or equivalent explicit trigger guidance, which per the judging guidelines caps completeness at 3.	3 / 5
Trigger Term Quality	Includes relevant technical terms ("UI widgets", "MVP architecture", "DevTools", "lit-html", "state management") a user might say, but lacks natural variations, synonyms, or file extensions, so it does not reach good coverage at 4.	3 / 5
Distinctiveness Conflict Risk	The DevTools + MVP + lit-html framing is a fairly distinct niche with only minor overlap risk against closely related web-component skills, matching the mostly-distinct anchor at 4.	4 / 5
	Total	13 / 20 Passed

Validation

100%

Warnings & errors only

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

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: ChromeDevTools/devtools-frontend
Path: .agents/skills/ui-widgets/SKILL.md
Commit: 31f2967

Reviewed: ~16 hours ago

Table of Contents

Discovery Implementation Validation

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.