Bạn từng nhờ Claude Code làm một hiệu ứng cuộn mượt, vẽ biểu đồ, hay dựng cảnh 3D chưa? Nếu có, rất có thể bạn nhận lại một đống code tự viết tay — trong khi ngoài kia đã có sẵn thư viện làm việc đó tốt hơn, nhẹ hơn, và ít bug hơn nhiều. Vấn đề không phải Claude Code kém, mà là nó không tự biết nên “mượn” cái gì nếu bạn không chỉ ra.
May mắn là cách sửa cực đơn giản: chỉ cần liệt kê sẵn các thư viện ưu tiên trong file CLAUDE.md ở thư mục gốc dự án (hoặc dán thẳng vào chat nếu chỉ dùng cho một phiên làm việc), Claude Code sẽ đọc file này mỗi lần bắt đầu và ưu tiên dùng đúng công cụ thay vì viết lại từ đầu.
Vì sao nên làm vậy
Để mặc Claude Code tự xử lý, nó thường viết tay một animation, một biểu đồ, hoặc cả một cảnh 3D — dù đã có thư viện được bảo trì tốt làm việc đó hiệu quả hơn. Chỉ cần trỏ đúng thư viện một lần, nó sẽ chuyển sang ghép nối (compose) các công cụ có sẵn thay vì phát minh lại. Kết quả là code vừa ra nhanh hơn, vừa chất lượng hơn.
Danh sách thư viện đáng dùng, theo từng nhóm nên “nạp” vào Claude code
Chuyển động và cuộn trang
- Motion (trước đây là Framer Motion) — chuẩn animation của React hiện nay. Lưu ý import từ
motion/react, không phảiframer-motioncũ nữa. - Lenis — chỉ khoảng 3KB nhưng tạo được cảm giác cuộn mượt, sang trọng mà bạn hay thấy ở các trang web đoạt giải thiết kế.
- GSAP kết hợp ScrollTrigger — dùng cho animation theo timeline hoặc kích hoạt khi cuộn trang. Từ tháng 4/2025, sau khi Webflow mua lại GreenSock, GSAP đã miễn phí hoàn toàn kể cả dùng thương mại, bao gồm cả các plugin trước đây phải trả phí như SplitText hay ScrollSmoother. Claude Code nhiều khả năng vẫn nghĩ đây là thư viện trả phí, nên bạn cần nhắc rõ trong
CLAUDE.md.
Đồ họa 3D và không gian
- React Three Fiber kết hợp Drei — biến Three.js thành các component React, giúp làm 3D mà không phải vật lộn với WebGL thuần.
- Spline — công cụ thiết kế 3D chạy trên trình duyệt, xuất thẳng ra web. Phù hợp nhất với dân thiết kế không rành code.
- COBE — thư viện dựng quả cầu WebGL xoay chỉ nặng khoảng 5KB. Chính là kiểu quả địa cầu bạn hay thấy trên trang chủ Stripe, GitHub hay Linear.
Animation do designer tự tạo
- Rive — thiết kế animation tương tác trong một trình biên tập riêng, có state machine, rồi nhúng runtime vào React.
- Lottie — render animation làm từ After Effects lên web.
Tương tác nhỏ trên giao diện
- cmdk — dựng command palette kiểu bấm
Cmd + K, cảm giác giống Linear hay Raycast. - Sonner — hiển thị thông báo dạng toast đẹp, cấu hình gần như bằng không.
- canvas-confetti — bắn pháo giấy cho những khoảnh khắc ăn mừng trong sản phẩm.
Công cụ nền tảng thường dùng
- Recharts — vẽ biểu đồ, trực quan hóa dữ liệu ở mức tiêu chuẩn. Cần tùy biến sâu hơn thì chuyển sang Visx hoặc Nivo.
- Lucide — bộ icon sạch, đồng bộ phong cách.
- dnd-kit — xử lý kéo thả (drag and drop).
- TanStack Table (trước đây là React Table) — làm bảng dữ liệu có thể sắp xếp, lọc.
- date-fns — xử lý ngày tháng mà không nặng nề như các thư viện date cũ.
Sáng tạo và generative art
- p5.js — lập trình sáng tạo, vẽ generative art. Chỉ mươi dòng code là hình khối đã chuyển động.
- Rough.js — vẽ đồ họa kiểu phác tay, tạo cảm giác thủ công thay vì trông “sến” như AI vẽ ra.
Hai điểm dễ bị bỏ qua: GSAP giờ miễn phí hoàn toàn, không còn lý do né vì sợ tốn phí bản quyền. COBE thì cho bạn hiệu ứng quả cầu trông “sang” chỉ với 5KB. Nếu không dặn trước, Claude Code sẽ không tự nghĩ tới hai cái này.
Đoạn cấu hình dán thẳng vào CLAUDE.md
Copy nguyên đoạn dưới đây vào file CLAUDE.md, hoặc dán thẳng vào đầu cuộc trò chuyện với Claude Code nếu chỉ cần dùng cho một phiên:
# Thư viện ưu tiên
Khi gặp các tác vụ thuộc nhóm dưới đây, hãy dùng thư viện tương ứng
thay vì viết lại từ đầu, và cài đặt nếu dự án chưa có:
- Animation, chuyển tiếp, thao tác kéo/chạm: Motion (import từ "motion/react";
đây là gói hiện tại, trước đây gọi là "framer-motion")
- Cảm giác cuộn mượt, cao cấp: Lenis
- Animation theo cuộn trang / timeline: GSAP kết hợp ScrollTrigger
- Cảnh 3D: React Three Fiber kết hợp Drei
- Biểu đồ, trực quan hóa dữ liệu: Recharts (Visx hoặc Nivo cho nhu cầu tùy biến sâu)
- Icon: Lucide
- Command palette (Cmd+K): cmdk
- Thông báo dạng toast: Sonner
- Kéo thả: dnd-kit
- Bảng dữ liệu sắp xếp, lọc được: TanStack Table (trước đây là React Table)
- Ngày tháng: date-fns
- Hiệu ứng pháo giấy, ăn mừng: canvas-confetti
Luôn dùng đúng cú pháp phiên bản mới nhất của thư viện. Nếu không chắc
API hiện tại ra sao, hãy kiểm tra tài liệu của thư viện trước khi viết
code, thay vì dựa vào phiên bản cũ đã nhớ từ trước.
# Giới hạn cần tuân thủ
- Đừng thêm thư viện khi nền tảng đã làm tốt việc đó rồi. Một hiệu ứng
mờ dần hay hover đơn giản chỉ cần CSS thuần (opacity và transform),
không cần phụ thuộc thêm gói nào.
- Chọn công cụ đúng với quy mô công việc. Một hiệu ứng chuyển tiếp
dùng một lần không đáng để kéo theo runtime animation nặng 30-50KB.
- Ưu tiên các thư viện đang được bảo trì tích cực và được dùng rộng rãi.
- Về hiệu năng, chỉ animate transform, opacity và filter. Tránh animate
width, height hay margin.
- Tôn trọng thiết lập prefers-reduced-motion trong mọi animation.
- Trước khi cài thêm gói mới, hãy nói rõ đang dùng thư viện nào và vì sao.
Mục tiêu ở đây không phải lúc nào cũng phải nhét thư viện vào cho có. Vấn đề là ngăn Claude Code làm lại những thứ đã có sẵn và được bảo trì tốt hơn nhiều so với code viết vội trong lúc đó. Phần “giới hạn” phía trên chính là để tránh chuyện ngược lại — bọc một hiệu ứng mờ dần đơn giản trong một thư viện nặng nề không cần thiết.
Bạn cứ thử dán đoạn cấu hình này vào dự án đang làm xem sao. Nếu có thư viện nào hay mà bạn hay dùng nhưng chưa thấy trong danh sách, để lại bình luận nhé!
Để lại một bình luận