skills.rest
matteotitta
matteotittaCOMMUNITY
Explore all skills by this author →
Website𝕏@matteo_tittaGitHub

design-reviewer

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
One-click install
npx skills add https://github.com/matteotitta/genesys-skills --skill design-reviewer-matteotitta
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
nsuberinsuberi

audit

Audit web UI components for quality issues and generate a scored P0-P3 remediation report.

Community
Advanced
majesticlabs-devmajesticlabs-dev
47

tailwind-styling

Generate responsive Tailwind CSS styles for React components.

Official
Intermediate
curiositechcuriositech
181

design-accessibility-auditor

Audit designs and UI components for WCAG 2.1 compliance with specific fixes.

Official
Advanced