Agent skill

uiux-toolkit

Comprehensive UX/UI evaluation meta-skill combining design theory and UX methodology. Use when conducting UI/UX audits, visual design reviews, accessibility compliance (WCAG 2.2), user flow analysis, responsive testing, interaction design evaluation, or design system audits. Evaluates using Nielsen's heuristics, Gestalt principles, typography theory, color theory, and modern methodologies (OOUX, JTBD, Cognitive Walkthrough).

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/uiux-toolkit

SKILL.md

UI/UX Toolkit

Professional UX/UI evaluation across 9 domains. Combines design theory w/ UX methodology. Framework-agnostic for web, mobile & desktop.

Audit Type Selection

Need Load
Full UX Audit ALL references
Visual Design visual-design.md + interaction-review.md
Accessibility accessibility-inspector.md
Usability heuristic-audit.md + user-flow-analysis.md
Responsive/Mobile responsive-behavior.md
Design System design-system-audit.md
Content content-ux-audit.md
AI Interface ai-ux-patterns.md
Privacy/Ethics privacy-ethics-audit.md

Sub-Workflows

Domain Reference Purpose
Visual references/visual-design.md Hierarchy, typography, color, Gestalt, spacing
Heuristic references/heuristic-audit.md Nielsen's 10 + modern methods
A11Y references/accessibility-inspector.md WCAG 2.2 AA/AAA, keyboard, screen readers
Flow references/user-flow-analysis.md Task paths, friction, cognitive load
Responsive references/responsive-behavior.md Breakpoints, touch, RTL/LTR, PWA
Interactions references/interaction-review.md Micro-interactions, animations, feedback
Design System references/design-system-audit.md Token consistency, component audit
Content references/content-ux-audit.md UX writing, readability, voice & tone
AI/ML references/ai-ux-patterns.md Explainability, trust, error handling
Privacy references/privacy-ethics-audit.md Dark patterns, consent, GDPR/DSA

Quick Start

1. Define Scope

Audit Scope:
├── Screens: [target screens]
├── Flows: [primary tasks, conversion paths]
├── Platform: [Web/iOS/Android/Desktop/All]
├── WCAG: [A/AA/AAA]
└── Focus: [Visual/A11Y/Usability/Perf]

2. Select Type

Type Refs Coverage
Quick Visual visual-design.md Design theory
Quick A11Y accessibility-inspector.md Automated + keyboard
Heuristic heuristic-audit.md Nielsen's 10
Full All 9 refs Complete eval
Focused 2-3 refs Targeted review

3. Execute

Each ref contains checklists w/ pass/fail criteria, severity & remediation.

Severity

Level Impact Action
🔴 Critical Blocks task/access Fix immediately
🟠 Major >50% users affected Fix before release
🟡 Minor <50% users affected Next sprint
🟢 Enhancement Polish/delight Backlog

Priority Matrix

         HIGH FREQ
            │
    ┌───────┼───────┐
    │ MAJOR │ CRIT  │
    │ (P1)  │ (P0)  │
LOW ├───────┼───────┤ HIGH
IMP │ ENH   │ MINOR │ IMP
    │ (P3)  │ (P2)  │
    └───────┼───────┘
         LOW FREQ

Effort

Level Examples
Low CSS fix, alt text, label
Med Component refactor, validation
High Nav restructure, focus mgmt

Quick Checklist

□ Hierarchy    → Importance clear? (Squint test)
□ Typography   → Readable, scale, max 2-3 fonts?
□ Color        → Contrast, semantic, 60-30-10?
□ Spacing      → 8pt grid, consistent rhythm?
□ Gestalt      → Items grouped logically?
□ Usability    → Actions discoverable, feedback clear?
□ A11Y         → WCAG AA, keyboard, screen reader?
□ Consistency  → Design system followed?
□ Content      → Clear, scannable, actionable?
□ Responsive   → All breakpoints, touch-friendly?

Scoring

Grade Criteria
A Professional, polished, accessible, delightful
B Solid fundamentals, minor refinements
C Functional w/ notable issues
D Usable w/ significant problems
F Major usability/a11y failures

Output Format

markdown
## UX Eval: [Component/Page]

### Scope
- Platform: [Web/iOS/Android]
- WCAG: [AA/AAA]
- Domains: [List]

### Assessment
[1-2 sentence summary + grade A-F]

### Critical (P0)
- **[Issue]**: [Desc]
  - *Principle*: [violated]
  - *Fix*: [rec]
  - *Effort*: [L/M/H]

### Major (P1) / Minor (P2) / Enhancements (P3)
[Same format]

### Strengths
- [What works]

### Priority Actions
1. [Top fix]
2. [Second]
3. [Third]

Anti-Patterns

Pattern Category Sev
Confirm-shaming Dark 🔴
Hidden costs Dark 🔴
Keyboard traps A11Y 🔴
No loading feedback Visibility 🟠
Color-only indicators A11Y 🟠
Auto-play video+sound Attention 🟠
Infinite scroll w/o footer Nav 🟡

Methodologies

Method Focus Use
Cognitive Walkthrough Task completion Complex flows
OOUX Object-noun consistency IA
JTBD Job stories Feature validation
Gestalt Visual grouping Layout
Baymard E-commerce Shopping flows

Platform Testing

Platform Auto Manual
Web axe-core, Lighthouse DevTools, keyboard
iOS Accessibility Inspector VoiceOver
Android Accessibility Scanner TalkBack
Design Stark, Contrast plugins Review

Load references/*.md for detailed checklists & criteria.

Didn't find tool you were looking for?

Be as detailed as possible for better results