skills.rest
mkatogui
mkatoguiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-audit

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

3|Updated Mar 11, 2026
Search Tags:#typography#ui#anti-patterns#accessibility#audit#wcag#color-contrast
Ready to run
npx skills add https://github.com/mkatogui/universal-design-system --skill design-audit-mkatogui
💬 Prompt for ChatGPT / Claude Chat▼
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.

Related Skills

Explore More Design & Creative Skills→
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
PingMe-NetworkPingMe-Network

audit

Audits frontend interfaces for accessibility, performance, theming, and responsive issues, producing a prioritized severity report with recommendations.

Official
Advanced
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
pacphipacphi
6

accessibility-testing

Perform WCAG 2.2 accessibility testing on web applications with axe-core.

Community
Advanced