---
name: ux-design
description: 'Composite UX/UI design skill combining refactoring-ui (visual hierarchy, spacing, color, depth) and ux-heuristics (usability, Nielsen heuristics, information architecture). Use for UI audits, visual improvements, and usability evaluation.'
sources:
  - wondelai/skills/refactoring-ui v1.1.1
  - wondelai/skills/ux-heuristics v1.2.1
fetched: 2026-03-26
---

# UX Design — Composite Skill

This skill combines two complementary frameworks:

1. **refactoring-ui** — visual hierarchy, spacing, color, shadows, component styling.
   Full instructions: `refactoring-ui.md`
   References: `references/refui-*.md` (accessibility, advanced patterns, animation, data-viz, theming)

2. **ux-heuristics** — usability evaluation, Nielsen's 10 heuristics, Krug's laws, severity ratings.
   Full instructions: `ux-heuristics.md`
   References: `references/uxh-*.md` (audit template, cultural UX, dark patterns, heuristic conflicts, Krug, Nielsen, WCAG)

## When to load which

- **Building new UI**: Load `refactoring-ui.md` first, then `ux-heuristics.md` for review pass.
- **Auditing existing UI**: Load `ux-heuristics.md` first (identify problems), then `refactoring-ui.md` (fix them).
- **Accessibility review**: Load `references/uxh-wcag-checklist.md` + `references/refui-accessibility-depth.md`.
- **Animation/motion work**: Load `references/refui-animation-microinteractions.md`.
- **Dark theme work**: Load `references/refui-theming-dark-mode.md`.

## Quick reference for designers

### From refactoring-ui:
- Design in grayscale first, add color last
- Constrained scales for spacing, type, color, shadows
- Not everything can be important — create hierarchy through size, weight, color
- Start with too much white space, then remove

### From ux-heuristics:
- "Don't Make Me Think" — every page should be self-evident
- Users scan, they don't read. They satisfice, they don't optimize.
- System status visibility, user control, consistency, error prevention
- Match system to real world; recognition over recall