ui-testing
Visual testing - catch invisible buttons, broken layouts, contrast
57
48%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/ui-testing/SKILL.mdQuality
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 any 'Use when...' guidance for selection. The trigger terms are somewhat relevant but incomplete, and the description 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, e.g., 'Use when the user asks about visual testing, UI bugs, layout issues, accessibility contrast checks, or screenshot comparisons.'
Describe concrete actions the skill performs, e.g., 'Runs visual regression tests, detects invisible or overlapping UI elements, validates color contrast ratios, and identifies broken layouts across viewports.'
Include more natural trigger terms users might say, such as 'UI testing', 'visual regression', 'accessibility', 'responsive layout', 'CSS bugs', 'screenshot diff'.
| 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 completely lacks a 'when' clause or any explicit 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 or general UI/CSS 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 the lack of explicit validation feedback loops (check → fix → re-check) and the opportunity to better leverage progressive disclosure by linking to companion files for detailed reference material like the Tailwind contrast table.
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 table and detailed code fix examples into a linked reference file (e.g., CONTRAST-REFERENCE.md) to keep the main skill leaner while preserving discoverability.
| 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 format is space-efficient but could be tighter in places. | 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 check fails, do X, then re-verify' pattern. For a verification skill involving potentially destructive UI shipping decisions, the lack of a retry/fix/re-check cycle caps this at 2. | 2 / 3 |
Progressive Disclosure | The opening mentions 'Load with: ui-web.md or ui-mobile.md' suggesting companion files exist, but there are no clear links or navigation to them. The content is well-sectioned with headers but includes substantial inline detail (contrast tables, multiple code examples) that could be split into reference files. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
90%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
d4ddb03
- 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.