メニュー
Comprehensive UX evaluation meta-skill. Use when conducting UI/UX audits, accessibility reviews, user flow analysis, responsive testing, or interaction design evaluation.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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 |
Professional-grade meta-skill for systematic UX evaluation across 9 domains. Framework-agnostic design works for web, mobile, and desktop applications.
Invoke for:
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
| 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 |
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]
| 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 |
Each reference contains:
python3 scripts/generate_report.py --type [full|heuristic|a11y|flow|responsive|interaction] --output report.md --format [md|json|csv]
| 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 |
HIGH FREQUENCY
│
┌───────────────┼───────────────┐
│ │ │
│ MAJOR │ CRITICAL │
│ (P1) │ (P0) │
│ │ │
LOW ├───────────────┼───────────────┤ HIGH
IMPACT │ │ │ IMPACT
│ COSMETIC │ MINOR │
│ (P3) │ (P2) │
│ │ │
└───────────────┼───────────────┘
│
LOW FREQUENCY
| 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 |
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 |
| 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 | 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 |
| 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 |
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-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 |
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 |
| Format | Use Case | Command |
|---|---|---|
| Markdown | Documentation, PRs | --format md |
| JSON | Jira/Linear import | --format json |
| CSV | Spreadsheet analysis | --format csv |
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.
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
Efficiently navigate codebase documentation during Research phase. Use instead of Grep/Glob for finding architectural decisions, feature specs, and technical docs. Maps topics to doc locations for fast context retrieval. If codebase lacks documentation structure, provides patterns to establish one.
Senior Python Backend Engineer skill for FastAPI. Use when scaffolding production-ready APIs, enforcing clean architecture, optimizing async patterns, or auditing FastAPI codebases.
Material React Table V3 expert skill. Use when building feature-rich data tables w/ MUI styling, server-side ops, CRUD editing, virtualization, or complex filtering/sorting.
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Senior Next.js 15+/16 Engineer skill for App Router. Use when scaffolding production apps, enforcing RSC patterns, auditing codebases, or optimizing performance.