portel-dev/visual-qa
skills/visual-qa/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add portel-dev/skills visual-qaInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 7:51 AM7.1s1 file scanned
SKILL.md
- name:
- visual-qa
- description:
- 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.
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 screenshotcall - 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.
Related Skills
portel-dev/vertical-video-design
development
VerifiedTrustedCommunity
Platform-aware design rules for vertical video (Reels, Shorts, TikTok, LinkedIn mobile). Covers safe zones, caption sizing/placement, aspect ratios, thumb-stopper hooks, effects that survive mobile compression, and per-platform cheatsheets. Use when building 9:16 / 4:5 / 1:1 video for social media - any time you need to decide where to place text, how big captions should be, what aspect ratio to export, or which effects survive mobile playback.
1SKILL.mdUpdated Apr 17, 2026
portel-dev/photon
tools
VerifiedTrustedCommunity
Build, test, validate, and improve Photon MCPs — single-file TypeScript MCP servers. Use for creating photons with @format annotations (table, chart:bar, slides), stateful photons using this.memory for persistent storage, photons with @readOnly/@destructive annotations, custom UI using @ui tags/HTML templates, photons wrapping APIs (Stripe, payments), task scheduler photons with cron, user-configurable settings (protected settings), this.render() for live output, photon build for standalone binaries, mermaid diagrams for photon architecture, editing .photon.ts files, @auth for MCP OAuth identity (this.caller), identity-aware locks for multiplayer/turn-based photons, @format slides for Marp-style presentations. Also use for validating photon UIs (promise checking, visual QA, functional testing), improving photon quality via autoloop, and auditing whether a UI consumes all backend methods. DO NOT trigger for general TypeScript or non-photon MCP.
1SKILL.mdUpdated Apr 17, 2026
openclaw/openclaw-secret-scanning-maintainer
development
VerifiedTrustedCommunity
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.
357,764SKILL.mdUpdated Apr 15, 2026
openclaw/openclaw-release-maintainer
development
VerifiedTrustedCommunity
Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.
357,764SKILL.mdUpdated Apr 10, 2026