Hướng dẫn tích hợp Windsurf

Tích hợp Windsurf AI

Windsurf của Codeium là một IDE AI-native mạnh mẽ hỗ trợ tiêu chuẩn Agent Skills. Hướng dẫn này sẽ giúp bạn thiết lập và sử dụng skills trong Windsurf.

Yêu cầu

Windsurf IDE đã được cài đặt
Node.js 18+ với npm/pnpm

Phương pháp cài đặt

Phương pháp 1: Cài đặt CLI

Sử dụng CLI toàn cục để cài đặt skills:

npx agent-skills install expo/skills/building-native-ui

Skill sẽ tự động khả dụng trong workspace Windsurf của bạn.

Phương pháp 2: Cascade (Chế độ Agent)

Tính năng Cascade của Windsurf có thể sử dụng trực tiếp skill manifests. Trong chat Cascade:

Nhập yêu cầu của bạn và đề cập skill:

Sử dụng skill expo-native-ui, giúp tôi xây dựng tab navigation

Cascade sẽ tự động fetch và áp dụng context của skill.

Phương pháp 3: Cấu hình cấp Project

Thêm skills vào .windsurf/skills.json của project:

{
  "skills": [
    "vercel-labs/agent-skills/vercel-react-best-practices",
    "expo/skills/building-native-ui"
  ]
}

Windsurf sẽ tải các skills này khi bạn mở project.

Sử dụng Skills với Cascade

Chế độ Cascade (AI Agent) của Windsurf hoàn hảo cho các tác vụ phức tạp:

@cascade Sử dụng skill react-best-practices, refactor component của tôi theo quy ước Vercel

Cascade sẽ:

Tải knowledge base của skill
Phân tích code của bạn
Áp dụng các pattern và đề xuất của skill

Skills phổ biến cho Windsurf

Skill	Use Case	Cài đặt
Building Native UI	Phát triển React Native / Expo	`expo/skills/building-native-ui`
Expo Deployment	Deploy lên app store	`expo/skills/expo-deployment`
Monorepo Best Practices	Quản lý codebase lớn	`jaredpalmer/skills/monorepo-best-practices`
Better Auth	Triển khai authentication	`better-auth/skills/better-auth-best-practices`

Windsurf vs Cursor: Khác biệt chính

Tính năng	Windsurf	Cursor
Chế độ Agent	Cascade (Flow-based)	Composer
Tải Skill	Tự động trong Cascade	Thủ công qua settings
Chỉnh sửa Multi-file	Hỗ trợ native	Qua Composer
Context Window	Mở rộng (100K+)	Tiêu chuẩn

Xử lý sự cố

Skills không tải trong Cascade?

Bật Flow Mode: Đảm bảo bạn đang sử dụng Cascade ở chế độ "Flow" hoặc "Agent".
Kiểm tra mạng: Skills được fetch từ GitHub; đảm bảo truy cập mạng.
Khởi động lại Windsurf: Đôi khi khởi động lại giúp giải quyết vấn đề.

Vấn đề hiệu suất

Nếu skills làm chậm workflow của bạn:

# Xóa cache skills
npx agent-skills clear-cache

# Liệt kê skills đã cài đặt
npx agent-skills list

# Gỡ skills không sử dụng
npx agent-skills remove <skill-name>