qa-screenshot-validation
Evaluate captured screenshots for layout issues, masked elements, and rendering problems. Use after taking screenshots to validate visual correctness and automatically resize viewport if elements are unexpectedly clipped.
Install with Tessl CLI
npx tessl i github:jpoutrin/product-forge --skill qa-screenshot-validation84
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
85%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a well-crafted description that clearly articulates specific capabilities and includes an explicit 'Use when' clause with actionable triggers. The description effectively communicates its niche purpose of post-screenshot validation. Minor improvement could be made by expanding trigger terms to include more natural user language variations.
Suggestions
Add natural language variations users might say, such as 'screen capture', 'visual bugs', 'UI issues', or 'cut off elements'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'evaluate captured screenshots', 'validate visual correctness', 'automatically resize viewport', and identifies specific issues to detect: 'layout issues, masked elements, rendering problems'. | 3 / 3 |
Completeness | Clearly answers both what ('Evaluate captured screenshots for layout issues, masked elements, and rendering problems') and when ('Use after taking screenshots to validate visual correctness and automatically resize viewport if elements are unexpectedly clipped'). | 3 / 3 |
Trigger Term Quality | Includes relevant terms like 'screenshots', 'viewport', 'layout issues', 'rendering problems', but missing common variations users might say like 'screen capture', 'visual bugs', 'UI validation', or 'clipped content'. | 2 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on screenshot validation and viewport resizing for visual correctness - distinct from general screenshot-taking skills or broader testing/QA skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides highly actionable guidance with clear workflows and concrete code examples for screenshot validation. However, it suffers from verbosity - the same rules (especially mobile/tablet no-resize) are repeated across multiple sections in different formats. The content would benefit from consolidation and splitting reference material into separate files.
Suggestions
Consolidate the mobile/tablet no-resize rule into a single authoritative section instead of repeating it in tables, code blocks, and prose
Move the viewport breakpoints reference table and issue documentation format template to separate reference files (e.g., VIEWPORTS.md, ISSUE_TEMPLATE.md)
Remove redundant explanations - the validation checklist, detection heuristics, and common issues tables have significant overlap that could be merged
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains useful information but is verbose with repetitive content. The same concepts (mobile/tablet no-resize rule, clipping detection) are explained multiple times in different formats. Tables, checklists, and flowcharts often duplicate information. | 2 / 3 |
Actionability | Provides concrete, executable JavaScript code for viewport resizing, clear decision logic with pseudocode, specific viewport dimensions, and detailed example outputs. The Playwright commands are copy-paste ready. | 3 / 3 |
Workflow Clarity | Clear multi-step validation flow with explicit decision points (desktop vs mobile/tablet), retry logic, and documented outcomes. The automated validation flow diagram and integration steps provide unambiguous sequencing with validation checkpoints. | 3 / 3 |
Progressive Disclosure | Content is reasonably organized with clear sections, but everything is in one monolithic file. The extensive reference tables (viewport breakpoints, issue documentation format) could be split into separate reference files, with SKILL.md providing just the core workflow. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
100%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.
- 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.