hackermanishackerman

ux-toolkit

0
0
# Install this skill:
npx skills add hackermanishackerman/claude-skills-vault --skill "ux-toolkit"

Install specific skill from multi-skill repository

# Description

Comprehensive UX evaluation meta-skill. Use when conducting UI/UX audits, accessibility reviews, user flow analysis, responsive testing, or interaction design evaluation.

# 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.

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.