MCP HubMCP Hub
← 스킬 목록으로 돌아가기

review-ux-ui

pjt222
업데이트됨 6 days ago
11 조회
17
2
17
GitHub에서 보기
디자인design

정보

이 스킬은 닐슨의 휴리스틱 평가, WCAG 2.1 접근성 검사, 사용자 흐름 분석을 활용하여 포괄적인 UX/UI 리뷰를 수행합니다. 출시 전 사용성 점검, 접근성 준수 확인, 인터페이스 휴리스틱 평가를 위해 설계되었습니다. 개발자는 배포 전에 효율성, 인지 부하, 폼 사용성 측면에서 디자인을 평가할 때 이를 활용해야 합니다.

빠른 설치

Claude Code

추천
기본
npx skills add pjt222/agent-almanac -a claude-code
플러그인 명령대체
/plugin add https://github.com/pjt222/agent-almanac
Git 클론대체
git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/review-ux-ui

Claude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요

문서

察介

評介之用、達、效也。

用

  • 釋前察用→用
  • WCAG 2.1 達合→用
  • 流之效→用
  • 表設→用
  • 啟發評既介→用

入

  • 必：所察之介（URL、原型、源碼）
  • 必：標用述（職、技、境）
  • 可：研果（訪、問、析）
  • 可：WCAG 標（A、AA、AAA）
  • 可：所察之流
  • 可：助技（讀屏、開關）

行

一：啟發評（Nielsen 十則）

逐則察介：

#則問
1狀顯系恆告用所事乎？
2介合實用熟語熟念乎？
3用控自由易撤、復、退乎？
4一致規範同元同行乎？
5防誤設防誤先發乎？
6識勝憶選、行、訊皆顯乎？
7靈效有捷徑而不亂初乎？
8簡美元皆有用乎？無冗乎？
9助識診復誤誤訊明、具、建乎？
10助文助易尋乎？

各則評重：

級述
0非問題
1飾 — 暇修
2微 — 低先
3大 — 必修
4災 — 釋前必修
## Heuristic Evaluation Findings
| # | Heuristic | Severity | Finding | Location |
|---|-----------|----------|---------|----------|
| 1 | System status | 3 | No loading indicator during data fetch — users click repeatedly | Dashboard page |
| 3 | User control | 2 | No undo for item deletion — only a confirmation dialog | Item list |
| 5 | Error prevention | 3 | Date field accepts invalid dates (Feb 30) | Booking form |
| 9 | Error recovery | 4 | Form submission error clears all fields | Registration |

得：十則皆評，各有具體發現與重級。

敗：時迫→重 1、3、5、9。

二：達察（WCAG 2.1）

可知

  • 1.1.1 非文容：圖皆有 alt（飾圖 alt=""）
  • 1.3.1 訊關：用語意 HTML
  • 1.3.2 序意：DOM 序合視序
  • 1.4.1 色用：色非唯傳訊
  • 1.4.3 對比：文 ≥ 4.5:1（常）、≥ 3:1（大）
  • 1.4.4 縮文：可縮 200% 不失功
  • 1.4.11 非文對：UI 元 ≥ 3:1
  • 1.4.12 文距：增距仍可用

可操

  • 2.1.1 鍵：諸功皆鍵可操
  • 2.1.2 無鍵困：焦不困
  • 2.4.1 跳鏈：有跳導鏈
  • 2.4.3 焦序：Tab 序合理
  • 2.4.7 焦顯：焦印明顯
  • 2.4.11 焦不蔽：焦元不藏
  • 2.5.5 標尺：互動 ≥ 24x24px

可解

  • 3.1.1 頁語：<html> 設 lang
  • 3.2.1 焦時：焦不引意外
  • 3.2.2 入時：入不引意外
  • 3.3.1 誤識：誤明述於文
  • 3.3.2 標令：表入有顯標
  • 3.3.3 誤建：誤訊建修法

健

  • 4.1.1 解析：HTML 有效
  • 4.1.2 名色值：自定元有 ARIA
  • 4.1.3 狀訊：動容變宣告

得：WCAG 2.1 AA 系察、各條過/敗。

敗：先用 axe-core、Lighthouse 自動掃，後人評需判者。

三：鍵與讀屏察

鍵導測

僅用 Tab、Shift+Tab、Enter、Space、箭、Esc：

## Keyboard Navigation Audit
| Task | Completable? | Issues |
|------|-------------|--------|
| Navigate to main content | Yes — skip link works | None |
| Open dropdown menu | Yes | Arrow keys don't work within menu |
| Submit a form | Yes | Tab order skips the submit button |
| Close a modal | No | Escape doesn't close, no visible close button in tab order |
| Use date picker | No | Custom date picker not keyboard accessible |

讀屏測

NVDA、VoiceOver、TalkBack 測：

## Screen Reader Audit
| Element | Announced As | Expected | Issue |
|---------|-------------|----------|-------|
| Logo link | "link, image" | "Home, link" | Missing alt text on logo |
| Search input | "edit, search" | "Search products, edit" | Missing label association |
| Nav menu | "navigation, main" | Correct | None |
| Error message | (not announced) | "Error: email is required" | Missing live region |
| Loading spinner | (not announced) | "Loading, please wait" | Missing aria-live or role="status" |

得：全流以鍵獨、讀屏皆測。

敗：無讀屏→察 ARIA 與語意 HTML 為代。

四：流析

繪要流：

## User Flow: Complete a Purchase

### Steps
1. Browse products → 2. View product → 3. Add to cart → 4. View cart →
5. Enter shipping → 6. Enter payment → 7. Review order → 8. Confirm

得：要流繪、摩擦點識別評級。

敗：無分析→按複雜與步數評。

五：認負察

  • 訊密：屏訊量適乎？
  • 漸顯：複訊漸顯乎？
  • 塊：相關視覺成組乎？
  • 識勝憶：見而非憶乎？
  • 一致式：同務同式乎？
  • 決疲：選過多乎？
  • 工憶：跨步需憶乎？

得：認負察、過載/不足區明。

敗：難客評→「眯測」（眯眼察結構顯否）。

六：表用察

各表：

  • 標：每入有顯關標
  • 占文：僅作例非標
  • 入型：HTML 入型正
  • 驗時：失焦或提交時誤
  • 誤訊：具非泛
  • 必欄：明標
  • 欄組：相關視覺組
  • 自完：autocomplete 設
  • Tab 序：合視覺
  • 多步表：進度顯
  • 持：離返保

得：每表察、具體問題錄。

敗：表多→重高量者（註冊、結算、聯）。

七：書察報

## UX/UI Review Report
### Executive Summary
[2-3 sentences]
### Top 5 Improvements (Prioritised)
1. **[Issue]** — Severity: [N] — [Specific recommendation]

得：察給優先可行建、附重級。

敗：問題過多→分「必修」（3-4）「宜修」（1-2）。

驗

  • 十則皆評
  • WCAG 2.1 至少 1.1.1、1.4.3、2.1.1、2.4.7、3.3.1、4.1.2 察
  • 鍵導要流測
  • 讀屏測（或 ARIA/語意 HTML 代）
  • 至少一要流析摩擦
  • 認負察
  • 表用察
  • 發現按重排可行建

忌

  • 混 UX 與視設：UX 為何運、視為何貌。美而 UX 劣可有
  • 僅測順路：誤、空、載、邊例為 UX 問題藏處
  • 忽真機：瀏覽器代之。真機觸、性、視口問題
  • 達為後思：晚發貴修。早續察
  • 私好為 UX 反：「吾偏好…」非 UX 反。引則、研、規

參

  • review-web-design
  • scaffold-nextjs-app
  • setup-tailwind-typescript

GitHub 저장소

pjt222/agent-almanac
경로: i18n/wenyan-ultra/skills/review-ux-ui
0
agentsagentskillsai-assisted-developmentclaude-codeskillsteams

연관 스킬

executing-plans

디자인

executing-plans 스킬은 검토 체크포인트가 포함된 통제된 배치로 실행할 완전한 구현 계획이 있을 때 사용합니다. 이 스킬은 계획을 불러와 비판적으로 검토한 후, 소규모 배치(기본값 3개 작업)로 작업을 실행하면서 각 배치 사이에 진행 상황을 아키텍트 검토를 위해 보고합니다. 이를 통해 내재된 품질 관리 체크포인트를 갖춘 체계적인 구현이 보장됩니다.

스킬 보기

requesting-code-review

디자인

이 스킬은 코드 변경 사항을 요구 사항에 따라 분석하기 위해 코드 리뷰어 하위 에이전트를 호출합니다. 작업 완료 후, 주요 기능 구현 후, 또는 메인 브랜치에 병합하기 전에 사용해야 합니다. 이 리뷰는 현재 구현체와 원래 계획을 비교하여 문제를 조기에 발견하는 데 도움이 됩니다.

스킬 보기

connect-mcp-server

디자인

이 스킬은 개발자들이 HTTP, stdio 또는 SSE 전송 방식을 통해 MCP 서버를 Claude Code에 연결하는 포괄적인 가이드를 제공합니다. GitHub, Notion 및 사용자 정의 API와 같은 외부 서비스를 통합하기 위한 설치, 구성, 인증 및 보안을 다룹니다. MCP 통합 설정, 외부 도구 구성 또는 Claude의 모델 컨텍스트 프로토콜 작업 시 활용하세요.

스킬 보기

web-cli-teleport

디자인

이 스킬은 작업 분석을 기반으로 개발자가 Claude Code 웹 인터페이스와 CLI 인터페이스 중 선택할 수 있도록 돕고, 두 환경 간 원활한 세션 텔레포트를 가능하게 합니다. 웹, CLI 또는 모바일 환경 전환 시 세션 상태와 컨텍스트를 관리하여 워크플로를 최적화합니다. 다양한 단계에서 서로 다른 도구가 필요한 복잡한 프로젝트에 사용하세요.

스킬 보기