Consolidates manual DOM creation, updates, and constructors into private helper methods and structured state interfaces.
54
60%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
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.mdThis subskill extracts manual layout building, attribute modifications, and rendering loops out of the constructor and scattered event handlers, consolidating them into private helper methods with explicit data contracts.
Identify UI updates Creation:
element.createChild('div'), document.createElement,
element.appendChild).render.Isolate Update and Draw Operations:
#updateSummaryBar(...) or #createEditorToolbar(...)).pageSize,
modified during buttons clicks) into centralized functions like
onPageSizeChanged.Define the State Interface:
Identify the class state and ensure it is captured in the private member variables, e.g.
#entries: Entry[];
#canGoBack: boolean;
#canGoForward: boolean;
#staleWarningVisible: boolean;Replace direct mutations of UI with updates to these member variables,
followed by a call to the public performUpdate() method that is
calling previously extracted update helpers. Use this specific
identifier.
If there's only one or two update helpers, consider inlining them into the
performUpdate.
Extract/Consolidate Rendering Operations:
If Logic First (imperative DOM remains), make sure all updates to the UI go through the performUpdate method
If Lit First (Lit template already exists), make sure there's a single master call to Lit render inside performUpdate. The master template might include calls to the helper functions e.g.
render(html`
<div class="specific-view">
<span>View Title</span>
${this.renderOverviewSection()}
</div>
`, this.contentElement);Minimize Diffs (Safety Rule):
Wait for confirmation:
Before reporting back or committing, re-read the instructions and verify:
184a74d
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.