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

Các công cụ review và đảm bảo chất lượng design: web guidelines compliance, accessibility, performance.

​
Công cụ review

Công cụMô tảKhi nào dùng
web-design-guidelinesReview UI theo Web Interface GuidelinesSau khi code UI
accessibility-auditor agentWCAG 2.1 AA complianceTrước release
/qa-full a11y URLAccessibility scan toàn diệnTesting
Chrome DevTools → LighthousePerformance + a11y + SEO auditSau deploy staging
design:accessibility-reviewAnthropic plugin accessibilityReview design

​
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:
MetricTargetMô tả
Performance90+Core Web Vitals (LCP, FID, CLS)
Accessibility95+WCAG compliance score
Best Practices90+Security, modern APIs
SEO90+Meta tags, structured data
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 review design

1

Self-review

Dùng web-design-guidelines skill để review code UI vừa viết.
2

Accessibility scan

/qa-full a11y https://staging.site.com
Scan WCAG 2.1 AA toàn diện.
3

Lighthouse audit

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

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:
BướcMô tả
1. MeasureĐo LCP hiện tại qua Performance trace
2. IdentifyXác định LCP element (image, text block, video)
3. AnalyzePhân tích bottleneck: server response, resource load, render delay
4. OptimizeSuggest fixes: preload, lazy load, image optimization, CDN

​
A11y Debugging

Skill chrome-devtools-mcp:a11y-debugging — accessibility debugging theo web.dev guidelines:
Tính năngMô tả
ARIA tree inspectionKiểm tra accessibility tree
Contrast checkerĐo contrast ratio real-time
Focus orderTrace tab order qua page
Screen reader simulationTest với screen reader output

​
Troubleshooting

Skill chrome-devtools-mcp:troubleshooting — troubleshoot connection và target issues:
Vấn đềGiải pháp
MCP connection failedCheck Chrome debug port, restart browser
Target not foundList pages, verify URL, select correct tab
Script evaluation errorCheck content security policy, CORS
Performance trace stuckKill orphan Chrome processes, retry
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.