Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

ss-a11y — Kiểm tra khả năng truy cập

Skill quét tĩnh component/trang theo chuẩn WCAG 2.2 AA và tự sửa các lỗi accessibility có thể sửa được.

Thiết kế · UITrung cấp★ 880⑂ 77Điểm AI 6/10Cập nhật lần cuối: 6 thg 8, 2026

Nó làm được gì

Đọc file bạn chỉ định (component hoặc page) và tìm lỗi accessibility theo WCAG 2.2 AA:

  • Perceivable: tương phản chữ 4.5:1 (chữ lớn 3:1), tương phản phi văn bản 3:1, thiếu alt/aria-label, truyền tải thông tin chỉ bằng màu
  • Operable: vùng chạm tối thiểu 44x44px (lỗi phổ biến h-9 nên là h-11), điều hướng bằng bàn phím, vòng focus focus-visible:ring-2, tôn trọng prefers-reduced-motion
  • Understandable: label cho input, thông báo lỗi gắn bằng aria-describedby, thuộc tính <html lang>
  • Robust: HTML semantic, ARIA qua Radix UI, role cho phần tử tương tác tự viết

Kết quả gồm danh sách lỗi theo mức độ (Critical/Major/Minor), các bản sửa tự động, và những điểm cần con người xem lại. Có kèm bảng tương phản tối thiểu cho từng design token.

Phù hợp với ai

  • Dev frontend React/Tailwind muốn kiểm tra accessibility thường xuyên
  • Nhóm dùng design system theo quy ước StyleSeed (data-slot, semantic token)
  • Người review PR muốn phát hiện hồi quy accessibility trước khi merge

Lưu ý: đây là kiểm tra mã tĩnh, không mô phỏng screen reader. Review tuân thủ design system dùng /ss-review, heuristic UX Nielsen dùng /ss-audit.

Ví dụ sử dụng

  1. /ss-a11y src/components/ui/button.tsx — phát hiện icon button thiếu w-11 h-11 và thiếu aria-label, sửa ngay.
  2. /ss-a11y app/settings/page.tsx — báo input thiếu label và thông báo lỗi chưa liên kết aria-describedby.
  3. /ss-a11y src/components/Toast.tsx — đánh dấu Major vì animation bỏ qua prefers-reduced-motion và token --warning thiếu tương phản.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/bitjaru/styleseed/HEAD/engine/.claude/skills/ss-a11y/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục engine/.claude/skills/ss-a11y từ repo GitHub bitjaru/styleseed vào ~/.claude/skills/ss-a11y/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed && mkdir -p ~/.claude/skills && cp -r /tmp/styleseed/engine/.claude/skills/ss-a11y ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal.
  2. Clone repo vào thư mục tạm: git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed
  3. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r /tmp/styleseed/engine/.claude/skills/ss-a11y ~/.claude/skills/
  5. Kiểm tra file ~/.claude/skills/ss-a11y/SKILL.md đã tồn tại.
  6. Khởi động lại Claude Code và chạy kèm đường dẫn file, ví dụ /ss-a11y src/components/Button.tsx.
  7. Nếu dự án không dùng StyleSeed, hãy sửa bảng tương phản token (--brand, --warning...) trong SKILL.md cho khớp màu của bạn.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT