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

better-ui — Trình đánh bóng giao diện

Skill rà soát chi tiết UI (bo góc đồng tâm, canh chỉnh quang học, đổ bóng, chuyển động icon) theo các giá trị chính xác và xuất báo cáo theo mức độ nghiêm trọng.

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

Làm được gì

Phát hiện những chi tiết khiến giao diện "nhìn hơi sai" và đưa ra cách sửa cụ thể.

  • Bo góc đồng tâm: radius ngoài = radius trong + padding
  • Canh quang học thay vì canh hình học cho icon, nút, tam giác play
  • Bóng cho độ sâu, viền cho cấu trúc: thay viền trang trí bằng box-shadow nhiều lớp
  • Chuyển động: dùng CSS transition có thể ngắt giữa chừng, stagger ~100ms cho hiệu ứng vào, scale(0.96) khi nhấn
  • Chuyển icon: opacity 0→1, scale 0.25→1, blur 4px→0; có motion/framer-motion thì dùng spring duration 0.3, bounce 0
  • Tắt transition khi đổi theme, ép reflow rồi khôi phục ở frame kế tiếp
  • Độ dày nét icon khớp với độ đậm chữ: 1.5px cạnh chữ 400, 2px cạnh chữ 600
  • Kết thúc bằng bảng HIGH/MEDIUM/LOW với vị trí / Before / After / lý do, còn HIGH thì Block, ngược lại Approve

Typography, accessibility và layout được tách sang các skill riêng.

Phù hợp với ai

  • Lập trình viên frontend (React, Tailwind, CSS) muốn nâng chất lượng thị giác
  • Dev solo/startup không có designer riêng
  • Tech lead muốn tự động hóa review chi tiết UI trong PR

Ví dụ sử dụng

  1. "Review component Card này theo better-ui" → báo cáo radius lồng nhau lệch, transition: all, nét icon quá mảnh
  2. "Đổi dark mode bị nhòe cả trang" → chèn đoạn tắt transition toàn cục + ép reflow
  3. "Animation mở sidebar bị rối" → tách nội dung thành khối ngữ nghĩa và stagger 100ms

· · · 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/aiskillstore/marketplace/HEAD/pending/jakubkrehel/better-ui/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 pending/jakubkrehel/better-ui từ repo GitHub aiskillstore/marketplace vào ~/.claude/skills/better-ui/ 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/aiskillstore/marketplace.git /tmp/aiskillstore && mkdir -p ~/.claude/skills && cp -r /tmp/aiskillstore/pending/jakubkrehel/better-ui ~/.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 kho về thư mục tạm: 
    git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore
  3. Copy nguyên thư mục skill (không chỉ SKILL.md, vì cần các file tham chiếu như surfaces.md, animations.md): 
    mkdir -p ~/.claude/skills
cp -r /tmp/aiskillstore/pending/jakubkrehel/better-ui ~/.claude/skills/
  4. Kiểm tra bằng ls ~/.claude/skills/better-ui.
  5. Khởi động lại Claude Code và yêu cầu: "Dùng better-ui review giao diện component này".
  6. Tùy chọn: cài thêm better-typography, better-accessibility, better-layout theo cách tương tự.
Xem mã nguồn trên GitHub ↗