ui-testing

Visual testing - catch invisible buttons, broken layouts, contrast

Quality

48%

Does it follow best practices?

Impact

Pending

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 both concrete action verbs describing what the skill does and an explicit 'Use when...' clause. It provides some useful trigger terms around visual defects but misses many natural variations users might employ. The description needs significant expansion to be effective for skill selection among many options.

Suggestions

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

Describe concrete actions the skill performs, e.g., 'Analyzes screenshots for visual regressions, detects invisible or hidden interactive elements, validates color contrast ratios against WCAG standards, and identifies broken CSS layouts.'

Include more natural trigger terms and file/technology references like 'UI testing', 'accessibility', 'WCAG', 'screenshot comparison', 'CSS layout', 'responsive design', 'visual regression'.

Dimension	Reasoning	Score
Specificity	Names the domain (visual testing) and lists some specific issues it catches (invisible buttons, broken layouts, contrast), but doesn't describe concrete actions like 'runs visual regression tests' or 'compares screenshots' — it's more a list of what it detects than what it does.	2 / 3
Completeness	Provides a partial 'what' (catch visual issues) but has no explicit 'when' clause or trigger guidance. Per the rubric, a missing 'Use when...' clause caps completeness at 2, and the 'what' is also weak, so this scores a 1.	1 / 3
Trigger Term Quality	Includes some natural terms like 'invisible buttons', 'broken layouts', 'contrast' that users might mention, but misses common variations like 'UI testing', 'accessibility', 'visual regression', 'screenshot comparison', 'CSS bugs', or 'responsive design'.	2 / 3
Distinctiveness Conflict Risk	The phrase 'visual testing' combined with specific examples like 'invisible buttons' and 'contrast' provides some distinctiveness, but it could overlap with accessibility testing skills, UI testing skills, or general CSS/layout 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 contrast ratio tables, problem/fix code pairs, and tool configurations are immediately useful. Its main weaknesses are a missing explicit validation feedback loop (check → fix → re-check) and some content that could be offloaded to reference files for better progressive disclosure. The conciseness is good but not exceptional, with a few sections that could be trimmed.

Suggestions

Add an explicit feedback loop to the workflow: after applying fixes, re-run the checklist or automated checks to verify the issues are resolved before shipping.

Move the Tailwind contrast ratio reference table and automated checks into separate referenced files (e.g., CONTRAST_REFERENCE.md, AUTOMATED_CHECKS.md) to keep the main skill leaner.

Dimension	Reasoning	Score
Conciseness	Generally efficient with useful reference tables and code examples, but some sections like the 'When to Use Full Testing' guidance and the 'Purpose' section add modest fluff. The checklist is comprehensive but could be slightly tighter.	2 / 3
Actionability	Highly actionable with executable TSX code fixes, specific Tailwind class names with exact contrast ratios, concrete DevTools steps, and copy-paste ready Playwright and ESLint configurations. Every problem/fix pair is immediately usable.	3 / 3
Workflow Clarity	The pre-flight checklist provides a clear sequence of checks, but there's no explicit validation feedback loop — no 'if checks fail, do X, then re-verify' cycle. For a verification skill that catches broken layouts, the absence of a retry/fix/re-check workflow is a gap.	2 / 3
Progressive Disclosure	The opening mentions 'Load with: ui-web.md or ui-mobile.md' suggesting companion files exist, but these aren't clearly signaled as navigation references. The content is well-sectioned but the automated checks and contrast tables could be split into reference files rather than inline.	2 / 3
	Total	9 / 12 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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: alinaqi/claude-bootstrap
Commit: 24cfe58

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