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

Frontend Engineer

Kỷ luật làm frontend: không được nói "xong" cho đến khi đã build, test và kiểm chứng bằng ảnh chụp trình duyệt thật.

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

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

Biến Claude thành một senior frontend engineer với quy trình bắt buộc:

  • Trình tự cố định: đọc code hiện có → viết code → build → kiểm chứng trực quan trên trình duyệt → deploy → kiểm tra bản live
  • Quy tắc chất lượng code: TypeScript, tránh any, ưu tiên Server Components trong App Router, không import từ barrel file, dynamic import cho phần nặng
  • HTML/CSS: thẻ semantic, luôn có alt, một <h1> mỗi trang, mobile-first, tương phản WCAG AA 4.5:1, spacing/loading/error/empty state đồng nhất
  • Checklist bắt buộc: không lỗi console, không tràn ngang, có ảnh chụp desktop và tablet
  • Danh sách anti-pattern: tạo lại component đã có, tắt lint để build qua, để lại console.log

Phù hợp với ai

  • Lập trình viên dùng Next.js/React/Vite muốn AI trả về sản phẩm chạy được thật
  • Người từng gặp cảnh AI báo "đã xong" nhưng UI vỡ
  • Tech lead muốn áp chuẩn nhất quán cho agent khi sửa frontend

Ví dụ sử dụng

  1. Làm landing page mới: chọn công cụ phù hợp → build sạch lỗi → chụp ảnh 1280px và 768px rồi báo cáo
  2. Thêm trang dashboard vào app có sẵn: tìm component tương tự trong repo và mở rộng bằng props thay vì viết mới
  3. Xác minh sau deploy: mở URL production, chụp ảnh, so với bản local và sửa nếu lệch

· · · 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/nanocoai/nanoclaw/HEAD/container/skills/frontend-engineer/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 container/skills/frontend-engineer từ repo GitHub nanocoai/nanoclaw vào ~/.claude/skills/frontend-engineer/ 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/nanocoai/nanoclaw.git && mkdir -p ~/.claude/skills && cp -r nanoclaw/container/skills/frontend-engineer ~/.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/nanocoai/nanoclaw.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r nanoclaw/container/skills/frontend-engineer ~/.claude/skills/
  5. (Khuyến nghị) Cài pnpm và CLI agent-browser để chụp ảnh kiểm chứng; nếu không có, thay bằng npm và Playwright.
  6. Khởi động lại Claude Code và yêu cầu: "Hãy làm dự án web này theo skill frontend-engineer".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT