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

Trình dựng Web Artifact

Chính thức

Skill chính thức tạo ứng dụng React + Tailwind + shadcn/ui phức tạp rồi gói gọn thành một file HTML artifact duy nhất.

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

Skill này làm gì

Giúp Claude xây dựng ứng dụng frontend đầy đủ để hiển thị dưới dạng artifact trên claude.ai.

  • scripts/init-artifact.sh khởi tạo dự án React 18 + TypeScript + Vite với Tailwind 3.4.1, hơn 40 component shadcn/ui, Radix UI và alias @/ đã cấu hình sẵn
  • Sau khi viết code, chạy scripts/bundle-artifact.sh → Parcel + html-inline nhúng toàn bộ JS, CSS, asset vào một file bundle.html
  • Chia sẻ file đó trực tiếp trong hội thoại như một artifact
  • Tùy chọn: kiểm thử bằng Playwright/Puppeteer sau khi trình bày

Skill còn kèm hướng dẫn thiết kế để tránh phong cách "AI slop": hạn chế canh giữa quá nhiều, gradient tím, bo góc đồng loạt và font Inter.

Phù hợp với ai

  • Người cần artifact phức tạp: quản lý state, routing, nhiều màn hình
  • Lập trình viên/designer muốn dựng nhanh UI demo chuẩn shadcn/ui
  • Ai cần giao sản phẩm dưới dạng một file HTML tự chứa (demo nội bộ, gửi khách hàng)
  • Không phù hợp nếu bạn chỉ cần một artifact HTML/JSX đơn giản một file.

Ví dụ sử dụng

  1. Dashboard quản trị: "Tạo dashboard doanh thu có thẻ chỉ số, biểu đồ và sidebar" → sinh app React nhiều component và xuất ra bundle.html.
  2. Công cụ học tập tương tác: App trắc nghiệm có tab, modal, kiểm tra form dựng bằng shadcn/ui, gói thành một HTML để gửi học viên.
  3. Landing page đề xuất khách hàng: Microsite có routing và chế độ tối, cuối cùng chỉ gửi đúng một file đính kèm qua email.

· · · 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 skills/web-artifacts-builder từ repo GitHub anthropics/skills vào ~/.claude/skills/web-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/anthropics/skills.git /tmp/anthropic-skills && mkdir -p ~/.claude/skills && cp -r /tmp/anthropic-skills/skills/web-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. Tải kho skill chính thức: git clone https://github.com/anthropics/skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép riêng skill này: cp -r skills/skills/web-artifacts-builder ~/.claude/skills/
  5. Cấp quyền chạy cho script: chmod +x ~/.claude/skills/web-artifacts-builder/scripts/*.sh
  6. Khởi động lại Claude Code và yêu cầu: "Dùng skill web-artifacts-builder tạo cho tôi một dashboard".
  7. Lần chạy đầu sẽ cài nhiều gói npm nên có thể mất vài phút, hãy giữ kết nối mạng ổn định.
Xem mã nguồn trên GitHub ↗