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 is a terse fragment that hints at the skill's domain but lacks the structure and detail needed for reliable skill selection. It names a few specific visual issues which is helpful, but omits any 'Use when...' guidance and doesn't describe concrete actions the skill performs. Adding explicit trigger conditions and more specific capability descriptions would significantly improve it.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when the user asks about visual bugs, UI rendering issues, accessibility contrast checks, or layout problems.'

Expand the capability description with concrete actions, e.g., 'Detects invisible or hidden interactive elements, identifies broken CSS layouts, and checks color contrast ratios against WCAG standards.'

Include more natural trigger terms users might say, such as 'visual regression', 'UI bugs', 'accessibility', 'hidden elements', 'CSS layout', 'WCAG', or 'screenshot testing'.

Dimension	Reasoning	Score
Specificity	Names the domain (visual testing) and some specific issues (invisible buttons, broken layouts, contrast), but doesn't describe concrete actions like 'scans pages for...', 'generates reports', or 'compares screenshots'.	2 / 3
Completeness	Provides a partial 'what' (visual testing for certain issues) but completely lacks a 'when' clause or any explicit trigger guidance for when Claude should select this skill. Per rubric guidelines, missing 'Use when...' caps completeness at 2, and the 'what' is also weak, so this scores 1.	1 / 3
Trigger Term Quality	Includes some natural terms like 'invisible buttons', 'broken layouts', and 'contrast' that users might mention, but misses common variations like 'accessibility', 'UI testing', 'visual regression', 'screenshot comparison', or 'CSS issues'.	2 / 3
Distinctiveness Conflict Risk	The mention of 'visual testing' with specific examples like invisible buttons and contrast provides some distinctiveness, but could overlap with accessibility testing skills, UI testing skills, or general frontend debugging skills.	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 solid, practical UI verification skill with excellent actionability — the Tailwind contrast tables, concrete before/after code fixes, and the pre-flight checklist are immediately useful. Its main weaknesses are the lack of a true validation feedback loop integrating the checklist with the fixes, and the fact that referenced companion files (ui-web.md, ui-mobile.md) don't exist in the bundle, undermining the progressive disclosure structure.

Suggestions

Integrate the checklist and fixes into a workflow with explicit feedback loops: e.g., 'Run checklist → if invisible button found → apply fix from Common Fixes → re-run checklist item to verify'

Either provide the referenced ui-web.md and ui-mobile.md files or remove the reference to avoid confusion; consider splitting the Tailwind contrast table into a reference file

Dimension	Reasoning	Score
Conciseness	Generally efficient with useful reference tables and code examples, but includes some unnecessary framing (e.g., 'When to Use Full Testing' section with vague guidance, and the 'Purpose' section explaining what the skill does). The Tailwind contrast table and checklist are high-value, but some sections like online tool links and the ESLint setup are somewhat padded.	2 / 3
Actionability	Highly actionable with concrete, copy-paste-ready code fixes for each 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 pre-flight checklist provides a clear sequence of checks, but there's no explicit validation feedback loop — no 'if check fails, do X, then re-verify' pattern. For a verification skill that catches UI issues, the workflow is more of a static checklist than a sequenced process with checkpoints. The 'Common Fixes' section helps but isn't integrated into the checklist flow.	2 / 3
Progressive Disclosure	The skill references 'ui-web.md or ui-mobile.md' at the top suggesting a bundle structure, but no bundle files are provided and there are no other cross-references. The content is reasonably well-organized with clear sections, but the checklist, contrast tables, fixes, and automated checks are all inline in one file when some could be split out (e.g., the Tailwind contrast reference table).	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: 65efb33

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