Design Quality

---
name: design-quality
description: "Design critique (Nielsen heuristics) + accessibility audit (WCAG 2.2 AA)"
allowed-tools:
  - Read
  - Glob
  - Grep
  - WebSearch
context: fork
user-invocable: true
version: "1.0.0"
---

# Design Quality Skill

> Workflow from jony-creative-director: Design Critique + Accessibility Auditor

## Inputs

| Parameter     | Required    | Description                                |
| ------------- | ----------- | ------------------------------------------ |
| Design        | Yes         | Description, wireframe, or uploaded design |
| Platform      | Recommended | Web / iOS / Android / cross-platform       |
| Brand context | Recommended | Brand guidelines reference                 |

## Part A: Design Critique

### 1. Heuristic Evaluation (Nielsen's 10, score 1-5 each)

| #   | Heuristic                   | Evaluate                               |
| --- | --------------------------- | -------------------------------------- |
| 1   | Visibility of system status | Loading, progress, feedback indicators |
| 2   | Match system ↔ real world   | Language, concepts, conventions        |
| 3   | User control & freedom      | Undo, cancel, exit paths               |
| 4   | Consistency & standards     | Internal + platform consistency        |
| 5   | Error prevention            | Confirmations, constraints, defaults   |
| 6   | Recognition > recall        | Visible options, contextual help       |
| 7   | Flexibility & efficiency    | Shortcuts, customization, expert paths |
| 8   | Aesthetic & minimalist      | Signal-to-noise ratio                  |
| 9   | Error recovery              | Clear messages, actionable solutions   |
| 10  | Help & documentation        | Searchable, task-oriented, concise     |

### 2. Visual Hierarchy

- What does user see first? Is it correct?
- CTA hierarchy clear?
- Visual weights balanced?
- Adequate white space?

### 3. Typography Audit

- Font choices match brand?
- Type scale creates clear hierarchy?
- Line lengths 45-75 characters?
- Contrast sufficient for readability?

### 4. Color Analysis

- Palette supports brand personality?
- WCAG AA contrast (4.5:1 text, 3:1 UI)?
- Color used meaningfully, not just decoratively?
- Dark mode considerations?

### 5. Usability

- Cognitive load assessment
- Interaction clarity (what's clickable?)
- Touch targets minimum 44x44pt?
- Form usability (labels, validation)

### 6. Strategic Alignment

- Serves business goals?
- Serves user goals?
- Value proposition clear?
- Differentiates from competitors?

### 7. Prioritized Recommendations

| Priority  | Criteria               |
| --------- | ---------------------- |
| Critical  | Must fix before launch |
| Important | Fix in next iteration  |
| Polish    | Nice to have           |

### 8. Redesign Direction

2 alternative approaches with verbal sketches and rationale.

## Part B: Accessibility Audit (WCAG 2.2 AA)

### 1. Perceivable

| Check                | Standard                           |
| -------------------- | ---------------------------------- |
| Text alternatives    | Alt text for all images            |
| Captions/transcripts | All multimedia                     |
| Color independence   | Color not sole information carrier |
| Text contrast        | Normal 4.5:1, Large 3:1            |
| UI contrast          | Components 3:1                     |
| Text resize          | 200% without content loss          |
| No images of text    | Except logos                       |

### 2. Operable

| Check                     | Standard                         |
| ------------------------- | -------------------------------- |
| Keyboard access           | All functionality                |
| No keyboard traps         | Escape always works              |
| Skip links                | For repetitive content           |
| Page titles               | Descriptive and unique           |
| Focus order               | Logical and predictable          |
| Link purpose              | Clear from context               |
| Multiple navigation paths | Search, nav, sitemap             |
| Focus visible             | 2px outline, 3:1 contrast        |
| Pointer alternatives      | Single-pointer for all gestures  |
| Motion disable            | prefers-reduced-motion respected |
| No auto-playing audio     | User-initiated only              |
| Touch targets             | 44x44 CSS pixels minimum         |

### 3. Understandable

| Check                     | Standard                               |
| ------------------------- | -------------------------------------- |
| Page language             | `lang` attribute set                   |
| Parts language            | `lang` on foreign text                 |
| Consistent identification | Same function = same label             |
| Error identification      | Clear error messages                   |
| Error suggestions         | How to fix                             |
| Error prevention          | Confirm/reversible for legal/financial |
| Contextual help           | Available where needed                 |

### 4. Robust

| Check           | Standard                    |
| --------------- | --------------------------- |
| Valid markup    | Proper HTML                 |
| Name/role/value | All components programmatic |
| Status messages | ARIA live regions           |

### 5. Mobile-Specific

- Orientation not locked (responds to rotation)
- All input modalities (touch, mouse, keyboard, voice)
- Thumb zone placement considerations

### 6. Cognitive Accessibility

- Reading level: Flesch-Kincaid Grade 8 or below
- Consistent navigation placement
- Plain language error messages
- Time limits extendable/eliminable
- No flashing (max 3/second)

## Audit Deliverables

| Deliverable             | Content                             |
| ----------------------- | ----------------------------------- |
| Pass/fail checklist     | Every criterion scored              |
| Violation report        | Location, severity, description     |
| Remediation guide       | Code/design solutions per violation |
| Accessibility statement | Template for public statement       |
| QA testing checklist    | Screen reader flow descriptions     |

## Related

`/design-systems` (component a11y specs) | `/ui-design` (screen-level a11y) | `/brand-identity` (inclusive brand)