
ux-toolkit
by georgekhananaev
A curated collection of high impact skills for Claude Code designed to supercharge the senior full stack workflow. This vault automates the repetitive parts of development like architectural reviews, TDD cycles, and PR management so you can stay in flow. It is a force multiplier for shipping clean, production ready code at scale. ðâ¡ïž
SKILL.md
name: ux-toolkit description: Comprehensive UX evaluation meta-skill. Use when conducting UI/UX audits, accessibility reviews, user flow analysis, responsive testing, or interaction design evaluation. version: 2.0.0
UX Toolkit
Professional-grade meta-skill for systematic UX evaluation across 9 domains. Framework-agnostic design works for web, mobile, and desktop applications.
When to Use
Invoke for:
- UI/UX heuristic evaluations (Nielsen + modern methodologies)
- Accessibility (WCAG 2.2) compliance audits
- User flow & friction analysis
- Responsive/cross-device testing
- Interaction & micro-interaction review
- Design system consistency audits
- Content & UX writing review
- AI/ML interface patterns
- Privacy & ethical design review
Audit Type Selection
What do you need to evaluate?
â
ââ⺠Full UX Audit âââââââââ⺠Load ALL references
â
ââ⺠Accessibility Only ââââ⺠Load accessibility-inspector.md
â
ââ⺠Usability Review ââââââ⺠Load heuristic-audit.md + user-flow-analysis.md
â
ââ⺠Visual/Responsive âââââ⺠Load responsive-behavior.md + interaction-review.md
â
ââ⺠Design System âââââââââ⺠Load design-system-audit.md
â
ââ⺠Content Audit âââââââââ⺠Load content-ux-audit.md
â
ââ⺠AI Interface ââââââââââ⺠Load ai-ux-patterns.md
â
ââ⺠Privacy/Ethics ââââââââ⺠Load privacy-ethics-audit.md
Sub-Workflows
| Domain | Reference | Purpose |
|---|---|---|
| Heuristic Audit | references/heuristic-audit.md | Nielsen's 10 + modern methodologies (OOUX, JTBD, Cognitive Walkthrough) |
| A11Y Inspector | references/accessibility-inspector.md | WCAG 2.2 AA/AAA, keyboard nav, screen readers |
| Flow Analysis | references/user-flow-analysis.md | Task paths, friction points, cognitive load |
| Responsive | references/responsive-behavior.md | Breakpoints, touch targets, RTL/LTR, PWA |
| Interactions | references/interaction-review.md | Micro-interactions, animations, feedback |
| Design System | references/design-system-audit.md | Token consistency, component audit |
| Content UX | references/content-ux-audit.md | UX writing, readability, voice & tone |
| AI/ML Patterns | references/ai-ux-patterns.md | Explainability, trust, ML error handling |
| Privacy & Ethics | references/privacy-ethics-audit.md | Dark patterns, consent, GDPR/DSA compliance |
Quick Start
1. Define Scope
Audit Scope:
âââ Screens/Pages: [List target screens]
âââ User Flows: [Primary conversion, core tasks]
âââ Platform: [Web/Mobile/Desktop/All]
âââ WCAG Target: [A/AA/AAA]
âââ Priority Focus: [Accessibility/Usability/Performance]
2. Select Audit Type
| Type | References | Time | Coverage |
|---|---|---|---|
| Quick A11Y | accessibility-inspector.md | 1-2h | Automated + keyboard nav |
| Heuristic Review | heuristic-audit.md | 2-4h | Nielsen's 10 + severity |
| Full UX Audit | All 9 references | 1-2d | Complete evaluation |
| Focused Audit | 2-3 specific refs | 3-6h | Targeted domain review |
3. Execute Workflow
Each reference contains:
- Checklist items w/ pass/fail criteria
- Severity + effort classification
- Remediation guidance
- Tool recommendations
4. Generate Report
python3 scripts/generate_report.py --type [full|heuristic|a11y|flow|responsive|interaction] --output report.md --format [md|json|csv]
Severity Classification
| Level | Impact | Frequency | Priority | Action |
|---|---|---|---|---|
| Critical | Blocks task | Any | P0 | Fix immediately |
| Major | Significant friction | >50% users | P1 | Fix before release |
| Minor | Reduced efficiency | <50% users | P2 | Fix in next sprint |
| Cosmetic | Polish issue | Any | P3 | Backlog |
Priority Matrix
HIGH FREQUENCY
â
âââââââââââââââââŒââââââââââââââââ
â â â
â MAJOR â CRITICAL â
â (P1) â (P0) â
â â â
LOW âââââââââââââââââŒâââââââââââââââ†HIGH
IMPACT â â â IMPACT
â COSMETIC â MINOR â
â (P3) â (P2) â
â â â
âââââââââââââââââŒââââââââââââââââ
â
LOW FREQUENCY
Effort Estimation
| Effort | Description | Examples |
|---|---|---|
| Low | < 1 hour, single file | CSS fix, label addition, alt text |
| Medium | 1-4 hours, few files | Component refactor, form validation |
| High | > 4 hours, architectural | Navigation restructure, focus management |
Modern Methodologies
Beyond Nielsen's 10 heuristics, this toolkit incorporates:
| Methodology | Focus | When to Use |
|---|---|---|
| Cognitive Walkthrough | Task completion probability | Complex flows, onboarding |
| OOUX | Object-noun consistency | Information architecture |
| JTBD | Job stories validation | Feature validation |
| Six Minds Framework | Cognitive architecture | Complex interfaces |
| Baymard Heuristics | E-commerce specifics | Shopping flows |
WCAG Compliance Levels
| Level | Requirement | Target |
|---|---|---|
| A | Minimum accessibility | Baseline |
| AA | Acceptable accessibility | Standard target |
| AAA | Enhanced accessibility | Specific audiences |
WCAG 2.2 Status: This toolkit covers all 9 new WCAG 2.2 criteria (October 2023).
Platform Adapters
| Platform | Automated Testing | Manual Testing |
|---|---|---|
| Web | axe-core, Lighthouse | Browser DevTools |
| iOS | Xcode Accessibility Inspector | VoiceOver |
| Android | Accessibility Scanner (ADB) | TalkBack |
| Desktop | Platform-specific tools | Keyboard + screen reader |
| Design Files | Figma plugins (Stark, A11y) | Manual review |
Integration Points
| Tool | Purpose | Usage |
|---|---|---|
| axe-core | Automated a11y | scripts/run_axe.js |
| Lighthouse | Performance + a11y | Chrome DevTools |
| Contrast Checker | Color ratios | scripts/check_contrast.py |
| Readability | Content grade level | Flesch-Kincaid analysis |
| Visual Regression | Layout stability | BackstopJS/Playwright |
Process Overview
1. Scope Definition â Define screens/flows to audit
2. Reference Loading â Load relevant sub-workflow(s)
3. Automated Scans â Run axe-core, Lighthouse
4. Manual Review â Execute checklists
5. Finding Capture â Document w/ severity + effort
6. Prioritization â Apply Impact à Frequency matrix
7. Report Generation â Compile actionable report
Anti-Patterns to Detect
| Anti-Pattern | Category | Severity |
|---|---|---|
| Confirm-shaming | Dark Pattern | Critical |
| Hidden costs | Dark Pattern | Critical |
| Forced continuity | Dark Pattern | Major |
| No loading feedback | Visibility | Major |
| Keyboard traps | Accessibility | Critical |
| Color-only indicators | Accessibility | Major |
| Infinite scroll w/o footer | Navigation | Minor |
| Auto-playing video w/ sound | Attention | Major |
Competitive Benchmarking
For comprehensive audits, compare key flows against 1-2 competitors:
| Metric | Your Product | Competitor A | Competitor B |
|--------|--------------|--------------|--------------|
| Task completion time | Xs | Xs | Xs |
| Click count | X | X | X |
| Error rate | X% | X% | X% |
| A11y score (Lighthouse) | X | X | X |
Report Formats
| Format | Use Case | Command |
|---|---|---|
| Markdown | Documentation, PRs | --format md |
| JSON | Jira/Linear import | --format json |
| CSV | Spreadsheet analysis | --format csv |
Files Structure
ux-toolkit/
âââ SKILL.md # This file
âââ references/
â âââ heuristic-audit.md # Nielsen + modern heuristics
â âââ accessibility-inspector.md # WCAG 2.2 compliance
â âââ user-flow-analysis.md # Flow & friction analysis
â âââ responsive-behavior.md # Cross-device behavior
â âââ interaction-review.md # Micro-interactions
â âââ design-system-audit.md # Token & component audit
â âââ content-ux-audit.md # UX writing & readability
â âââ ai-ux-patterns.md # AI/ML interface patterns
â âââ privacy-ethics-audit.md # Dark patterns & consent
âââ scripts/
â âââ check_contrast.py # Color contrast checker
â âââ generate_report.py # Report generator
â âââ run_axe.js # Automated a11y testing
âââ data/
âââ issues-database.json # Common issues + remediation
Ref: Load specific references/*.md for detailed checklists & workflows.
ã¹ã³ã¢
ç·åã¹ã³ã¢
ãªããžããªã®åè³ªææšã«åºã¥ãè©äŸ¡
SKILL.mdãã¡ã€ã«ãå«ãŸããŠãã
ã©ã€ã»ã³ã¹ãèšå®ãããŠãã
100æå以äžã®èª¬æããã
GitHub Stars 100以äž
3ã¶æä»¥å ã«æŽæ°ããã
10å以äžãã©ãŒã¯ãããŠãã
ãªãŒãã³Issueã50æªæº
ããã°ã©ãã³ã°èšèªãèšå®ãããŠãã
1ã€ä»¥äžã®ã¿ã°ãèšå®ãããŠãã
ã¬ãã¥ãŒ
ã¬ãã¥ãŒæ©èœã¯è¿æ¥å ¬éäºå®ã§ã
