Visual qa

Skill portel-dev/skills/skills/visual-qa

Official skills repository for Portel Photon

Install

npx -y skills add portel-dev/skills --skill visual-qa

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Automated visual UI issue detection from screenshots. Use EVERY TIME you take a screenshot with agent-browser during UI development. Runs local Qwen3-VL model on Apple Silicon — zero API cost. Catches layout bugs, contrast issues, missing content, alignment problems, and accessibility violations that you'd otherwise miss while focused on one specific fix.

SKILL.md

3.1 KB, 681 tokens by cl100k_base, as published. Nobody here has run it

Visual QA — Screenshot Issue Detector

When to Use

ALWAYS run visual-qa after taking any screenshot during UI development or testing. This is non-negotiable — it catches the issues you miss while focused on your specific task.

Trigger on:

Any agent-browser screenshot call
User says "check the UI", "audit the interface", "what's wrong with this"
After building or modifying any HTML/CSS/UI code
Before committing UI changes

How to Use

Quick Review (most common)

# Take screenshot
agent-browser screenshot /tmp/ui-check.png

# Run visual QA via the photon
photon cli visual-qa review --image /tmp/ui-check.png

Before/After Comparison

# Take before screenshot
agent-browser screenshot /tmp/before.png

# ... make changes ...

# Take after screenshot
agent-browser screenshot /tmp/after.png

# Compare
photon cli visual-qa compare --before /tmp/before.png --after /tmp/after.png

Check Setup

photon cli visual-qa status

Reading the Output

The review returns a markdown report with:

Score (0-100): A = 90+, B = 75+, C = 60+, D = 40+, F = below 40
Issues sorted by severity:
- 🔴 CRITICAL — must fix before committing
- 🟡 WARNING — should fix, noticeable to users
- 🔵 INFO — minor, nice to fix

Issue Categories

Category	What It Catches
LAYOUT	Overlapping elements, broken grids, overflow, clipping
CONTENT	Empty areas, placeholder text, truncated text, missing icons
TYPOGRAPHY	Inconsistent fonts, unreadable text, wrong weight
CONTRAST	Low contrast, clashing colors, elements blending in
INTERACTIVE	Buttons not looking clickable, unclear affordances
SPACING	Inconsistent padding, misalignment, crowding
RESPONSIVE	Wrong sizing, horizontal scroll, unfilled space
EMPTY_STATE	Missing empty state messages, blank unexplained panels
CONSISTENCY	Mixed UI patterns, inconsistent styles
ACCESSIBILITY	Missing labels, color-only indicators, tiny targets

How It Works

Runs Qwen3-VL-8B locally via MLX on Apple Silicon
~5 GB model, inference takes 15-45 seconds per screenshot
No API calls, no cost, no data leaves the machine
First run downloads the model (~5 GB one-time)

Workflow Integration

When you get the issue list back:

Critical issues: Fix immediately before proceeding
Warnings: Fix if they're in the area you're working on
Info: Note for later, don't block current work
New issues from compare: These are regressions YOU introduced — fix them

Do NOT ignore the output. The whole point is to catch what you miss.

Prerequisites

pip install -U mlx-vlm  # One-time setup

The model downloads automatically on first use.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.