UX Audit

Give your AI coding assistant a design eye.

A skill that teaches Claude Code, Cursor, Codex, and Windsurf how to think about UI/UX — so the interfaces they generate aren’t just functional, but well-designed.

12 design principles. 13 reference docs. 7 component checklists. Two modes: guide (build it right) and review (audit what exists).

---

Before / After

Without the skill, AI assistants generate functional but flat UI. With it, they produce interfaces with hierarchy, feedback, accessibility, and intent.

A delete confirmation — without the skill:

  Are you sure you want to delete?
  Yes
  No

No specifics. No consequence framing. “Yes/No” labels. User can’t tell what they’re losing.

With the skill:

<dialog role="dialog" aria-modal="true" aria-labelledby="delete-title"
  class="max-w-md rounded-xl p-6 shadow-lg">
  Delete "Q4 Report"?
  
    This will permanently delete the report and 12 comments. This can't be undone.
  
  

Names what’s being deleted. States the consequence. Action-specific button labels. Accessible markup. Focus styles. Destructive action visually distinct.

A loading state — without the skill:

{loading ?  : }

Spinner replaces all content. Layout jumps when data arrives.

With the skill:

Skeleton preserves layout. No content shift. User sees the page is loading, not broken.

---

Two Modes

flowchart LR