Agent Skills
AI Agent에서 Vapor UI 스킬을 설치하고 사용하는 방법이 문서에서는 AI Agent에서 Vapor UI 스킬을 설치하고 활용하는 방법을 설명합니다.
개요
Vapor UI 스킬은 AI Agent가 Vapor UI 컴포넌트를 이해하고 코드를 생성할 수 있도록 돕는 Agent Skill입니다. 컴포넌트 조회, 예제 코드 생성, Figma 디자인 변환 등의 기능을 제공합니다.
설치
npx skills add goorm-dev/vapor-ui설치가 완료되면 AI Agent가 자동으로 스킬을 인식합니다.
사용 방법
자동 트리거
다음과 같은 요청 시 스킬이 자동으로 활성화됩니다:
- "vapor-ui 컴포넌트 목록 보여줘"
- "Button 컴포넌트 사용법 알려줘"
- "vapor-ui로 로그인 페이지 만들어줘"
- "이 Figma 디자인을 코드로 변환해줘"
- "아이콘 찾아줘"
명시적 호출
/vapor-ui Button 사용법 알려줘주요 기능
컴포넌트 조회
사용 가능한 컴포넌트 목록과 상세 정보(props, variants)를 조회합니다.
예시 요청:
- "어떤 컴포넌트가 있어?"
- "Avatar 컴포넌트 props 알려줘"
- "폼 관련 컴포넌트 뭐 있어?"
예제 코드 생성
컴포넌트별 예제 코드를 조회하고, 요청에 맞는 UI 코드를 생성합니다.
예시 요청:
- "Button 예제 코드 보여줘"
- "navbar block1 코드 참고해서 만들어줘"
- "로그인 폼 만들어줘"
아이콘 검색
@vapor-ui/icons 패키지의 아이콘을 검색합니다.
예시 요청:
- "arrow 아이콘 찾아줘"
- "outline 스타일 아이콘 목록"
- "검색 아이콘 이름이 뭐야?"
Figma 디자인 변환
Figma URL을 제공하면 디자인을 분석하여 Vapor UI 코드로 변환합니다.
예시 요청:
- "이 Figma 디자인 코드로 만들어줘: https://figma.com/design/..."
- "시안 구현해줘"
버전 지정
프로젝트의 Vapor UI 버전을 자동으로 감지합니다. 특정 버전을 사용하려면 직접 지정할 수 있습니다.
자동 감지:
스킬이 프로젝트의 package.json 또는 lock 파일을 분석하여 설치된 버전을 확인합니다.
직접 지정:
1.0.0-beta.12 버전 기준으로 Button 사용법 알려줘참고 자료
- LLMs.txt: Cursor 등 AI 도구에서 문서 활용
- Agent Skills 문서: 스킬 설치 및 관리