design-audit

Audit project designs for visual consistency, WCAG compliance, and design system adherence.

1|Updated Mar 14, 2026
One-click install
npx skills add https://github.com/Jorge-Ivan/uam-hogar-nazareth-web --skill design-audit-jorge-ivan
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/Jorge-Ivan/uam-hogar-nazareth-web/tree/main/.claude/skills/design-audit
Command: npx skills add https://github.com/Jorge-Ivan/uam-hogar-nazareth-web --skill design-audit-jorge-ivan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining high design standards, ensuring visual consistency, accessibility, and preventing generic, AI-generated aesthetics in digital products.

Core Features & Use Cases

  • Design System Adherence: Audits designs against established design system rules.
  • Accessibility Compliance: Checks for WCAG standards and usability for all users.
  • AI Slop Detection: Identifies and flags generic patterns common in AI-generated designs.
  • Use Case: A product team can use this Skill to perform a comprehensive design review before launching a new feature, ensuring it aligns with brand guidelines and accessibility requirements.

Quick Start

Run a full design audit on the current project codebase.

Frequently Asked Questions about design-audit

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

FAQPage Schema
How do I check my project for WCAG accessibility compliance and design system consistency?

To check WCAG accessibility compliance and design system consistency, run a full design audit on your codebase. The audit scans CSS, Tailwind classes, and design tokens, verifying them against established WCAG standards and brand identity documentation.

What is design audit and when do I need to run it on my codebase?

A design audit is a comprehensive review of visual consistency, accessibility, and design system adherence. You need to run it when preparing to launch a new feature to ensure it aligns with brand guidelines and prevents generic AI-generated aesthetics.

Can I detect generic AI-generated design patterns in my Tailwind CSS classes?

Yes, you can detect generic AI-generated design patterns in your Tailwind CSS classes. The audit includes an AI slop detection feature that identifies and flags generic patterns common in AI-generated designs during the codebase scan.

Does the design audit work with existing design tokens and brand identity rules?

Yes, the design audit works with existing design tokens and brand identity rules. Agents explore your codebase, research standards, and compare your implementation directly against your design system documentation to verify adherence.

What's the best way to prevent generic AI aesthetics in a digital product before launch?

The best way to prevent generic AI aesthetics before launch is to perform a comprehensive design review that flags AI-generated patterns. This process scans your codebase to ensure visual outputs meet brand identity and design system principles.

Why does my design audit require agents to explore the codebase and research standards?

Your design audit requires agents to explore the codebase and research standards to accurately verify implementation against documentation. This ensures the audit correctly validates your CSS and Tailwind classes against actual WCAG and brand rules.