Windsurf 통합 가이드
Windsurf AI에서 Agent Skills를 사용하기 위한 단계별 가이드.
Windsurf AI 통합
Codeium의 Windsurf는 Agent Skills 표준을 지원하는 강력한 AI 네이티브 IDE입니다. 이 가이드에서는 Windsurf에서 스킬을 설정하고 사용하는 방법을 설명합니다.
요구사항
- Windsurf IDE가 설치되어 있어야 함
- Node.js 18+와 npm/pnpm
설치 방법
방법 1: CLI 설치
글로벌 CLI를 사용하여 스킬 설치:
npx agent-skills install expo/skills/building-native-ui스킬이 Windsurf 워크스페이스에서 자동으로 사용 가능해집니다.
방법 2: Cascade (에이전트 모드)
Windsurf의 Cascade 기능은 스킬 매니페스트를 직접 사용할 수 있습니다. Cascade 채팅에서:
-
요청을 입력하고 스킬을 언급:
expo-native-ui 스킬을 사용하여 탭 네비게이션 구축을 도와주세요 -
Cascade가 자동으로 스킬 컨텍스트를 가져와 적용합니다.
방법 3: 프로젝트 레벨 설정
프로젝트의 .windsurf/skills.json에 스킬 추가:
{
"skills": [
"vercel-labs/agent-skills/vercel-react-best-practices",
"expo/skills/building-native-ui"
]
}Windsurf는 프로젝트를 열 때 이러한 스킬을 로드합니다.
Cascade로 스킬 사용하기
Windsurf의 Cascade (AI 에이전트) 모드는 복잡한 작업에 완벽합니다:
@cascade react-best-practices 스킬을 사용하여, 컴포넌트를 Vercel 규칙에 따라 리팩터링Cascade는:
- 스킬의 지식 베이스 로드
- 코드 분석
- 스킬의 패턴과 제안 적용
Windsurf에서 인기 있는 스킬
| 스킬 | 사용 사례 | 설치 |
|---|---|---|
| Building Native UI | React Native / Expo 개발 | expo/skills/building-native-ui |
| Expo Deployment | 앱 스토어 배포 | expo/skills/expo-deployment |
| Monorepo Best Practices | 대규모 코드베이스 관리 | jaredpalmer/skills/monorepo-best-practices |
| Better Auth | 인증 구현 | better-auth/skills/better-auth-best-practices |
Windsurf vs Cursor: 주요 차이점
| 기능 | Windsurf | Cursor |
|---|---|---|
| 에이전트 모드 | Cascade (플로우 기반) | Composer |
| 스킬 로딩 | Cascade에서 자동 | 설정에서 수동 |
| 멀티 파일 편집 | 네이티브 지원 | Composer를 통해 |
| 컨텍스트 윈도우 | 확장 (100K+) | 표준 |
문제 해결
Cascade에서 스킬이 로드되지 않나요?
- Flow 모드 활성화: Cascade를 "Flow" 또는 "Agent" 모드로 사용 중인지 확인.
- 네트워크 확인: 스킬은 GitHub에서 가져옵니다. 네트워크 접근을 확인.
- Windsurf 재시작: 재시작으로 문제가 해결될 수 있습니다.
성능 문제
스킬이 워크플로우를 느리게 한다면:
# 스킬 캐시 지우기
npx agent-skills clear-cache
# 설치된 스킬 목록
npx agent-skills list
# 사용하지 않는 스킬 제거
npx agent-skills remove <skill-name>