Agent Skills › jjongguet/oh-my-product › ux-critique

ux-critique

GitHub

用于对页面、组件或用户流程进行UX审查、可用性评估及无障碍审计。基于尼尔森启发式和WCAG指南，检查设计一致性并输出包含评分和修复建议的报告。

skills/ux-critique/SKILL.md jjongguet/oh-my-product

Trigger Scenarios

请求UX审查可用性批评无障碍审计

Install

npx skills add jjongguet/oh-my-product --skill ux-critique -g -y

More Options

Use without installing

npx skills use jjongguet/oh-my-product@ux-critique

指定 Agent (Claude Code)

npx skills add jjongguet/oh-my-product --skill ux-critique -a claude-code -g -y

安装 repo 全部 skill

npx skills add jjongguet/oh-my-product --all -g -y

预览 repo 内 skill

npx skills add jjongguet/oh-my-product --list

SKILL.md

Frontmatter

{
    "name": "ux-critique",
    "aliases": [
        "\/ux-review",
        "ux critique",
        "usability review",
        "accessibility audit",
        "a11y check"
    ],
    "description": "Activate when the user requests a UX review, usability critique, or accessibility audit of a page, component, or user flow. Evaluates against Nielsen's heuristics and WCAG guidelines.",
    "primaryRole": "designer"
}

UX Critique Skill (oh-my-product)

Use this skill to evaluate UI/UX quality, usability, and accessibility.

Evaluation Frameworks

Nielsen's 10 Usability Heuristics

Visibility of system status
Match between system and real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
Help and documentation

WCAG 2.1 Accessibility Checklist

Perceivable: Text alternatives, captions, contrast (4.5:1), resize-friendly
Operable: Keyboard accessible, no seizure triggers, navigable, input modalities
Understandable: Readable, predictable, input assistance
Robust: Compatible with assistive technologies

Workflow

Scope — What is being reviewed (page, flow, component, full site)
Inspect — Read the source code / rendered output
Evaluate — Apply heuristics + WCAG checklist
Score — Rate each dimension (pass / warning / fail)
Recommend — Prioritized fixes with code examples

Output Format

## UX Critique Report

### Summary
- Overall score: X/10
- Critical issues: N
- Warnings: N

### Heuristic Evaluation
| # | Heuristic | Score | Finding |
|---|-----------|-------|---------|
| 1 | Visibility of system status | pass/warn/fail | Detail... |
...

### Accessibility Audit
| Level | Criterion | Status | Detail |
|-------|-----------|--------|--------|
| A | 1.1.1 Non-text Content | pass/fail | ... |
...

### Prioritized Recommendations
1. [CRITICAL] ...
2. [WARNING] ...
3. [IMPROVEMENT] ...

Rules

Always check DESIGN.md first if it exists — evaluate consistency with defined tokens
Test responsive behavior at 375px, 768px, 1280px viewports
Check both light and dark mode if applicable
Include concrete code fix suggestions, not just descriptions
Flag any hardcoded values that should reference DESIGN.md tokens