ui-testing

Visual testing - catch invisible buttons, broken layouts, contrast

Quality

48%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/ui-testing/SKILL.md

Quality

Discovery

32%

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 provides a rough sense of the domain (visual testing) and lists a few example issues it catches, but it lacks concrete actions describing what the skill actually does and entirely omits 'when to use' guidance. It reads more like a tagline than a functional description that would help Claude reliably select this skill from a large pool.

Suggestions

Add an explicit 'Use when...' clause with trigger scenarios, e.g., 'Use when the user asks to check UI for visual bugs, accessibility contrast issues, or layout problems.'

Specify concrete actions the skill performs, e.g., 'Runs visual regression tests by comparing screenshots, validates WCAG contrast ratios, detects overlapping or hidden UI elements.'

Include natural trigger terms users might say, such as 'UI bugs', 'accessibility', 'visual regression', 'screenshot testing', 'responsive layout', or 'WCAG compliance'.

Dimension	Reasoning	Score
Specificity	Names the domain (visual testing) and some actions (catch invisible buttons, broken layouts, contrast), but these are more like problem categories than concrete actions. It doesn't specify what it actually does (e.g., 'runs visual regression tests', 'compares screenshots', 'validates CSS properties').	2 / 3
Completeness	Partially addresses 'what' (visual testing to catch certain issues) but completely lacks a 'when' clause. There is no 'Use when...' or equivalent trigger guidance, which per the rubric should cap completeness at 2, but the 'what' is also weak enough that this falls to 1.	1 / 3
Trigger Term Quality	Includes some relevant terms like 'visual testing', 'invisible buttons', 'broken layouts', and 'contrast', but misses common variations users might say such as 'accessibility', 'UI testing', 'screenshot comparison', 'visual regression', 'responsive design', or 'a11y'.	2 / 3
Distinctiveness Conflict Risk	'Visual testing' is a reasonably specific niche, but the description could overlap with accessibility testing skills, UI testing skills, or general layout/CSS skills. The lack of explicit file types, tools, or frameworks makes it somewhat ambiguous.	2 / 3
	Total	7 / 12 Passed

Implementation

64%

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

This is a practical, actionable skill with excellent concrete code examples and a useful contrast ratio reference table. Its main weaknesses are the lack of an explicit verification workflow with feedback loops (check → fix → re-check) and the somewhat monolithic structure that could benefit from splitting detailed reference material into companion files. The content is mostly efficient but includes some sections that add limited value for Claude.

Suggestions

Add an explicit feedback loop workflow: check → identify failures → apply fix → re-verify, especially since this is a verification/testing skill

Move the Tailwind contrast table and automated checks into referenced companion files (e.g., ui-web.md) to improve progressive disclosure and reduce the main file length

Dimension	Reasoning	Score
Conciseness	Generally efficient with useful reference tables and code examples, but includes some unnecessary guidance (e.g., explaining how to use browser DevTools, linking to online tools, explaining when to use full testing). The Tailwind contrast table is valuable and dense. Some sections like 'When to Use Full Testing' add marginal value.	2 / 3
Actionability	Highly actionable with concrete, copy-paste-ready code fixes for every common problem (invisible buttons, low contrast, missing focus states, small touch targets, dark mode). The Tailwind contrast ratio table with specific hex values and pass/fail indicators is immediately usable. The Playwright test and ESLint config are executable.	3 / 3
Workflow Clarity	The checklist provides a clear sequence of verification steps, but there's no explicit validation-then-fix feedback loop. The skill says 'run these checks after creating any new UI components' but doesn't define what to do when checks fail beyond individual fixes. For a verification/testing skill, a clearer pass/fail workflow with retry steps would strengthen this.	2 / 3
Progressive Disclosure	The header mentions 'Load with: ui-web.md or ui-mobile.md' suggesting companion files exist, but no bundle files are provided and these references aren't linked or explained further. The content is reasonably structured with clear sections, but the inline content is quite long and some sections (like the full Tailwind contrast table or automated checks) could be split into referenced files.	2 / 3
	Total	9 / 12 Passed

Validation

90%

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 — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: alinaqi/claude-bootstrap
Commit: df6ab96

Reviewed: about 2 hours 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.