devtools-ui-widgets

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

Quality

61%

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

65%

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

The content is highly actionable with complete executable examples and concrete rules, but it is monolithic (no reference files for a 380-line guide), repeats the @scope styling guidance across sections, and lacks explicit validation checkpoints in its refactoring workflow.

Suggestions

Consolidate the @scope styling guidance into one section and reference it elsewhere rather than re-explaining it in three places.

Extract the full step-by-step implementation example and/or the testing guide into reference files (e.g., EXAMPLE.md, TESTING.md) linked from the body, since the guide is well over 50 lines.

Add an explicit validation checkpoint to the refactoring workflow (e.g., 'After migration, run the widget tests / renderElementIntoDOM to verify behavior before proceeding').

Dimension	Reasoning	Score
Conciseness	The guide is dense and assumes Claude's competence (no basic-concept padding), but the @scope styling strategy is explained three times (Refactoring Note, Refactoring Legacy Components, Key Implementation Details, and the step-by-step example), so not every token earns its place and it could be tightened.	2 / 3
Actionability	It provides fully executable, copy-paste-ready TypeScript and CSS examples plus concrete APIs (UI.Widget.Widget, requestUpdate(), createViewFunctionStub, INJECT) and specific MUST/MUST NOT rules, giving clear executable guidance.	3 / 3
Workflow Clarity	The refactoring and implementation processes are clearly numbered (1-5, 1-3), but there are no explicit validation/verification checkpoints within the workflows; since refactoring legacy code is a modifying operation, workflow clarity is capped at 2.	2 / 3
Progressive Disclosure	The ~380-line body is well-organized into sections but is entirely monolithic with no bundle/reference files, so detailed examples and testing guidance that could live in separate reference files are inlined; the under-50-line simple-skill exemption does not apply.	2 / 3
	Total	9 / 12 Passed

Description

57%

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 DevTools MVP widget-building niche and what it covers, but it lacks an explicit 'when to use' trigger clause and leans on technical jargon over natural user keywords.

Suggestions

Add an explicit 'Use when...' clause, e.g. 'Use when building or refactoring DevTools UI widgets, or when the user mentions widgets, lit-html views, or widget lifecycle.'

Soften jargon by adding natural trigger terms users would say (e.g., 'DevTools widget', 'UI panel', 'widget state') alongside 'MVP architecture' and 'lit-html'.

Replace the generic 'Guidelines for building' / 'Covers' framing with concrete action verbs (e.g., 'Build, refactor, and test DevTools UI widgets...').

Dimension	Reasoning	Score
Specificity	Names the domain ('building UI widgets using the MVP architecture in DevTools') and topics ('Widget lifecycle, lit-html views, and state management'), but 'Guidelines for building' and 'Covers' describe rather than listing multiple concrete actions, so it is not comprehensive.	2 / 3
Completeness	It clearly states what the skill covers but provides no 'Use when...' clause or equivalent explicit trigger guidance, so the 'when' is only implied and completeness is capped at 2 per the rubric guidelines.	2 / 3
Trigger Term Quality	Includes some relevant natural terms ('UI widgets', 'DevTools', 'Widget') but leans on technical jargon ('MVP architecture', 'lit-html views') and misses common user phrasings, so coverage is partial.	2 / 3
Distinctiveness Conflict Risk	The combination of 'UI widgets', 'MVP architecture', and 'DevTools' carves out a clear niche with distinct triggers that is unlikely to conflict with other skills.	3 / 3
	Total	9 / 12 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: 184a74d

Reviewed: 3 days 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.