motion-dev-animations-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

motion-dev-animations-skill은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

motion-dev-animations-skill은(는) 아직 유지보수되고 있나요?

6개월 이상 커밋 없음. motion-dev-animations-skill의 마지막 커밋은 2026년 3월 30일입니다.

motion-dev-animations-skill은(는) 어디에 사용할 수 있나요?

Next.js 랜딩 페이지의 히어로 섹션에 진입 애니메이션 추가 마케팅 사이트에 스크롤 연동 패럴랙스 또는 진행률 효과 구현 드래그로 순서를 바꾸는 목록이나 호버 및 마그네틱 버튼 상호작용 구현 전체 API를 읽지 않고도 Svelte 또는 Astro 프로젝트에 일관되고 접근성 높은 모션 적용

motion-dev-animations-skill는 어떻게 설치하나요?

Claude Code의 skills 폴더에 스킬을 클론합니다: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations 자연어로 Claude Code에 애니메이션을 요청합니다

motion-dev-animations-skill은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/199-biotechnologies/motion-dev-animations-skill

199-biotechnologies/motion-dev-animations-skill

접근성과 성능 지침이 내장된 React, Next.js, Svelte, Astro용 Motion.dev 애니메이션을 생성하는 Claude Code 스킬

GitHub에서 보기

스타: 194
포크: 34
열린 이슈: 0
마지막 커밋: 7개월 전

어떤 프로젝트인가요?

이 프로젝트는 어시스턴트에게 Motion.dev 애니메이션 패턴을 익혀 자연어 요청에 따라 TypeScript 애니메이션 코드를 생성하는 Claude Code 스킬입니다. 예를 들어 히어로 섹션 진입 애니메이션, 패럴랙스 스크롤, 드래그 가능한 목록을 추가해 달라는 요청을 처리할 수 있습니다. React 19+, Next.js 15+, Svelte 5+, Astro 4+를 대상으로 하며, motion-v 패키지를 통해 Vue도 지원합니다.

생성되는 코드는 GPU 가속에 유리한 속성(transform, opacity, filter)을 우선 사용하고, prefers-reduced-motion 설정을 따르며 키보드 포커스 처리도 포함합니다. 이 스킬은 진입 애니메이션, 스크롤 효과, 제스처 상호작용, 마이크로 인터랙션과 FLIP 재정렬, AnimatePresence 아코디언, layoutId 탭 전환 같은 레이아웃 애니메이션을 다룹니다.

저장소는 점진적 로딩 방식으로 구성되어 있습니다. 먼저 핵심 지침 파일을 불러오고, 예제와 API 레퍼런스, 스프링 프리셋, 스타터 템플릿, 설정 검증기는 필요할 때만 불러옵니다. Claude Code 스킬 디렉터리에 클론하거나 git submodule로 추가해 설치할 수 있습니다.

핵심 기능

01Claude Code에서 자연어 프롬프트를 바탕으로 Motion.dev 애니메이션 코드를 생성합니다
02React, Next.js App Router, Svelte, Astro와 motion-v를 통한 Vue를 지원합니다
03진입, 스크롤, 제스처, 마이크로 인터랙션 및 레이아웃 애니메이션을 다룹니다
04GPU에 유리한 transform 및 opacity 속성을 사용하고 prefers-reduced-motion 설정을 따릅니다
05예제 패턴, 스프링 프리셋, 스타터 템플릿, 설정 검증기를 제공합니다

활용 사례

Next.js 랜딩 페이지의 히어로 섹션에 진입 애니메이션 추가
마케팅 사이트에 스크롤 연동 패럴랙스 또는 진행률 효과 구현
드래그로 순서를 바꾸는 목록이나 호버 및 마그네틱 버튼 상호작용 구현
전체 API를 읽지 않고도 Svelte 또는 Astro 프로젝트에 일관되고 접근성 높은 모션 적용

빠른 시작

1
Claude Code의 skills 폴더에 스킬을 클론합니다
git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations
2
자연어로 Claude Code에 애니메이션을 요청합니다

사용 전 알아둘 점

Claude Code 스킬이므로 Claude Code 내에서만 작동하며 독립 실행형 라이브러리로는 실행할 수 없습니다.
README에는 별도 패키지를 통한 React, Next.js, Svelte, Astro, Vue 지원만 명시되어 있어 다른 프레임워크는 지원되지 않습니다.

토픽

#animation #motion-dev #claude-code #react #nextjs #svelte #scroll-animations #typescript #accessibility #animation-library

자주 묻는 질문

motion-dev-animations-skill은(는) 무엇인가요?: 접근성과 성능 지침이 내장된 React, Next.js, Svelte, Astro용 Motion.dev 애니메이션을 생성하는 Claude Code 스킬 이 프로젝트는 어시스턴트에게 Motion.dev 애니메이션 패턴을 익혀 자연어 요청에 따라 TypeScript 애니메이션 코드를 생성하는 Claude Code 스킬입니다. 예를 들어 히어로 섹션 진입 애니메이션, 패럴랙스 스크롤, 드래그 가능한 목록을 추가해 달라는 요청을 처리할 수 있습니다. React 19+, Next.js 15+, Svelte 5+, Astro 4+를 대상으로 하며, motion-v 패키지를 통해 Vue도 지원합니다.
motion-dev-animations-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: motion-dev-animations-skill은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
motion-dev-animations-skill은(는) 아직 유지보수되고 있나요?: 6개월 이상 커밋 없음. motion-dev-animations-skill의 마지막 커밋은 2026년 3월 30일입니다.
motion-dev-animations-skill은(는) 어디에 사용할 수 있나요?: Next.js 랜딩 페이지의 히어로 섹션에 진입 애니메이션 추가 마케팅 사이트에 스크롤 연동 패럴랙스 또는 진행률 효과 구현 드래그로 순서를 바꾸는 목록이나 호버 및 마그네틱 버튼 상호작용 구현 전체 API를 읽지 않고도 Svelte 또는 Astro 프로젝트에 일관되고 접근성 높은 모션 적용
motion-dev-animations-skill는 어떻게 설치하나요?: Claude Code의 skills 폴더에 스킬을 클론합니다: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations 자연어로 Claude Code에 애니메이션을 요청합니다
motion-dev-animations-skill은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/199-biotechnologies/motion-dev-animations-skill

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.