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 định khả năng truy cập

Rà soát tĩnh component hoặc trang theo chuẩn WCAG 2.2 AA và tự sửa những lỗi có thể sửa được.

Thiết kế · UITrung cấp★ 962⑂ 89Điểm AI 7/10Cập nhật lần cuối: 18 thg 9, 2026

Làm được gì

  • Đọc file component/trang bạn chỉ định và đối chiếu với WCAG 2.2 AA.
  • Kiểm tra theo 4 nguyên tắc: cảm nhận được (tương phản màu, alt/aria-label), vận hành được (vùng chạm 44px, điều hướng bàn phím, prefers-reduced-motion), hiểu được (label, liên kết lỗi bằng aria-describedby, thuộc tính lang), bền vững (HTML semantic, ARIA, role).
  • Có bảng tỷ lệ tương phản tối thiểu cho từng token thiết kế (--foreground, --muted-foreground, --brand, --destructive...).
  • Xuất kết quả theo mức độ Critical/Major/Minor, tự sửa phần khả thi và đánh dấu phần cần con người xem lại.

Phù hợp với ai

  • Nhóm đang dùng dự án StyleSeed (registry .styleseed, data-slot, semantic token).
  • Lập trình viên frontend dùng Tailwind CSS kết hợp Radix UI.
  • Người phụ trách design system muốn quét lỗi a11y trước khi release.

Ví dụ sử dụng

  1. Chỉ định Button.tsx để phát hiện icon button thiếu aria-label và vùng chạm quá nhỏ.
  2. Kiểm tra trang form xem input có label hiển thị và thông báo lỗi có gắn aria-describedby chưa.
  3. Quét trang landing nhiều animation để bổ sung khối CSS prefers-reduced-motion.

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

· · · 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 và vào thư mục làm việc.
  2. Tải repo: git clone https://github.com/bitjaru/styleseed.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r styleseed/engine/.claude/skills/ss-a11y ~/.claude/skills/
  5. Khởi động lại Claude Code và chạy kèm đường dẫn file, ví dụ /ss-a11y src/components/Button.tsx.
  6. Nếu dự án không theo StyleSeed, hãy bỏ qua phần .styleseed và dùng skill như một checklist WCAG.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT