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

Skill quản lý component shadcn/ui

Skill giúp thêm, sửa, debug và tạo kiểu component shadcn/ui đúng chuẩn thông qua CLI và bộ quy tắc code chi tiết.

Lập trìnhTrung cấp★ 130⑂ 7Điểm AI 9/10Cập nhật lần cuối: 26 thg 8, 2026

Làm được gì

  • Luôn đọc ngữ cảnh dự án bằng npx shadcn@latest info --json (alias, phiên bản Tailwind, isRSC, iconLibrary, base/radix) rồi sinh code phù hợp.
  • Áp dụng quy trình chuẩn: search để tìm component → docs để lấy tài liệu → add để cài → đọc lại file vừa thêm để kiểm tra.
  • Ngăn các lỗi phổ biến của shadcn: dùng gap-* thay space-y-*, size-* thay w-10 h-10, form phải dùng FieldGroup + Field, icon trong Button dùng data-icon, chỉ dùng token màu semantic như bg-primary.
  • Hướng dẫn 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).

Phù hợp với ai

  • Lập trình viên frontend React, Next.js, Vite, Astro đang dùng shadcn/ui.
  • Người thường lấy block từ nhiều registry (@shadcn, @magicui, @tailark) và phải sửa import, đổi bộ icon.
  • Team lead muốn giữ code UI nhất quán theo một bộ quy tắc.

Ví dụ sử dụng

  1. "Tạo trang settings" → ghép Tabs + Card + FieldGroup, dùng đúng alias và icon library của dự án.
  2. "Thêm shimmer button từ @magicui" → xác nhận registry, cài rồi viết lại các import @/components/ui/... cho khớp alias thật.
  3. "Cập nhật component button lên bản mới" → chạy --dry-run, xem --diff từng file và merge mà không mất phần đã tùy biến.

· · · 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/shadcn

⚠ Đâ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 toàn bộ thư mục skill (gồm cả rules/, cli.md): cp -r /tmp/moi/.agents/skills/shadcn ~/.claude/skills/shadcn
  5. Kiểm tra đã có ~/.claude/skills/shadcn/SKILL.md và thư mục rules/.
  6. Đảm bảo máy có Node.js kèm npm/pnpm/bun, và dự án của bạn có file components.json.
  7. Khởi động lại Claude Code, sau đó yêu cầu liên quan tới shadcn (ví dụ "tạo form đăng nhập bằng shadcn") sẽ tự kích hoạt skill này.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION