design-audit

Audit UI code against DESIGN.md for design-system and UX issues.

Updated Aug 23, 2026

Search Tags:#typography #anti-patterns #accessibility #design-system #design-audit #ui ux #component quality

Ready to run

npx skills add https://github.com/CleanExpo/Pi-Dev-Ops --skill design-audit-cleanexpo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-audit
Source: https://github.com/CleanExpo/Pi-Dev-Ops/tree/main/skills/design-audit
Command: npx skills add https://github.com/CleanExpo/Pi-Dev-Ops --skill design-audit-cleanexpo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents UI code from reaching production with avoidable accessibility, UX, and design-system inconsistencies by running a structured design audit against the project's own DESIGN.md.

Core Features & Use Cases

Runs targeted anti-pattern detection to flag layout, color, typography, motion, and interaction-state issues without changing functionality.
Supports decision-oriented review modes for audit-only findings, UX critique, and final polish guidance aligned to the design system.
Applies design-system compliance scoring using a consistent output format that highlights what is critical, warning, and passed.

Quick Start

Ask the agent to run an audit of a specific UI area using the command /audit <area> after reading DESIGN.md.

Frequently Asked Questions about design-audit

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

FAQPage Schema

How do I run a UI UX anti-pattern audit on my interface code?▼

Run a UI UX anti-pattern audit by directing the agent to review a specific area using the /audit command, which checks your code against DESIGN.md and outputs prioritized critical, warning, and passed findings.

What design system inconsistencies can a component quality audit detect?▼

A component quality audit detects layout, color, typography, motion, and accessibility interaction-state issues, flagging design-system violations without altering your underlying code functionality.

Can I use this design audit to check accessibility-critical interaction states?▼

Yes, the design audit specifically evaluates accessibility-critical interaction states alongside typography and color, ensuring your UI components meet compliance standards before shipping.

Do I need a DESIGN.md file to run a UX critique on my components?▼

Yes, reading DESIGN.md is required before running the audit, as the tool applies design-system compliance scoring based on your project's specific documented design rules and guidelines.

What's the best way to get actionable polish guidance without changing UI functionality?▼

Use the decision-oriented review mode to receive actionable polish guidance that highlights critical and warning issues, ensuring design improvements are identified without making functional code edits.

Why should I use a rule-based design audit instead of manual component review?▼

A rule-based design audit provides consistent compliance scoring across layout and motion anti-patterns, systematically catching UI issues before production that manual reviews often miss.