ui-eng-vision-logic-consolidator

Consolidates manual DOM creation, updates, and constructors into private helper methods and structured state interfaces.

Quality

73%

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-logic-consolidator/SKILL.md

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 tight, actionable refactoring procedure with specific identifiers, code snippets, explicit pause-for-confirmation checkpoints, and a self-audit checklist — no padding or concept explanations. Its main gaps are the lack of executable validation commands behind the build check and unexplained references to an external orchestration context ('Pass 1', 'Parent Orchestrator Agent').

Suggestions

Add the concrete build/compile command behind the Mental Audit's 'Does the code still compile?' so the check is executable rather than rhetorical.

Briefly define or link the 'Parent Orchestrator Agent' / 'Pass 1' context — one or two lines stating what comes before and after this pass would make the subskill's boundary self-contained.

Fix grammar that costs clarity, e.g. 'Identify UI updates Creation' → 'Identify UI update creation', and 'modified during buttons clicks' → 'modified during button clicks'.

Dimension	Reasoning	Score
Conciseness	The ~85-line body is lean and imperative — numbered rules, short snippets, and genuinely non-obvious context like 'The Gerrit Code Review UI cannot identify moved blocks of unchanged code'. Not 5 because a few example chains ('e.g., element.createChild... document.createElement... appendChild') and the 'Identify UI updates Creation' phrasing could be tightened.	4 / 5
Actionability	Gives concrete, named targets — '#updateSummaryBar(...)', 'onPageSizeChanged', and 'performUpdate()' with the directive 'Use this specific identifier' — plus TypeScript member-variable and lit-html render snippets. Not 5 because the snippets are illustrative rather than copy-paste and the build audit gives no command to run.	4 / 5
Workflow Clarity	Six sequenced rules with explicit checkpoints: rule 5's prefactoring pause, rule 6's 'Wait for an explicit confirmation from the user (or Parent Orchestrator Agent)', and a Mental Audit checklist covering minimal diffs, state completeness, and build. Not 5 because the audit questions lack executable validation commands or an error-recovery loop (what to do when the build fails).	4 / 5
Progressive Disclosure	No bundle files exist; all content is appropriately inline for a compact procedural subskill, organized under a clear numbered-rules section plus a separate audit section. Not 5 because the body exceeds the under-50-line simple-skill allowance and it self-describes as 'Pass 1' of a parent-orchestrated flow without any pointer to sibling passes or the broader context.	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 gives a specific, third-person statement of what the skill does, but provides no guidance on when to use it and relies on technical jargon rather than natural trigger terms. It would be discoverable by a user who already knows the jargon, but easy to miss for one who does not.

Suggestions

Append an explicit trigger clause, e.g. 'Use when refactoring UI components with imperative DOM code in constructors or event handlers, or when migrating a component toward lit-html.'

Add natural trigger terms users would actually say — 'refactor UI code', 'clean up the constructor', 'consolidate event handlers', 'lit-html migration' — rather than only jargon like 'structured state interfaces'.

Mention the state-variable + performUpdate() pattern explicitly in the description so the skill's core contract is distinguishable from generic refactoring helpers.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete actions — 'manual DOM creation, updates, and constructors into private helper methods and structured state interfaces' — matching anchor 4 ('Lists several specific actions; minor gaps in coverage'). Not 5 because it omits the render/performUpdate consolidation workflow the body actually covers.	4 / 5
Completeness	Has a clear 'what' (consolidate DOM operations into helpers and state interfaces) but no 'when' — no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per judging guidelines. Not 2 because the 'what' is specific, not vague.	3 / 5
Trigger Term Quality	Terms like 'DOM', 'constructors', 'helper methods', 'state interfaces' are technical jargon; natural phrases a user would say ('refactor UI code', 'clean up the constructor', 'lit-html migration') are absent, matching anchor 3 ('Some relevant keywords but missing common variations or synonyms'). Not 4 because no natural user phrasing is present.	3 / 5
Distinctiveness Conflict Risk	The consolidation-into-private-helpers plus state-interface framing is a fairly distinct refactoring niche with minor overlap risk against general code-cleanup skills, matching anchor 4. Not 5 because the absence of trigger phrases leaves the boundary with related refactoring skills implicit.	4 / 5
	Total	14 / 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-eng-vision-logic-consolidator/SKILL.md
Commit: de3f9ca

Reviewed: 9 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.