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

ux-critique

GitHub

用于评估UI/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