vercel-react-view-transitions
React 앱에 네이티브 뷰 전환 추가하기
React 앱에 부드러운 페이지 전환과 공유 요소 애니메이션을 추가하려면 View Transitions API와 통합 패턴을 이해해야 합니다. 이 스킬은 Vercel Labs의 단계별 안내, CSS 레시피, Next.js 패턴을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"vercel-react-view-transitions" 사용 중입니다. Add transitions to my product list
예상 결과:
제품 항목을 고유한 키를 가진 <ViewTransition>으로 래핑하고, ::view-transition-old/new 의사 요소에 CSS를 추가한 다음, 상태 변경 시 애니메이션을 트리거하기 위해 startTransition을 사용하세요.
"vercel-react-view-transitions" 사용 중입니다. Why is browser back button not animating?
예상 결과:
브라우저 뒤로/앞으로 버튼은 동기식 popstate 이벤트를 사용하는데, 이는 startViewTransition과 호환되지 않습니다. 애니메이션 지원을 유지하려면 대신 router.push()와 명시적 URL을 사용하세요.
"vercel-react-view-transitions" 사용 중입니다. How do I animate list reordering?
예상 결과:
각 항목에 ID를 사용하여 고유한 view-transition-name 값을 할당하세요. 항목이 재정렬되면 브라우저가 자동으로 위치 변경을 캡처하고 매끄럽게 애니메이션합니다.
보안 감사
안전All static findings are false positives. The skill is legitimate documentation from Vercel Labs for implementing React View Transitions. No malicious code patterns exist. All 781 flagged instances are benign keyword matches in markdown documentation (backticks for code formatting, words like 'keystroke' in UI context, TypeScript type names, and standard documentation URLs).
품질 점수
만들 수 있는 것
Next.js 앱에 페이지 전환 추가
App Router와 experimental viewTransition 플래그를 사용하여 Next.js 앱에서 라우트 간 탐색 시 부드러운 슬라이드 전환 구현.
공유 요소 애니메이션 생성
제품 이미지가 그리드 카드에서 상세 페이지 뷰로 매끄럽게 변형되어 네이티브 모바일 앱과 같은 프리미엄 느낌을 제공.
데이터 로딩 상태 애니메이션
짜릿突은 콘텐츠 깜빡임을 부드러운 Suspense 노출로 대체하여 데이터 가져오기 후 콘텐츠가 우아하게 나타나는 애니메이션 구현.
이 프롬프트를 사용해 보세요
내 Next.js 앱에 뷰 전환을 추가해서 페이지가 탐색할 때 슬라이드 인되게 해줘
产品 그리드가 있는데, 제품을 클릭하면 이미지가 그리드에서 상세 페이지 히어로로 애니메이션되어야 해
Suspense가 해결되면 뷰 전환이 중단돼. 중첩된 애니메이션이 페이지 전환에 간섭하지 않도록 어떻게 방지하나요?
반대 방향으로 슬라이드되는 앞으로/뒤로 내비게이션 애니메이션을 구현해서 앱에서 공간적 깊이를 느끼게 해줘
모범 사례
- audit 단계로 시작 - 코드를 작성하기 전에 전환이 필요한 모든 곳을 식별하세요
- 커스텀 애니메이션을 처음부터 작성하기보다는 스킬의 CSS 레시피를 복사하세요
- 항상 reduced-motion 기본 설정으로 테스트하고 이전 브라우저에 대한 우아한 저하 적용
피하기
- document.startViewTransition()를 직접 호출하지 마세요 - ViewTransition 컴포넌트가 처리하도록 하세요
- 측면 내비게이션(탭)에는 방향성 슬라이드를 피하세요 - 이는 잘못된 공간적 깊이를 암시합니다
- ViewTransition을 div 안에 래핑하지 마세요 - 컴포넌트가 진입/진출을 활성화하려면 외장 래퍼여야 합니다