CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-eng-vision-test-scaffolder

Scaffolds unit tests and screenshot tests to establish visual and functional rendering baselines for views before refactoring.

62

Quality

78%

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-test-scaffolder/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.

A strong, highly actionable body: nearly all content is non-obvious project knowledge, with a clearly sequenced workflow, explicit validation checkpoints, error-recovery scenarios, and a self-audit checklist. The main improvement is moving the environment-troubleshooting scenarios into a reference file and defining the mock-input placeholders.

DimensionReasoningScore

Conciseness

Nearly every section conveys project-specific knowledge Claude cannot already know (Cider workspace commands, depot_tools troubleshooting, the includeCommonStyles toggle procedure, assertScreenshot patterns). Minor trimming opportunities exist — the 'Why it is required' explanations and the somewhat rambling common-styles toggle instructions — so it fits anchor 4 rather than the fully lean anchor 5.

4 / 5

Actionability

The body provides concrete, mostly executable guidance: a TypeScript test example using renderElementIntoDOM/assertScreenshot, copy-paste bash commands with real paths, and specific symptom strings for error detection. Minor gaps (placeholders like MyComponent and mockViewInput are never defined, and the referenced CategorizedBreakpointsSidebarPane.test.ts pattern is assumed) keep it below anchor 5's fully copy-paste-ready bar.

4 / 5

Workflow Clarity

The test verification lifecycle is clearly sequenced (verify existing tests → detect hybrid-file gaps → scaffold missing tests → wait for confirmation) with explicit validation checkpoints ('Verify that the component compiles and mounts successfully'), symptom→resolution error-recovery scenarios (A–D), and a closing self-audit checklist. This matches anchor 5's clear sequence with explicit validation, feedback loops, and a checklist.

5 / 5

Progressive Disclosure

No bundle files exist, and the single-file body is well-organized under clear section headers (lifecycle, environment detection, self-audit), so navigation is easy. However, the four environment-troubleshooting scenarios are the kind of detail that could live in a separate reference file to keep SKILL.md lean — anchor 4's 'good structure, minor organization gaps' rather than anchor 5's ideal split.

4 / 5

Total

17

/

20

Passed

Description

66%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.

A specific, third-person description with concrete actions, but it omits any explicit 'when to use' trigger guidance, which caps its completeness. Adding a usage clause would lift it substantially.

Suggestions

Add a 'Use when...' clause, e.g., 'Use when preparing to refactor or migrate UI view code and a regression safety net is needed first.'

Include natural trigger synonyms users would say, such as 'golden tests', 'UI regression tests', or 'visual snapshot tests', to broaden keyword coverage.

Mention the environment context (e.g., Chromium/DevTools front-end views) to further distinguish this from generic test-scaffolding skills.

DimensionReasoningScore

Specificity

The description names three concrete actions in third person — "Scaffolds unit tests and screenshot tests", "establish visual and functional rendering baselines" — but stops short of comprehensive coverage (e.g., interaction tests are only implied). It lists several specific actions with minor gaps, matching anchor 4 rather than anchor 5.

4 / 5

Completeness

The 'what' is clear (scaffolds unit and screenshot tests to establish rendering baselines), but there is no 'Use when...' clause or equivalent explicit trigger guidance — the 'when' is only weakly implied by "before refactoring". Per the judging guidelines, a missing 'Use when...' clause caps completeness at 3; it is not 4 because the usage context is never explicitly stated.

3 / 5

Trigger Term Quality

Natural phrases a user would say are present: "unit tests", "screenshot tests", "visual baselines", "before refactoring". A few natural variations are missing (e.g., "UI tests", "golden tests", "regression tests"), which fits anchor 4's 'good keyword coverage; a few natural terms missing' rather than anchor 5's synonym-complete coverage.

4 / 5

Distinctiveness Conflict Risk

The pre-refactoring visual-baseline niche is fairly distinct, but the generic phrase "scaffolds unit tests" creates minor overlap with general test-writing skills. Mostly distinct with minor overlap risk fits anchor 4; it lacks the clearly distinct trigger phrases of anchor 5.

4 / 5

Total

15

/

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.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 1 missing

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.