Tessl • The package manager for agent skills

Blog Docs Log inGet started

SkillPublic

ui-testing

Visual testing - catch invisible buttons, broken layouts, contrast

Quality

76%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/ui-testing/SKILL.md

Quality

Content

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

The content is highly actionable and lean, built around concrete checklists, exact thresholds, and copy-paste code fixes that make it immediately usable. Its main weaknesses are the broken 'Load with: ui-web.md or ui-mobile.md' reference to nonexistent files and the absence of any actual progressive-disclosure structure despite being a longer skill. Fixing the dangling load instruction (either shipping those files or removing the line) is the highest-impact improvement.

Suggestions

Resolve the dangling reference: either create ui-web.md and ui-mobile.md as reference files in the bundle, or remove the 'Load with: ui-web.md or ui-mobile.md' line — as written it points Claude at files that do not exist.

Consider splitting the Tailwind contrast table and the Automated Checks section (ESLint/Playwright setup) into a reference file to reduce the ~180-line body to a lean overview with one-level-deep references.

Trim the 'Use Browser DevTools' right-click walkthrough, which explains an inspection procedure Claude already knows, keeping only the contrast-ratio threshold guidance.

Dimension	Reasoning	Score
Conciseness	The body is dense with checklists, threshold values (44px, 4.5:1), and a Tailwind contrast table with almost no padding — matching 'efficient; minor instances of over-explanation'. It is not score 5 because the 'Right-click element → Inspect' DevTools walkthrough explains a procedure Claude already knows, and not score 3 because such padding is minor and isolated.	4 / 5
Actionability	Guidance is fully executable: copy-paste Tailwind fixes (e.g. "bg-gray-100 text-gray-900 px-4 py-3 rounded-lg"), an ESLint config snippet, and a complete Playwright/axe test cover the common cases with specific numeric thresholds — matching the top anchor.	5 / 5
Workflow Clarity	This is a simple single-purpose verification skill whose one action is unambiguous ('Run these checks after creating any new UI components'), and the entire body is an explicit validation checklist covering visibility, targets, states, dark mode, and responsive — satisfying the simple-skill exception with no destructive/batch operations requiring further validation loops.	5 / 5
Progressive Disclosure	Sections are clearly headed, but the body opens with 'Load with: ui-web.md or ui-mobile.md' — companion files that do not exist anywhere in the skill bundle (no references/ directory), a dangling navigation pointer. Combined with ~180 lines of inlined detail (contrast tables, automated-check setup) that could live in reference files, this matches 'some structure but could be better organized' rather than the 'minor organization gaps' of score 4.	3 / 5
	Total	17 / 20 Passed

Description

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

The description is compact and names concrete, memorable failure modes, but it omits any explicit 'when to use' trigger phrasing and misses key natural synonyms like 'accessibility' and 'a11y'. It distinguishes itself reasonably well from neighboring skills. Overall a mid-to-good description that would benefit from an explicit trigger clause and broader keyword coverage.

Suggestions

Add an explicit 'Use when...' clause to the description, e.g. 'Use when creating or reviewing UI components, or when the user mentions accessibility, contrast, or invisible/broken UI' — this lifts completeness from 3 to 4-5.

Include natural synonyms and variations users would actually say: 'accessibility', 'a11y', 'visual regression', 'UI components', 'contrast ratio' — currently only 'visual testing', 'buttons', 'layouts', 'contrast' are present.

Consider folding the when-to-use guidance ('When writing visual or accessibility tests for UI components') into the description itself so the trigger terms contribute to discovery, since the separate frontmatter field is not part of the evaluated description.

Dimension	Reasoning	Score
Specificity	"catch invisible buttons, broken layouts, contrast" names three concrete failure modes, matching the 'several specific actions; minor gaps' anchor; it is not score 5 because coverage is incomplete (no mention of touch targets, states, or dark mode) and not score 3 because more than 1-2 actions are listed.	4 / 5
Completeness	The description gives a clear 'what' ("Visual testing - catch invisible buttons, broken layouts, contrast") but contains no 'Use when...' trigger clause, which caps completeness at 3; a separate when-to-use frontmatter field exists but the description field itself leaves 'when' only weakly implied.	3 / 5
Trigger Term Quality	"Visual testing", "contrast", and "buttons" are natural user terms, but central synonyms such as "accessibility", "a11y", or "visual regression" are absent, matching the 'some relevant keywords but missing common variations' anchor rather than the 'a few natural terms missing' level.	3 / 5
Distinctiveness Conflict Risk	The specific failure-mode list ("invisible buttons, broken layouts, contrast") makes it mostly distinct from generic testing skills with only minor overlap risk against closely related accessibility or visual-regression skills; it is not score 5 because "Visual testing" alone is a shared term with those neighbors.	4 / 5
	Total	14 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

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

	Total	15 / 16 Passed

Repository: alinaqi/maggy
Path: skills/ui-testing/SKILL.md
Revision: 55aabe2

Reviewed: 26 days ago

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.

ui-testing

Table of Contents

Is this your skill?