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

replica-build (Dựng lại ứng dụng theo từng màn hình)

Skill dựng lại ứng dụng clone theo thứ tự app shell → luồng cốt lõi → từng màn hình với đủ mọi trạng thái, tự viết 100% code mới thay vì copy từ bản gốc.

Lập trìnhTrung cấp★ 1,368⑂ 175Điểm AI 9/10Cập nhật lần cuối: 3 thg 10, 2026

Làm được gì

  • Đọc replica/recon.md, replica/architecture.md, replica/design/ rồi lập trình theo 4 bước: app shell (routing, layout, tokens, seed data) → vertical slice luồng chính → từng màn hình → ghi build log.
  • Mỗi màn hình phải có đủ trạng thái: empty, loading, filled, error, không có quyền, nội dung dài, chiều rộng mobile.
  • Bắt buộc các điểm cơ bản: HTML semantic, label cho input, dùng được bằng bàn phím, focus rõ ràng, alt text cho ảnh.
  • Cập nhật cột clone trong features.csv, lưu screenshot vào replica/clone-screens/S07.png để so sánh, commit riêng từng màn hình.
  • Nguyên tắc clean room: không dán HTML/CSS/JS/ảnh/câu chữ của bản gốc, không tải tài nguyên từ domain hay CDN của họ.

Dành cho ai

  • Lập trình viên frontend/fullstack cần dựng lại UX tham khảo thành sản phẩm riêng.
  • Dev solo hoặc agency chỉ có tài liệu và ảnh chụp màn hình nhưng phải triển khai đầy đủ.
  • Nhóm muốn hoàn thiện UI theo checklist, không bỏ sót trạng thái hay accessibility.

Ví dụ sử dụng

  1. Nói "build the clone": skill tạo app shell với routing cho mọi màn hình, layout, tokens và seed data rồi commit.
  2. Với app đặt lịch: hoàn thành luồng "tạo loại sự kiện → mở trang công khai → đặt một slot → thấy trên dashboard" trước khi làm đẹp.
  3. Nói "build screen S07": dựng đủ trạng thái, kiểm tra ở 390px và 1440px, cập nhật features.csv, lưu ảnh, commit build: S07 booking page.

· · · 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/Jakeschincariol/replica-skill/HEAD/replica-build/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 replica-build từ repo GitHub Jakeschincariol/replica-skill vào ~/.claude/skills/replica-build/ 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/Jakeschincariol/replica-skill.git /tmp/replica-skill && mkdir -p ~/.claude/skills && cp -r /tmp/replica-skill/replica-build ~/.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. Tải repo: git clone https://github.com/Jakeschincariol/replica-skill.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r replica-skill/replica-build ~/.claude/skills/ (nên copy thêm replica-recon, replica-design, replica-backend, replica-diff trong cùng bộ).
  5. Vào thư mục dự án và chạy claude.
  6. Đảm bảo đã có replica/recon.md, replica/architecture.md, replica/design/ từ các bước trước.
  7. Gõ yêu cầu như "start building" hoặc "build screen S07" để kích hoạt skill.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT