Accessibility (Khả năng tiếp cận)
Skill giúp Claude rà soát accessibility theo bốn nguyên tắc POUR của WCAG cùng checklist kiểm tra 8 bước thực tế.
Skill này làm gì
Cung cấp cho Claude một khung tư duy chuẩn khi xử lý các tác vụ về accessibility (a11y). Skill dùng bốn nguyên tắc WCAG — Perceivable, Operable, Understandable, Robust (POUR) — làm "lăng kính" phân loại lỗi, kèm checklist 8 bước: điều hướng bằng bàn phím → screen reader → tương phản màu → cấu trúc semantic → form và thông báo lỗi → kích thước vùng chạm và thời gian chờ → media & chuyển động → reflow ở mức zoom 200%.
Ngoài ra skill tách riêng hai tài liệu tham chiếu: khả năng tiếp cận nhận thức (8 mục tiêu W3C COGA) và chuyển động/cảm giác/người dùng cao tuổi, chỉ nạp khi tác vụ thật sự cần chiều sâu. Ranh giới cũng rất rõ: các vấn đề về ngữ cảnh (ngôn ngữ, văn hoá, thiết bị yếu, mạng chậm) được chuyển sang skill inclusive-design.
Phù hợp với ai
- Lập trình viên frontend hoặc Flutter được yêu cầu "làm cho accessible" nhưng chưa biết bắt đầu từ đâu
- QA và designer thấy điểm axe/Lighthouse chưa đủ để đảm bảo chất lượng
- Nhóm muốn chuẩn hoá tiêu chí accessibility cho design system
- Dự án khu vực công, ngân hàng có yêu cầu tuân thủ WCAG
Ví dụ sử dụng
- "Audit accessibility cho form thanh toán này" — Claude chỉ ra label thiếu, field chỉ có placeholder, lỗi chỉ báo bằng màu đỏ, và nhóm theo nguyên tắc POUR.
- "Sửa focus trap trong modal" — kiểm tra thứ tự focus, điểm trả focus khi đóng, xử lý ESC và việc screen reader có thông báo thay đổi hay không.
- "Người dùng phản hồi hiệu ứng chuyển trang gây chóng mặt" — áp dụng mẫu
prefers-reduced-motionvà giới hạn nhấp nháy dưới 3 lần/giây để đề xuất bản sửa.
· · · 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/evanca/flutter-ai-rules/HEAD/skills/accessibility/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)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
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 skills/accessibility từ repo GitHub evanca/flutter-ai-rules vào ~/.claude/skills/evanca-accessibility/ 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/evanca/flutter-ai-rules.git && mkdir -p ~/.claude/skills && cp -r flutter-ai-rules/skills/accessibility ~/.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.
- Mở terminal.
- Tạo thư mục skill nếu chưa có:
mkdir -p ~/.claude/skills - Clone repo:
git clone https://github.com/evanca/flutter-ai-rules.git - Copy skill:
cp -r flutter-ai-rules/skills/accessibility ~/.claude/skills/ - (Khuyến nghị) copy thêm skill liên quan:
cp -r flutter-ai-rules/skills/inclusive-design ~/.claude/skills/ - Kiểm tra thư mục
~/.claude/skills/accessibility/references/đã có các file tham chiếu. - Khởi động lại Claude Code, rồi thử yêu cầu "kiểm tra accessibility cho trang này" để skill tự kích hoạt.