​
Cài đặt kỹ năng chuyên biệt dành cho dự án của bạn

1

Cài đặt kỹ năng chuyên biệt (Giai đoạn đầu chưa cần cài)

Tìm và cài đặt các kỹ năng cho dự án của bạn bằng Skills CLI.Khám phá các kỹ năng có sẵn:
npx skills find react
npx skills find nextjs
npx skills find typescript
npx skills find design
npx skills find testing
Cài đặt một kỹ năng:
npx skills add <owner/repo@skill-name>
Một số kỹ năng phổ biến từ các nguồn uy tín:
  • Tìm kiếm trên skills.sh để xem danh sách đầy đủ
  • Nguồn uy tín: vercel-labs/agent-skills, anthropics/skills
  • Chọn các kỹ năng có 1K+ lần cài đặt để đảm bảo chất lượng

​
Danh sách các kỹ năng phổ biến

​
Vercel Skills

https://github.com/vercel-labs/agent-skills
1. Vercel: Review UI code for Web Interface Guidelines compliance with 100+ rules covering accessibility, performance, and UX
Đánh giá mã nguồn tạo giao diện người dùng (UI) để đảm bảo tuân thủ các hướng dẫn thiết kế giao diện web với hơn 100 quy tắc bao gồm khả năng truy cập, hiệu suất và trải nghiệm người dùng (UX).
Cài đặt kỹ năng này bằng cách chạy lệnh sau ở terminal / command prompt của bạn:
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
2. Vercel: React and Next.js performance optimization guidelines with 40+ rules across 8 categories
Tạo ra các hướng dẫn tối ưu hóa hiệu suất cho React và Next.js với hơn 40 quy tắc trải dài trên 8 danh mục.
Cài đặt kỹ năng này bằng cách chạy lệnh sau ở terminal / command prompt của bạn:
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

​
Anthropic Skills

https://github.com/anthropics/skills/tree/main/skills
1. Anthropic: Frontend Design and UI Creation Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Tạo ra các giao diện frontend đặc trưng, đạt tiêu chuẩn sản phẩm (production-grade) với chất lượng thiết kế cao. Sử dụng kỹ năng này khi người dùng yêu cầu xây dựng các thành phần web, trang web, tạo tác (artifacts), áp phích hoặc ứng dụng (ví dụ: website, trang đích, bảng điều khiển, các thành phần React, bố cục HTML/CSS, hoặc khi cần tạo kiểu/làm đẹp bất kỳ giao diện người dùng web nào). Tạo ra mã nguồn và thiết kế giao diện sáng tạo, trau chuốt, tránh tính thẩm mỹ rập khuôn của AI.
Cài đặt kỹ năng này bằng cách chạy lệnh sau ở terminal / command prompt của bạn:
npx skills add anthropics/skills@frontend-design
2. Anthropic: Create beautiful visual art in .png and .pdf documents using design philosophy Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists’ work to avoid copyright violations.
Tạo ra các sản phẩm nghệ thuật trực quan đẹp mắt trong các tài liệu .png và .pdf sử dụng triết lý thiết kế. Bạn nên sử dụng kỹ năng này khi người dùng yêu cầu tạo một áp phích, sản phẩm nghệ thuật, thiết kế hoặc bất kỳ sản phẩm tĩnh nào khác. Tạo ra các thiết kế trực quan độc đáo, không bao giờ sao chép công việc của các nghệ sĩ hiện có để tránh vi phạm bản quyền.
Cài đặt kỹ năng này bằng cách chạy lệnh sau ở terminal / command prompt của bạn:
npx skills add anthropics/skills@canvas-design
3. Anthropic: web-artifacts-builders Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Bộ công cụ để tạo ra các sản phẩm HTML phức tạp, đa thành phần cho claude.ai sử dụng các công nghệ web frontend hiện đại (React, Tailwind CSS, shadcn/ui). Sử dụng cho các sản phẩm phức tạp yêu cầu quản lý trạng thái, định tuyến hoặc các thành phần shadcn/ui - không dành cho các sản phẩm HTML/JSX đơn giản chỉ có một tệp.
Cài đặt kỹ năng này bằng cách chạy lệnh sau ở terminal / command prompt của bạn:
npx skills add anthropics/skills@web-artifacts-builder
Dùng khi nào?
  • Khi bạn cần tạo ra các mã nguồn HTML phức tạp, đa thành phần cho claude.ai sử dụng các công nghệ web frontend hiện đại như React, Tailwind CSS, shadcn/ui.
  • Khi bạn đang xây dựng các sản phẩm phức tạp yêu cầu quản lý trạng thái, định tuyến hoặc các thành phần shadcn/ui.
  • Không nên sử dụng kỹ năng này cho các sản phẩm HTML/JSX đơn giản chỉ có một tệp, vì nó được thiết kế cho các sản phẩm phức tạp hơn.