Does this skill require a reference design like Figma?

No, this skill is specifically designed to evaluate interfaces based on universal design patterns and best practices without needing a source file.

Can it help me meet accessibility standards?

Yes, it checks for WCAG AA contrast ratios, touch target sizes, focus indicators, and logical keyboard navigation paths.

What kind of output does the audit provide?

It generates a structured report with a quality score, a prioritized list of issues (Critical to Low), and specific actionable suggestions or CSS code.

Is this skill useful for mobile apps?

Yes, it is highly effective for auditing mobile web interfaces, specifically checking for touch target sizes and responsive layout issues.

Frontend Design Auditor

Name: Frontend Design Auditor
Author: manashmandal

bymanashmandal

0•

Design Tools

Identifies UX inconsistencies, accessibility gaps, and visual bugs in web interfaces to provide prioritized reports and actionable CSS fixes.

The Frontend Design Auditor skill acts as an automated design consultant, allowing developers to evaluate the quality of their user interfaces without needing a source design file. It systematically scans frontend layouts for violations of standard design patterns, checking for visual hierarchy, spacing consistency, typographic readability, and WCAG accessibility compliance. By delivering a structured report that ranks issues from critical to low priority, it helps developers polish their applications and fix UI bugs before they reach production.

Key Features

01Prioritized issue matrix ranging from critical blocks to low-priority polish

02Comprehensive UI/UX scan for visual hierarchy and layout consistency

03Automated accessibility checks for WCAG AA contrast and touch targets

040 GitHub stars

05Generation of ready-to-use CSS snippets for immediate design corrections

06Systematic evaluation of typography scales and spacing units

Use Cases

01Performing a final UI sanity check before submitting a pull request

02Identifying and fixing accessibility barriers in an existing web application

03Refining a rough prototype into a polished, professional-grade demo

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add manashmandal/claude-skills design-audit

For use in Claude.ai and ChatGPT

Download Skill