AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

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

Skill rà soát tĩnh code component/trang theo WCAG 2.2 AA và tự sửa những lỗi truy cập có thể sửa được.

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

Skill này làm gì

  • Đọc file được chỉ định và tìm lỗi khả năng truy cập theo chuẩn WCAG 2.2 AA.
  • Kiểm tra: tỉ lệ tương phản màu (4.5:1 / 3:1), text thay thế cho ảnh và icon, vùng chạm tối thiểu 44x44, focus ring bằng bàn phím, prefers-reduced-motion, nhãn form và liên kết aria-describedby, HTML ngữ nghĩa cùng thuộc tính role.
  • Có bảng tham chiếu mức tương phản tối thiểu cho từng design token (--foreground, --muted-foreground, --brand, --destructive...).
  • Xuất kết quả theo mức độ Critical/Major/Minor, tự áp dụng bản sửa khi được và đánh dấu phần cần con người quyết định.

Phù hợp với ai

  • Lập trình viên frontend dùng design system StyleSeed (data-slot, semantic tokens).
  • Nhóm làm Tailwind + Radix UI muốn giữ chuẩn accessibility nhất quán.
  • Người cần một checklist a11y nhanh ở mức code trước khi phát hành.

Ví dụ sử dụng

  1. /ss-a11y src/components/Button.tsx — phát hiện icon button thiếu aria-label và thiếu vùng chạm, bổ sung class focus-visible.
  2. Audit trang đăng nhập — kiểm tra input thiếu label, thông báo lỗi chưa gắn aria-describedby.
  3. Landing page nhiều animation — tìm chỗ chưa xử lý prefers-reduced-motion và chèn đoạn CSS khuyến nghị.

Lưu ý: đây là audit code tĩnh, không mô phỏng screen reader. Để review design system dùng /ss-review, để kiểm tra 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 AI 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à clone repo: git clone https://github.com/bitjaru/styleseed.git
  2. Tạo thư mục skill: mkdir -p ~/.claude/skills
  3. Copy skill: cp -r styleseed/engine/.claude/skills/ss-a11y ~/.claude/skills/
  4. Nếu cần tài liệu preflight được tham chiếu, copy thêm: cp -r styleseed/engine/.claude/skills/ss-update ~/.claude/skills/
  5. Khởi động lại Claude Code rồi chạy ví dụ: /ss-a11y src/components/Button.tsx
  6. Với dự án StyleSeed, kiểm tra có .styleseed/project.json và .styleseed/artifacts/index.json; nếu không có, skill chỉ chạy như một audit a11y thông thường.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT