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

Chuyên gia shadcn/ui

Skill giúp thêm, sửa, gỡ lỗi và tạo kiểu cho component shadcn/ui theo đúng quy trình CLI chuẩn.

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

Làm được gì

  • Bắt buộc dùng CLI shadcn đúng cách (info, search, docs, add, view, init --preset) với package runner phù hợp của dự án.
  • Đọc bối cảnh dự án trước (aliases, isRSC, tailwindVersion, base, iconLibrary) rồi mới viết code, tránh hardcode đường dẫn import hay thiếu "use client".
  • Danh sách quy tắc rõ ràng nên/không nên: không space-y-* mà dùng flex gap-*, dùng size-10 thay w-10 h-10, form dùng FieldGroup + Field, icon trong Button dùng data-icon, chỉ dùng token màu semantic.
  • Quy trình cập nhật component bằng --dry-run / --diff để giữ lại thay đổi cục bộ, và quy trình đổi preset (reinstall / merge / skip).

Dành cho ai

  • Lập trình viên frontend dùng shadcn/ui với Next.js, Vite, React Router, Astro...
  • Nhóm muốn code UI do AI sinh ra tuân thủ đúng convention của shadcn.
  • Người thường cài component từ registry cộng đồng (@magicui, @tailark) và phải sửa import.

Ví dụ sử dụng

  1. "Tạo trang settings" → ghép Tabs + Card + FieldGroup, kiểm tra component đã cài trước khi add.
  2. "Cập nhật component Button từ upstream" → chạy add button --dry-run, rồi --diff từng file để merge mà không mất tùy chỉnh.
  3. "Đổi sang --preset a2r6bw" → hỏi bạn chọn reinstall/merge/skip rồi chạy lệnh tương ứng.

· · · 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/molefrog/moi/HEAD/.agents/skills/shadcn/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 .agents/skills/shadcn từ repo GitHub molefrog/moi vào ~/.claude/skills/shadcn/ 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/molefrog/moi.git /tmp/moi && mkdir -p ~/.claude/skills && cp -r /tmp/moi/.agents/skills/shadcn ~/.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/molefrog/moi.git /tmp/moi
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r /tmp/moi/.agents/skills/shadcn ~/.claude/skills/
  5. Kiểm tra trong ~/.claude/skills/shadcn có SKILL.md cùng thư mục rules/, cli.md, customization.md.
  6. Mở Claude Code trong dự án có components.json và yêu cầu ví dụ "thêm component dialog" để skill tự kích hoạt.
  7. Cần cài Node.js và npx (hoặc pnpm/bun) để các lệnh CLI hoạt động.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION