visual-qa-rubric

Apply a 10-category visual QA rubric with 0-2 scoring to frontend UI screenshots.

16|Updated Apr 30, 2026
One-click install
npx skills add https://github.com/JCE-Joshhh77/JCE-Opencode-Tools --skill visual-qa-rubric
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-qa-rubric
Source: https://github.com/JCE-Joshhh77/JCE-Opencode-Tools/tree/main/config/skills/visual-qa-rubric
Command: npx skills add https://github.com/JCE-Joshhh77/JCE-Opencode-Tools --skill visual-qa-rubric

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA is often manual, inconsistent, and time-consuming. This skill provides a repeatable rubric to systematically evaluate UI visuals, accessibility, and responsiveness.

Core Features & Use Cases

  • Visual QA scoring across a 0-2 scale for 10 categories: Hierarchy, Spacing Rhythm, Typography, Color/Contrast, Layout Density, Responsive, Interaction States, Backend Reality, Anti-AI Smell, and Brand Fit.
  • Browser/Screenshot workflow: captures DOM structure and accessibility data, desktop and mobile screenshots, checks console errors and failed requests, and guides remediation with a structured report.
  • Anti-AI smell checks and brand alignment to ensure UI remains product-specific.

Quick Start

Run the visual-qa-rubric skill on your frontend page to generate a Visual QA Report.

Frequently Asked Questions about visual-qa-rubric

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is a visual QA rubric for frontend UI?▼

A visual QA rubric systematically evaluates frontend UI quality by scoring visual integrity, accessibility, and responsive behavior across 10 categories using a 0-2 scale to produce a structured remediation report.

How do I check my UI for anti-AI style patterns?▼

To check for anti-AI style patterns, apply a visual QA rubric that includes specific anti-AI smell checks alongside brand alignment validation to ensure your UI remains product-specific and authentic.

Can I perform responsive design checks across desktop and mobile?▼

Yes, the visual QA process captures desktop and mobile screenshots, extracts DOM structure, and checks console errors to evaluate responsive behavior and layout density across viewport contexts.

How do I score UI design polish consistently?▼

You score UI design polish by applying a 10-category rubric covering hierarchy, spacing rhythm, typography, color contrast, and interaction states, assigning 0-2 points per category to generate actionable fixes.

Does visual regression testing cover accessibility data?▼

Visual QA rubric workflows capture accessibility data alongside browser screenshots to evaluate color contrast, hierarchy, and interaction states, ensuring frontend pages meet visual integrity and accessibility standards.

When should I use a structured visual QA report?▼

Use a structured visual QA report when manual UI reviews become inconsistent or time-consuming, requiring a repeatable rubric to systematically evaluate visual integrity, responsiveness, and brand fit before shipping.