CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-eng-vision-local-lit-renderer

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

58

Quality

67%

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-local-lit-renderer/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

81%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 skill body is a well-structured, actionable migration playbook with executable code examples, explicit validation/feedback loops, and a self-correction checklist. Its main limitation is the absence of any bundle files to split the fairly dense procedural content into deeper references.

DimensionReasoningScore

Conciseness

The body is largely efficient procedural guidance without re-explaining concepts Claude already knows, with only minor instances of wording that could be trimmed (e.g. the explanatory clauses around 'Minimize Code Movement').

4 / 5

Actionability

It provides concrete executable code (the lit import, `render(this.template(), this.containerField as HTMLElement)`, and the variant binding example) with specific directives, leaving only minor gaps such as omitted full template examples for each pattern.

4 / 5

Workflow Clarity

The 13 sections form a clear sequence with explicit validation checkpoints (build + tests + 0% visual diff after each micro-commit), feedback loops (fix and re-verify before proceeding), and a closing Mental Audit checklist.

5 / 5

Progressive Disclosure

Content is organized into well-numbered sections with clearly signaled one-level-deep external references (ui_engineering.md, the eslint migration rule) and no nested references; there is no bundle directory to offload detail into, so minor inline density keeps it just below 5.

4 / 5

Total

17

/

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 is specific and clearly states what the skill does, but it lacks any explicit trigger guidance ('Use when...') and leans on technical jargon over natural user phrases. These gaps cap completeness and trigger-term quality at the midpoint.

Suggestions

Add an explicit 'Use when...' clause with concrete trigger phrases, e.g. 'Use when migrating imperative DOM helpers to Lit-html templates or when the user asks to convert DevTools views to Lit.'

Include natural synonyms and file/type signals a user might say (e.g. 'Lit templates', 'convert to Lit', 'imperative DOM', 'Widget rendering') alongside the technical terms.

Consider listing one or two more concrete actions (e.g. 'factor templates into helper functions', 'update CSS selectors for custom elements') to broaden coverage.

DimensionReasoningScore

Specificity

The description names the domain ('legacy imperative DOM construction') and two concrete actions ('Migrates ... to local declarative Lit-html templates' and 'rendered inside existing containers'), but coverage is not comprehensive with only one primary action verb.

3 / 5

Completeness

The 'what' is clearly stated, but there is no 'Use when...' clause or equivalent explicit trigger guidance, so completeness is capped at 3 per the judging guidelines.

3 / 5

Trigger Term Quality

It includes relevant terms (Lit-html, templates, declarative, DOM, containers) but these are technical jargon rather than the natural phrases a user would say, and common synonyms are missing.

3 / 5

Distinctiveness Conflict Risk

The niche is highly specific (Lit-html migration rendered in existing containers) making conflict risk low, though it could still overlap with other Lit/web-component migration skills.

4 / 5

Total

13

/

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 2 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.