visual-quality-review

Reviews frontend interfaces for typography, spacing, hierarchy, contrast, and AI slop violations.

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/1arley/volibear --skill visual-quality-review-1arley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-quality-review
Source: https://github.com/1arley/volibear/tree/main/.opencode/skills/visual-quality-review
Command: npx skills add https://github.com/1arley/volibear --skill visual-quality-review-1arley

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often look generic, amateur, or AI-generated without a structured way to diagnose why. This Skill gives an agent a measurable framework to evaluate visual execution quality against a defined craft bar instead of relying on subjective taste. ## Core Features & Use Cases - Nine evaluation axes: typography, spacing, hierarchy, density, contrast, composition, consistency, visual noise, and AI slop patterns, each with concrete attack patterns and measurable criteria like WCAG 4.5:1 contrast ratios. - Confidence-scaled findings: every violation is classified as CONFIRMED, HIGH CONFIDENCE, POSSIBLE, or SPECULATIVE, with false-positive guidance for design-system deviations and intentional density choices. - Use Case: A landing page feels generic and unpolished. Run this review to detect the default blue-purple gradient, Lucide icons without personality, an inconsistent heading scale, and low-contrast body text, then receive concrete fixes per axis. ## Quick Start Review this frontend interface for visual quality issues across typography, spacing, hierarchy, contrast, and AI slop patterns.

Frequently Asked Questions about visual-quality-review

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

FAQPage Schema
How do I review a frontend interface for visual quality issues?▼

Evaluate the interface across nine axes: typography, spacing, hierarchy, density, contrast, composition, consistency, visual noise, and AI slop. For each violation, name the axis, show the exact element, reference the expected standard, and assign a confidence level.

How to detect AI-generated design patterns in a UI?▼

Look for generic markers like blue-purple gradients, Lucide icons without personality, decorative SVG waves, headlines like "Build Something Amazing", generic avatars, and placeholder copy. These patterns indicate unreviewed AI output and should be flagged as AI slop findings.

What contrast ratio is required for readable body text?▼

Body text should meet at least a 4.5:1 contrast ratio against its background. For example, gray-400 text on a gray-50 background yields roughly 1.8:1, which is a measurable CONFIRMED violation.

When is a visual inconsistency not actually a defect?▼

When the design system defines the pattern and the interface follows it, the deviation is from the system, not a visual error. Intentional density choices, deliberate dark-mode color differences, and brand-serving decoration are also false positives to contextualize rather than report as defects.

Can this review run alongside UX and interaction design reviews?▼

Yes, visual quality review is designed to compose with ux-review and interaction-design skills, since UX, interaction, and visual execution are complementary concerns that together cover the complete experience.