CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-visual-validator

Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification.

34

Quality

29%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills/skills/ui-visual-validator/SKILL.md

The canonical home for this skill is ui-visual-validator in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

23%Scale 1-5

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

This skill reads like a comprehensive job description or persona definition rather than an actionable skill instruction. It is severely verbose, listing dozens of capabilities, tools, and techniques without providing any concrete code, commands, or executable examples. The content would benefit enormously from being condensed to core workflow steps with specific tool usage examples, while moving reference material to separate files.

Suggestions

Replace the extensive capability bullet lists with 2-3 concrete, executable examples showing actual visual validation workflows (e.g., a Playwright visual comparison script, a contrast ratio check command, a BackstopJS config snippet).

Condense the skill to under 100 lines by moving tool lists, technique enumerations, and behavioral traits into the referenced `resources/implementation-playbook.md` file.

Add specific, copy-paste ready commands for the most common validation tasks (e.g., `npx backstop test`, Playwright screenshot comparison code, axe-core accessibility check).

Transform the 'Analysis Process' into a concrete workflow with explicit validation gates and error recovery steps, including specific tool commands at each step.

DimensionReasoningScore

Conciseness

Extremely verbose and padded. The skill extensively lists capabilities, tools, techniques, and behavioral traits that Claude already knows or could infer. Massive sections like 'Capabilities' with 8 subsections of bullet points are pure enumeration without actionable value. The content reads like a job description rather than a concise skill instruction.

1 / 5

Actionability

Almost entirely abstract and descriptive. There are no concrete code examples, no executable commands, no specific tool configurations, and no copy-paste ready snippets. The 'Analysis Process' provides a high-level sequence but lacks specific implementation details. The checklist is somewhat useful but still vague (e.g., 'Have I validated color contrast ratios meet WCAG standards?' without specifying how).

2 / 5

Workflow Clarity

The 'Analysis Process' provides an 8-step sequence and the 'Mandatory Verification Checklist' adds structure, but there are no explicit validation checkpoints with feedback loops. For a skill involving visual validation (which can be destructive in CI/CD contexts), the lack of concrete validate-fix-retry loops and specific tool commands caps this at 3.

3 / 5

Progressive Disclosure

The content is a monolithic wall of text with no meaningful separation into external files. It references `resources/implementation-playbook.md` once but provides no indication of what that file contains. The massive capability lists, tool enumerations, and technique descriptions should be split into separate reference files rather than inlined in the main skill file.

2 / 5

Total

8

/

20

Passed

Description

36%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 reads more like a role title than a skill description, using identity-based language ('expert specializing in') rather than describing concrete actions. It lacks a 'Use when...' clause entirely, and the capabilities listed are high-level categories rather than specific operations. The domain is identifiable but insufficiently detailed for reliable skill selection among many options.

Suggestions

Replace the role-based framing ('expert specializing in') with concrete action verbs describing what the skill does, e.g., 'Captures and compares screenshots, validates component styling against design tokens, checks color contrast and ARIA attributes.'

Add an explicit 'Use when...' clause with natural trigger phrases, e.g., 'Use when the user asks about visual regression testing, screenshot comparison, design system compliance, WCAG accessibility checks, or UI layout validation.'

Include specific file types, tools, or standards to improve distinctiveness, e.g., '.png diffs', 'Storybook components', 'WCAG 2.1 AA', 'Figma design tokens'.

DimensionReasoningScore

Specificity

Names the domain (UI testing, design system compliance, accessibility verification) but uses vague terms like 'expert specializing in' rather than listing concrete actions. No specific operations like 'captures screenshots', 'compares layouts', or 'checks color contrast' are mentioned.

2 / 5

Completeness

Provides a vague 'what' (visual validation, UI testing, design system compliance, accessibility verification) but has no 'when' clause at all. The absence of a 'Use when...' clause caps this at 3 per guidelines, and the 'what' is itself vague, so it falls to 2.

2 / 5

Trigger Term Quality

Includes some relevant keywords like 'UI testing', 'design system', and 'accessibility verification', but misses natural user phrases like 'visual regression', 'screenshot comparison', 'WCAG', 'contrast check', 'responsive layout', or 'pixel diff'.

3 / 5

Distinctiveness Conflict Risk

Somewhat specific to visual validation and UI testing, but 'accessibility verification' and 'design system compliance' could overlap with dedicated accessibility or design system skills. The lack of concrete actions makes it harder to distinguish from related skills.

3 / 5

Total

10

/

20

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.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.