design-audit

Audit UIs against Universal Design System standards and generate scored reports.

3|Updated Mar 11, 2026
One-click install
npx skills add https://github.com/mkatogui/universal-design-system --skill design-audit-mkatogui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/mkatogui/universal-design-system/tree/main/plugins/universal-design-system/skills/design-audit
Command: npx skills add https://github.com/mkatogui/universal-design-system --skill design-audit-mkatogui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits existing UIs for WCAG accessibility, color contrast, typography hierarchy, spacing consistency, and industry anti-patterns. Generates scored reports with actionable fixes. Use when the user asks for design audit, UI audit, accessibility audit, or design review.

Core Features & Use Cases

  • Audits UI against Universal Design System standards including accessibility, color, typography, spacing, and anti-patterns.
  • Produces a scored report with prioritized CSS fixes and actionable recommendations for design teams.
  • Use Case: Perform a WCAG compliance check on a product page or run an end-to-end design review across a suite of screens.

Quick Start

Provide a UI URL or HTML/CSS snippet to analyze and generate an actionable report.

Frequently Asked Questions about design-audit

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

FAQPage Schema
How do I run an accessibility audit on my HTML and CSS code?

To run an accessibility audit, provide your HTML, CSS, or JSX code snippets to generate a scored report against WCAG standards. The audit evaluates color contrast, typography, spacing, and anti-patterns, returning prioritized CSS fixes.

What is a UI design audit and what does the report include?

A UI design audit evaluates existing interfaces against Universal Design System standards to identify accessibility and anti-pattern issues. The output is a structured, category-weighted scored report with actionable fixes across ten evaluation categories.

Can I check WCAG color contrast compliance using a URL?

Yes, you can check WCAG color contrast compliance by submitting a UI URL. The tool analyzes the live page or provided screenshots to evaluate color contrast and identify anti-patterns, generating actionable design recommendations.

Does this accessibility review work with JSX code from my component library?

Yes, this accessibility review works directly with JSX code, analyzing your component library snippets for spacing consistency and typography hierarchy. It detects domain-specific anti-patterns and outputs structured recommendations for design teams.

What's the best way to identify UI anti-patterns across a suite of screens?

The best way to identify UI anti-patterns is running an end-to-end design review across your screens. The tool leverages context detection to evaluate spacing and typography consistency, producing a structured, category-weighted scored report.

Why does my UI audit report flag typography hierarchy issues?

Your UI audit report flags typography hierarchy issues because the interface violates Universal Design System spacing and typographical standards. The audit detects these anti-patterns through context analysis and provides actionable CSS fixes to correct the visual structure.