Can this skill analyze live websites?

Yes, it can accept a URL to analyze the visual layout, accessibility markers, and DOM structure of a live production environment.

Does it provide code to fix the issues it finds?

Absolutely. For every identified issue, the skill generates specific CSS snippets using Universal Design System tokens to ensure fixes are consistent and maintainable.

What standards does the audit use for accessibility?

It primarily evaluates UIs against WCAG 2.1 AA standards, focusing on color contrast, keyboard navigation, focus indicators, and touch target sizes.

Can I use it to check mobile responsiveness?

Yes, responsiveness is one of the ten core evaluation categories. It checks mobile layouts, breakpoints, and ensures touch targets meet the 44x44px minimum requirement.

Design Audit & Accessibility Review

Name: Design Audit & Accessibility Review
Author: mkatogui

bymkatogui

•

Design Tools

Audits existing user interfaces for WCAG compliance, visual hierarchy, and industry-specific anti-patterns while providing actionable CSS fixes.

The Design Audit skill enables Claude to perform comprehensive evaluations of web interfaces against industry standards and WCAG 2.1 AA accessibility guidelines. By analyzing code files, screenshots, or URLs, it generates detailed reports across ten categories including color contrast, typography, and responsiveness. Leveraging the Universal Design System's BM25 reasoning engine, it not only identifies issues like spacing inconsistencies and industry anti-patterns but also provides ready-to-use CSS snippets using standardized tokens to resolve identified problems immediately.

Key Features

01Industry-specific anti-pattern detection using a specialized reasoning engine.

02Multi-format input support including URLs, screenshots, and source code files.

03Comprehensive WCAG 2.1 AA accessibility validation and color contrast checking.

04Automated generation of actionable CSS fixes using standardized design tokens.

05Scored reporting across 10 distinct categories with a letter-grade evaluation.

061 GitHub stars

Use Cases

01Refactoring legacy CSS to align with modern design system tokens and spacing scales.

02Validating a new feature's UI against accessibility standards before production deployment.

03Conducting a competitive UX review to identify and eliminate industry-standard design violations.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mkatogui/universal-design-system design-audit

For use in Claude.ai and ChatGPT

Key Features

01Industry-specific anti-pattern detection using a specialized reasoning engine.

02Multi-format input support including URLs, screenshots, and source code files.

03Comprehensive WCAG 2.1 AA accessibility validation and color contrast checking.

04Automated generation of actionable CSS fixes using standardized design tokens.

05Scored reporting across 10 distinct categories with a letter-grade evaluation.

061 GitHub stars

Use Cases

01Refactoring legacy CSS to align with modern design system tokens and spacing scales.

02Validating a new feature's UI against accessibility standards before production deployment.

03Conducting a competitive UX review to identify and eliminate industry-standard design violations.