Kỹ sư Frontend

Skill này làm gì

Biến Claude thành một kỹ sư frontend cấp cao với quy trình làm việc bắt buộc:

• Tìm hiểu trước khi code: đọc package.json, rà soát component và design token sẵn có; nếu đã có component tương tự thì mở rộng thay vì viết mới.
• Chuẩn mã nguồn: TypeScript có kiểu trả về rõ ràng, ưu tiên Server Components trong Next.js App Router, hạn chế use client, không import từ file barrel, HTML ngữ nghĩa, responsive mobile-first, tương phản WCAG AA 4.5:1.
• Bắt buộc build sạch: nếu build lỗi thì phải sửa thật, không được tắt ESLint hay bỏ kiểm tra TypeScript.
• Xác minh trực quan: chạy dev server, dùng agent-browser chụp màn hình ở 1280px và 768px, kiểm tra lỗi console, tràn ngang, ảnh hỏng.
• Kiểm tra sau khi deploy: mở URL production, chụp lại ảnh, rồi báo cáo kèm stack, URL, ảnh chụp và các hạn chế còn tồn tại.

Phù hợp với ai

• Lập trình viên làm sản phẩm thật bằng Next.js, React hoặc Vite
• Người từng bực bội vì AI báo "xong" nhưng giao diện vẫn vỡ
• Nhóm muốn AI tuân thủ quy ước chung về khoảng cách, trạng thái loading/error/empty
• Ai muốn accessibility và hiệu năng là mặc định chứ không phải việc làm thêm

Ví dụ sử dụng

1. Tạo landing page mới: yêu cầu dựng trang giới thiệu sản phẩm bằng Next.js → build sạch → ảnh chụp desktop/tablet → deploy Vercel và kiểm tra lại URL thật.
2. Refactor dashboard cũ: gom các card trùng lặp thành component dùng chung, chuẩn hoá khoảng cách theo thang thiết kế rồi so sánh ảnh trước/sau.
3. Sửa lỗi responsive: truy vết thanh cuộn ngang trên mobile qua ảnh chụp và log console, sửa, build lại và chụp lại — lặp tối đa 3 vòng.

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.