design-reviewer

Name: design-reviewer
Availability: InStock
Author: titta

Evaluate React and Tailwind UI components against a five-dimension design rubric.

29|12|Updated Mar 30, 2026

Search Tags:#design #ui #accessibility #react #audit #quality #tailwind

Ready to run

npx skills add https://github.com/matteotitta/genesys-skills --skill design-reviewer-matteotitta

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-reviewer
Source: https://github.com/matteotitta/genesys-skills/tree/main/skills/meta/catalog/design-reviewer
Command: npx skills add https://github.com/matteotitta/genesys-skills --skill design-reviewer-matteotitta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the problem of inconsistent design quality and hidden technical debt in UI implementations by providing a standardized, rubric-based audit process.

Core Features & Use Cases

Multi-dimensional Scoring: Evaluates UI across anti-patterns, token compliance, motion craft, accessibility, and responsive integrity.
Severity-based Reporting: Generates a P0-P3 prioritized remediation report to unblock shipping decisions.
Use Case: Before deploying a new dashboard, run this skill to ensure all Tailwind classes align with your brand tokens and that motion transitions meet accessibility standards.

Quick Start

Invoke the design-reviewer skill to audit the current UI implementation for design quality and accessibility compliance.

Frequently Asked Questions about design-reviewer

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

FAQPage Schema

How do I audit React and Tailwind UI components for design quality and accessibility?▼

Audit React and Tailwind UI components by evaluating them against a five-dimension design rubric covering anti-patterns, token compliance, motion craft, accessibility, and responsive integrity to generate prioritized remediation reports.

What does a design quality rubric evaluate for production-grade visual deliverables?▼

A design quality rubric evaluates production-grade visual deliverables across five dimensions: anti-patterns, token compliance, motion craft, accessibility, and responsive integrity to ensure ship-ready status.

Can I use my brand-kit token contracts to check Tailwind class compliance?▼

Yes, you can check Tailwind class compliance by requiring adherence to defined design-quality libraries and brand-kit token contracts, ensuring all implemented UI classes align with your brand tokens.

How do I generate a prioritized remediation report for UI anti-patterns before shipping?▼

Generate a prioritized remediation report by running a rubric-based audit that scores UI implementations and outputs a P0-P3 severity-based report to unblock shipping decisions.

Does the UI design audit work with standard CSS or only React implementations?▼

The UI design audit works with React, Tailwind, and standard CSS-based visual deliverables, applying its multi-dimensional scoring to any production-grade implementation requiring quality assurance.

When do I need to run an accessibility and motion craft audit on my dashboard?▼

You need to run an accessibility and motion craft audit before deploying a new dashboard to ensure Tailwind classes align with brand tokens and motion transitions meet accessibility standards.