​
Design Review — Kiểm tra chất lượng

Các công cụ review và đảm bảo chất lượng design: visual QA, web guidelines compliance, accessibility, performance.
/design-review là skill chính cho visual QA + auto-fix. Dùng sau khi implement UI components.

​
Công cụ review

​
Design Review Skills

Prefix: /design-reviewIterative visual QA. Screenshot before/after, fix commits atomic.
Workflow:
  1. Screenshot current UI
  2. Identify visual issues
  3. Propose fixes
  4. Apply fixes (atomic commits)
  5. Screenshot + compare after/before
Khi nào dùng:
  • After implement UI components
  • Visual QA trước release
  • Auto-fix layout/color/spacing issues
  • Ensure responsive design
Prefix: /plan-design-reviewOrchestrate design review theo persona (CEO, engineer, designer, DevX).
Personas:
  • /plan-ceo-review — Business + brand perspective
  • /plan-eng-review — Technical + performance review
  • /plan-design-review — Design + UX review
  • /plan-devex-review — Developer experience
Khi nào dùng:
  • Get multi-perspective design feedback
  • Structured review before merge
  • Different personas, different criteria

​
Web Design Guidelines

Skill web-design-guidelines review UI code theo best practices: Trigger khi nói:
  • “Review my UI”, “check accessibility”
  • “Audit design”, “review UX”
  • “Check my site against best practices”
Kiểm tra:
  • Semantic HTML structure
  • Color contrast ratios
  • Touch target sizes
  • Keyboard navigation
  • Focus management
  • Responsive breakpoints
  • Loading states
  • Error states

​
Accessibility Checklist

1

Semantic HTML

  • Dùng đúng heading hierarchy (h1 → h2 → h3)
  • Dùng <button> cho interactive elements (không dùng <div onClick>)
  • Dùng <nav>, <main>, <aside> cho landmarks
  • Images có alt text mô tả
2

Keyboard Navigation

  • Tất cả interactive elements có thể Tab đến
  • Focus visible rõ ràng (outline)
  • Modal trap focus bên trong
  • Escape để đóng modal/dropdown
3

Color & Contrast

  • Text contrast ratio ≥ 4.5:1 (AA normal text)
  • Large text contrast ≥ 3:1
  • Không dùng color alone để truyền thông tin
  • Dark mode đảm bảo contrast
4

ARIA

  • aria-label cho icon-only buttons
  • aria-expanded cho accordion/dropdown
  • role="alert" cho error messages
  • aria-live cho dynamic content

​
Chrome DevTools — Lighthouse Audit

Dùng Chrome DevTools MCP để chạy Lighthouse audit: Cách chạy:
  1. Navigate đến trang cần audit
  2. Dùng lighthouse_audit tool từ Chrome DevTools MCP
  3. Review kết quả, fix issues

​
Quy trình design review

1

Visual QA + auto-fix

Screenshot → identify issues → auto-fix → screenshot after/before.
2

Web guidelines review

Dùng web-design-guidelines skill để review code UI theo best practices.
3

Multi-persona review

Get feedback từ designer, engineer, CEO personas.
4

Accessibility scan

Scan WCAG 2.1 AA toàn diện.
5

Lighthouse audit

Dùng Chrome DevTools MCP → lighthouse_audit cho performance + a11y score.
6

Cross-browser

Test trên Chrome, Firefox, Safari. Dùng responsive mode cho mobile.

​
Chrome DevTools MCP — Sub-skills

Ngoài Lighthouse audit, Chrome DevTools MCP còn cung cấp 3 skills chuyên biệt:

​
Debug Optimize LCP

Skill chrome-devtools-mcp:debug-optimize-lcp — hướng dẫn debug và tối ưu Largest Contentful Paint:

​
A11y Debugging

Skill chrome-devtools-mcp:a11y-debugging — accessibility debugging theo web.dev guidelines:

​
Troubleshooting

Skill chrome-devtools-mcp:troubleshooting — troubleshoot connection và target issues:
Best practice: Chạy accessibility review trong lúc code (không chờ đến cuối sprint). Dùng web-design-guidelines skill sau mỗi component mới.