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.