explanatory-animations-skill은(는) 무엇을 하나요?
Claude 스킬: 정교한 대화형 애니메이션 설명 제작 (16가지 패턴, Anime.js v4, 3가지 내보내기 파이프라인)
개요
이 스킬은 Claude 및 기타 AI 에이전트가 Anime.js v4를 기반으로 한 16가지 애니메이션 패턴을 사용하여 시각적으로 풍부한 대화형 설명을 만들 수 있도록 설계되었습니다.
주요 특징
- 16가지 애니메이션 패턴: 페이드인, 슬라이드, 확대/축소, 경로 따라가기, 모핑 등 다양한 효과 지원
- Anime.js v4: 최신 버전의 강력한 애니메이션 라이브러리 활용
- 3가지 내보내기 파이프라인:
- 정적 GIF: 간단한 프레젠테이션 또는 문서에 적합
- 대화형 HTML: 사용자와 상호작용 가능한 웹 페이지 형태
- 내장형 SVG: 벡터 그래픽으로 확장성과 선명도 보장
지원 플랫폼
이 스킬은 다음 AI 코딩 도구와 호환됩니다:
- Claude Code
- Cursor
- Codex
- 기타 AI 에이전트 플랫폼
사용법
- 애니메이션하고자 하는 개념 또는 설명을 제공합니다.
- 스킬이 적절한 패턴을 선택하고 Anime.js v4 코드를 생성합니다.
- 원하는 내보내기 형식을 선택하여 결과물을 다운로드합니다.
예제
// Anime.js v4를 사용한 간단한 페이드인 예제
import anime from 'animejs/lib/anime.es.js';
anime({
targets: '.element',
opacity: [0, 1],
duration: 1000,
easing: 'easeOutCubic'
});
라이선스
이 스킬은 MIT 라이선스 하에 배포됩니다.