ux-toolkit 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +137 -0
  3. package/agents/accessibility-auditor.md +39 -0
  4. package/agents/accessibility-engineer.md +43 -0
  5. package/agents/interaction-reviewer.md +47 -0
  6. package/agents/ux-auditor.md +52 -0
  7. package/agents/ux-engineer.md +40 -0
  8. package/agents/visual-reviewer.md +41 -0
  9. package/commands/a11y-check.md +14 -0
  10. package/commands/design-review.md +14 -0
  11. package/commands/screenshot-review.md +15 -0
  12. package/commands/ux-audit.md +15 -0
  13. package/dist/cli.js +295 -0
  14. package/dist/cli.js.map +1 -0
  15. package/dist/index.cjs +254 -0
  16. package/dist/index.cjs.map +1 -0
  17. package/dist/index.d.cts +88 -0
  18. package/dist/index.d.ts +88 -0
  19. package/dist/index.js +220 -0
  20. package/dist/index.js.map +1 -0
  21. package/package.json +71 -0
  22. package/skills/interaction-patterns/SKILL.md +258 -0
  23. package/skills/mobile-responsive-ux/SKILL.md +260 -0
  24. package/skills/react-ux-patterns/SKILL.md +335 -0
  25. package/skills/ux-heuristics/SKILL.md +150 -0
  26. package/skills/visual-design-system/SKILL.md +208 -0
  27. package/skills/wcag-accessibility/SKILL.md +178 -0
package/skills/wcag-accessibility/SKILL.md ADDED
@@ -0,0 +1,178 @@
1
+ ---
2
+ name: wcag-accessibility
3
+ description: WCAG 2.2 accessibility compliance checklist with testing methods and ARIA patterns
4
+ license: MIT
5
+ ---
6
+
7
+ # WCAG 2.2 Accessibility Compliance
8
+
9
+ ## Quick Automated Checks
10
+
11
+ These can be verified programmatically:
12
+
13
+ - [ ] Color contrast ≥4.5:1 for normal text
14
+ - [ ] Color contrast ≥3:1 for large text and UI components
15
+ - [ ] All images have `alt` attributes
16
+ - [ ] Form inputs have associated labels
17
+ - [ ] Focus indicator visible on all interactive elements
18
+ - [ ] Page has proper heading hierarchy (h1 → h6, no skips)
19
+ - [ ] Landmark regions present (main, nav, banner, contentinfo)
20
+ - [ ] Language declared on `<html>` element
21
+ - [ ] Page has a descriptive `<title>`
22
+
23
+ ## WCAG 2.2 New Success Criteria
24
+
25
+ ### Level A
26
+
27
+ **2.4.11 Focus Not Obscured (Minimum)**
28
+ - Focus indicator must not be entirely hidden by other content
29
+ - At least part of the focused element must be visible
30
+
31
+ ### Level AA
32
+
33
+ **2.4.12 Focus Not Obscured (Enhanced)**
34
+ - Focus indicator must not be hidden at all
35
+ - Entire focused element must be visible
36
+
37
+ **2.5.7 Dragging Movements**
38
+ - Any drag operation must have a single-pointer alternative
39
+ - Example: Drag-to-reorder must also support move buttons
40
+
41
+ **2.5.8 Target Size (Minimum)**
42
+ - Interactive targets must be at least 24×24 CSS pixels
43
+ - Exceptions: inline links, user-agent controlled, essential size
44
+
45
+ **3.3.7 Redundant Entry**
46
+ - Don't ask users to re-enter previously provided information
47
+ - Auto-populate or allow selection from previous entries
48
+
49
+ **3.3.8 Accessible Authentication (Minimum)**
50
+ - No cognitive function tests (puzzles, memory tests)
51
+ - If CAPTCHA required, provide accessible alternative
52
+ - Allow password managers and copy/paste
53
+
54
+ ### Level AAA
55
+
56
+ **2.4.13 Focus Appearance**
57
+ - Focus indicator must have 3:1 contrast ratio
58
+ - Focus area must be at least 2px thick or equivalent
59
+
60
+ **3.3.9 Accessible Authentication (Enhanced)**
61
+ - No object recognition tests
62
+ - No personal content identification
63
+
64
+ ## ARIA Patterns
65
+
66
+ ### Alert Messages
67
+ ```html
68
+ <div role="alert" aria-live="assertive">
69
+ Error: Invalid email address
70
+ </div>
71
+ ```
72
+
73
+ ### Form Validation
74
+ ```html
75
+ <label for="email">Email</label>
76
+ <input
77
+ id="email"
78
+ type="email"
79
+ aria-invalid="true"
80
+ aria-describedby="email-error"
81
+ />
82
+ <span id="email-error" role="alert">
83
+ Please enter a valid email address
84
+ </span>
85
+ ```
86
+
87
+ ### Modal Dialogs
88
+ ```html
89
+ <div
90
+ role="dialog"
91
+ aria-modal="true"
92
+ aria-labelledby="dialog-title"
93
+ aria-describedby="dialog-desc"
94
+ >
95
+ <h2 id="dialog-title">Confirm Delete</h2>
96
+ <p id="dialog-desc">This action cannot be undone.</p>
97
+ </div>
98
+ ```
99
+
100
+ Requirements:
101
+ - Trap focus within dialog
102
+ - Return focus to trigger on close
103
+ - Close on Escape key
104
+
105
+ ### Expandable Sections
106
+ ```html
107
+ <button
108
+ aria-expanded="false"
109
+ aria-controls="section1"
110
+ >
111
+ Show Details
112
+ </button>
113
+ <div id="section1" hidden>
114
+ Expandable content here
115
+ </div>
116
+ ```
117
+
118
+ ### Tab Panels
119
+ ```html
120
+ <div role="tablist" aria-label="Settings">
121
+ <button role="tab" aria-selected="true" aria-controls="panel1">
122
+ General
123
+ </button>
124
+ <button role="tab" aria-selected="false" aria-controls="panel2">
125
+ Privacy
126
+ </button>
127
+ </div>
128
+ <div role="tabpanel" id="panel1">...</div>
129
+ <div role="tabpanel" id="panel2" hidden>...</div>
130
+ ```
131
+
132
+ ## Keyboard Navigation Requirements
133
+
134
+ | Element | Keys | Expected Behavior |
135
+ |---------|------|-------------------|
136
+ | Button | Enter, Space | Activate |
137
+ | Link | Enter | Navigate |
138
+ | Checkbox | Space | Toggle |
139
+ | Radio group | Arrow keys | Move selection |
140
+ | Tab list | Arrow keys | Switch tabs |
141
+ | Menu | Arrow keys, Enter, Escape | Navigate, select, close |
142
+ | Modal | Tab (trapped), Escape | Navigate within, close |
143
+ | Combobox | Arrow keys, Enter, Escape | Navigate, select, close |
144
+
145
+ ## Testing Checklist
146
+
147
+ ### Keyboard Testing
148
+ 1. Tab through entire page - is order logical?
149
+ 2. Can you reach all interactive elements?
150
+ 3. Is focus indicator always visible?
151
+ 4. Are there any keyboard traps?
152
+ 5. Can you operate all controls without mouse?
153
+
154
+ ### Screen Reader Testing
155
+ 1. Is all content announced correctly?
156
+ 2. Are images described appropriately?
157
+ 3. Are form fields properly labeled?
158
+ 4. Are dynamic updates announced?
159
+ 5. Is the heading structure logical?
160
+
161
+ ### Visual Testing
162
+ 1. Is content readable at 200% zoom?
163
+ 2. Does the layout work without color?
164
+ 3. Is there sufficient contrast?
165
+ 4. Are focus indicators visible?
166
+
167
+ ## Common Issues and Fixes
168
+
169
+ | Issue | WCAG | Fix |
170
+ |-------|------|-----|
171
+ | Missing alt text | 1.1.1 | Add descriptive `alt` attribute |
172
+ | Low contrast | 1.4.3 | Increase color contrast ratio |
173
+ | Missing labels | 1.3.1 | Associate labels with inputs |
174
+ | No focus visible | 2.4.7 | Add visible focus styles |
175
+ | Keyboard trap | 2.1.2 | Ensure focus can leave component |
176
+ | Auto-playing media | 1.4.2 | Add pause/stop controls |
177
+ | Missing skip link | 2.4.1 | Add "skip to main content" link |
178
+ | No error identification | 3.3.1 | Clearly identify and describe errors |