ui-eng-vision-local-lit-renderer

Migrates legacy imperative DOM construction to local declarative Lit-html templates rendered inside existing containers.

Quality

67%

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-eng-vision-local-lit-renderer/SKILL.md

Quality

Content

77%

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

The content is a well-sequenced, actionable migration procedure with strong validation checkpoints and a self-audit checklist, scoring well on actionability and workflow clarity. Its main weakness is progressive disclosure: a large monolithic body that could be split into reference files, plus minor conciseness slack.

Dimension	Reasoning	Score
Conciseness	The body is mostly actionable procedural guidance rather than basic-concept padding, but includes some unnecessary explanatory asides such as 'The Gerrit Code Review UI cannot identify moved blocks of unchanged code' and could be tightened in places.	2 / 3
Actionability	It provides concrete executable snippets (e.g. `render(this.template(), this.containerField as HTMLElement);`, the Lit import statement, `.data=${{variant: Buttons.Button.Variant.OUTLINED}}`) and specific file paths to consult, giving copy-paste-ready guidance.	3 / 3
Workflow Clarity	A clear 13-step sequence is paired with explicit validation checkpoints (build, 0%-diff screenshot tests, per-micro-commit verification) and a closing Mental Audit self-correction checklist, forming a strong feedback loop.	3 / 3
Progressive Disclosure	Sections are well organized and external doc links are one level deep, but the ~130-line body is a monolithic single file with detailed procedural content that could be split into bundle references; no bundle files exist to offload it.	2 / 3
	Total	10 / 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 is specific and distinctive, occupying a clear technical niche, but it lacks any explicit 'Use when...' trigger guidance and leans on jargon rather than natural user terms. Adding a trigger clause and more natural keyword variations would lift its completeness and trigger-term quality.

Suggestions

Add an explicit 'Use when...' clause naming the trigger situations, e.g. 'Use when migrating DevTools views from imperative DOM construction to Lit-html templates, or when the user asks to convert imperative rendering to declarative templates.'

Soften jargon and add natural keyword variations users would actually say, such as 'Lit', 'LitHTML', 'declarative templates', and 'migrate to Lit' alongside 'Lit-html'.

Enumerate the concrete migration actions (e.g. convert helper methods to templates, wire render lifecycle, update CSS selectors) to raise specificity from a single composite action to multiple distinct actions.

Dimension	Reasoning	Score
Specificity	The phrase 'Migrates legacy imperative DOM construction to local declarative Lit-html templates rendered inside existing containers' names a concrete domain and action, but describes a single composite migration rather than multiple distinct concrete actions, so it is not comprehensive enough for a 3.	2 / 3
Completeness	It clearly states what the skill does but provides no 'Use when...' clause or equivalent explicit trigger guidance, which per the rubric caps completeness at 2.	2 / 3
Trigger Term Quality	Relevant terms like 'Lit-html templates', 'DOM', and 'rendering' are present, but the wording leans technical/jargony ('imperative DOM construction') and omits common natural variations a user might say, so it falls short of full coverage.	2 / 3
Distinctiveness Conflict Risk	The highly specific niche (DevTools Lit-html local renderer, Pass 2) with distinct technical triggers makes it clearly distinguishable and unlikely to fire for the wrong skill.	3 / 3
	Total	9 / 12 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 2 suspicious	Warning

	Total	15 / 16 Passed

Repository: ChromeDevTools/devtools-frontend
Path: .agents/skills/ui-eng-vision-local-lit-renderer/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.