skills.rest
ryan-mahoney
ryan-mahoneyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-auditor

Compare prototype HTML with implemented components to generate a grouped correction checklist.

Updated Mar 14, 2026
Search Tags:#ui#checklist#prototype#pixel-perfect#visual-qa#design-review#ux-audit
One-click install
npx skills add https://github.com/ryan-mahoney/ryan-llm-skills --skill ux-auditor-ryan-mahoney
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-auditor
Source: https://github.com/ryan-mahoney/ryan-llm-skills/tree/main/skills/ux-auditor
Command: npx skills add https://github.com/ryan-mahoney/ryan-llm-skills --skill ux-auditor-ryan-mahoney

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual parity between a prototype HTML and the implemented UI is critical for usability and stakeholder alignment. The UX Auditor helps teams identify, document, and prioritize deviations in a grouped, actionable checklist.

Core Features & Use Cases

  • Compare the prototype HTML to the top-level component to surface element-by-element mismatches in layout, typography, and interaction.
  • Generate a grouped markdown checklist that clearly shows current vs expected behavior, with evidence anchors for each deviation.
  • Use in design reviews, QA validation, and handoffs to developers, designers, and product managers.

Quick Start

Compare the prototype HTML with the top-level component and produce a grouped correction checklist.

Frequently Asked Questions about ux-auditor

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

FAQPage Schema
How do I audit UI components against a prototype for visual parity?▼

To audit UI parity, compare the prototype HTML with implemented top-level components to identify element-by-element mismatches in layout, typography, and interaction, generating a grouped correction checklist with evidence anchors.

What is a UX audit checklist and how does it document design deviations?▼

A UX audit checklist documents UI deviations between prototype HTML and implemented components by grouping mismatches into a structured markdown report that shows current versus expected behavior with evidence anchors for design reviews.

Can I use this visual QA process for developer handoffs and design reviews?▼

Yes, visual QA is designed for design reviews, QA validation, and developer handoffs, providing an evidence-backed report that helps designers, developers, and product managers align on pixel-perfect implementation.

How do I generate a design review report comparing expected and implemented UI behavior?▼

Generate a design review report by comparing prototype HTML to top-level components, which surfaces layout and typography deviations and outputs a grouped markdown checklist showing current versus expected behavior.

What's the best way to surface element-by-element mismatches in top-level UI components?▼

The best way to surface element mismatches is applying a UX audit across top-level UI components and pages, comparing against prototype HTML to produce a structured, evidence-backed correction checklist.

Does visual QA work without external dependencies or component libraries?▼

Yes, visual QA operates with no external dependencies or component libraries, directly analyzing prototype HTML and implemented components to generate a grouped markdown correction checklist.

Related Skills

Explore More Design & Creative Skills→
codesour-designcodesour-design

source-command-handoff

Create interactive HTML handoffs documenting Gravity prototype user flows and components.

Community
Advanced
silvarojasdiegoarturo91silvarojasdiegoarturo91

triage

Classify project issues into categories and manage their statuses.

Community
Intermediate
MadAppGangMadAppGang
278

ui-implementer

Generate UI components from Figma URLs and validate against design fidelity.

Official
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced