Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Artifacts Builder (Trình dựng Artifact)

Bộ công cụ dựng ứng dụng React + Tailwind + shadcn/ui rồi đóng gói thành một tệp HTML artifact duy nhất.

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

Kỹ năng này làm gì

Dùng cho các artifact claude.ai phức tạp cần quản lý trạng thái, routing hoặc component shadcn/ui — không dành cho artifact HTML/JSX một tệp đơn giản.

  • init-artifact.sh tạo sẵn dự án React 18 + TypeScript + Vite + Tailwind CSS 3.4 + hơn 40 component shadcn/ui
  • Tự cấu hình alias @/, các phụ thuộc Radix UI và Parcel (.parcelrc)
  • bundle-artifact.sh nhúng toàn bộ JS/CSS/asset vào bundle.html để chia sẻ trực tiếp trong hội thoại
  • Có hướng dẫn tránh phong cách "AI slop": lạm dụng canh giữa, gradient tím, bo góc đều, font Inter
  • Tùy chọn kiểm thử sau bằng Playwright/Puppeteer

Phù hợp với ai

  • Người muốn tạo dashboard, form nhiều bước, prototype SaaS mini bằng Claude
  • Lập trình viên frontend muốn giữ chuẩn shadcn/ui nhưng xuất ra một tệp duy nhất
  • Ai muốn bỏ qua công đoạn thiết lập Tailwind/bundler lặp lại

Ví dụ sử dụng

  1. "Tạo dashboard doanh thu có tab, biểu đồ và chế độ tối" → khởi tạo dự án, dùng Tabs/Card của shadcn, xuất bundle.html
  2. "Làm wizard khảo sát 3 bước có lưu trạng thái" → React state + đóng gói một tệp HTML
  3. "Chụp ảnh kiểm tra artifact có hiển thị đúng không" → bundle rồi kiểm thử bằng Playwright

· · · Hướng dẫn cài đặt · · ·

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 artifacts-builder/skills/artifacts-builder từ repo GitHub composio-community/awesome-claude-plugins vào ~/.claude/skills/artifacts-builder/ 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/composio-community/awesome-claude-plugins.git /tmp/acp && mkdir -p ~/.claude/skills && cp -r /tmp/acp/artifacts-builder/skills/artifacts-builder ~/.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 và kiểm tra Node.js phiên bản 18 trở lên: node -v
  2. Clone repo: git clone https://github.com/composio-community/awesome-claude-plugins.git
  3. Sao chép skill vào thư mục skill của Claude: mkdir -p ~/.claude/skills && cp -r awesome-claude-plugins/artifacts-builder/skills/artifacts-builder ~/.claude/skills/
  4. Kiểm tra thư mục scripts/ có init-artifact.sh và bundle-artifact.sh, rồi cấp quyền chạy: chmod +x ~/.claude/skills/artifacts-builder/scripts/*.sh
  5. Khởi động lại Claude Code và yêu cầu ví dụ: "tạo artifact React phức tạp có shadcn/ui"
  6. Lần chạy đầu có thể mất vài phút để cài npm, hãy kiên nhẫn chờ.
Xem mã nguồn trên GitHub ↗