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

Trình soạn đặc tả Component UI

Skill tạo đặc tả component UI đầy đủ: anatomy, variants, 8 trạng thái, ánh xạ design token và kiểm thử accessibility thực tế.

Thiết kế · UINâng cao★ 877⑂ 91Điểm AI 9/10Cập nhật lần cuối: 26 thg 8, 2026

Làm được gì

  • Soạn spec component (button, input, tabs, modal, combobox, date picker...) gồm sơ đồ anatomy, bảng variants, bảng sizes và 8 trạng thái (default/hover/focus/active/disabled/loading/error/selected).
  • Ánh xạ mọi giá trị về design token (tokens/*.json, sizing.json, states.json) và bổ sung role ARIA, điều hướng bàn phím, nội dung cho screen reader.
  • Bắt buộc dựng "states harness" HTML rồi chạy các cổng kiểm tra thật: verify_states.mjs (tương phản), axe_audit.mjs (ARIA), measure_render.mjs, verify_responsive.mjs, verify_focustrap.mjs.
  • Hướng dẫn chụp ảnh bằng Playwright + Chrome để kiểm tra bằng mắt: control có toggle thật không, glyph có căn giữa, độ dày nét có nhất quán.
  • Cung cấp quy tắc cho responsive (không tràn ngang ở 280/320/414px), motion token hóa, grid auto-fit, sprite icon lucide.

Dành cho ai

  • Designer/lập trình frontend đang xây dựng hoặc chuẩn hóa design system.
  • Nhóm cần đạt WCAG (4.5:1 cho chữ, 3:1 cho control không chữ) và hỗ trợ dark mode.
  • Người muốn tránh UI "AI slop": trông ổn nhưng bấm không chạy.

Ví dụ sử dụng

  1. "Viết spec cho component Tabs" → nhận bảng variants/sizes/8 states kèm ARIA và token.
  2. "Checkbox tùy chỉnh không bấm được" → áp dụng mẫu input thật + overlay pointer-events:none đã được kiểm chứng.
  3. "Kiểm tra accordion có animate chiều cao" → dùng mẫu grid-template-rows 0fr→1fr và tôn trọng prefers-reduced-motion.

· · · 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/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/design-component/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 .claude/skills/design-component từ repo GitHub plugin87/ux-ui-agent-skills vào ~/.claude/skills/design-component/ 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/plugin87/ux-ui-agent-skills.git && mkdir -p ~/.claude/skills && cp -r ux-ui-agent-skills/.claude/skills/design-component ~/.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: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r ux-ui-agent-skills/.claude/skills/design-component ~/.claude/skills/
  5. Skill tham chiếu rules/, tokens/, scripts/, examples/ trong cùng repo — hãy giữ repo trong project của bạn hoặc copy kèm các thư mục đó.
  6. Muốn chạy các cổng kiểm tra, cài Node.js, Chrome và npm i -D playwright @axe-core/playwright.
  7. Khởi động lại Claude Code và yêu cầu ví dụ: "Thiết kế spec cho component Toast".
Xem mã nguồn trên GitHub ↗