animation-performancecommit 2d22863SKILL.md · 성능 최적화
애니메이션 성능
웹 애니메이션 프레임 드롭 원인을 진단하고 합성 전용 속성과 메인 스레드 밖 실행으로 프레임 예산 안에 맞춥니다.
npx skills add emilkowalski/skills --skill animation-performance명령을 선택했습니다. 직접 복사하세요.
- 권한
- read-repo
- write-files
- shell
- network
- 호환 도구
- Any SKILL.md agent
- GitHub
- 52.5k
- 출처
- 커뮤니티 · Emil Kowalski
- 상태
- 스캔 통과
- 라이선스
- MIT
- 카테고리
- 성능 최적화
핵심 규칙
기본적으로 transform과 opacity만 애니메이션하고, 다른 속성은 이유가 있어야 합니다.
실행 단계
01단계애니메이션 목록화
범위 내 각 애니메이션의 구동 방식, 속성, 재생 시점을 나열하고 transition: all과 Motion 축약형을 실제 속성으로 펼칩니다.
02단계원인 진단
속성, 메인 스레드 혼잡, React의 프레임별 리렌더링, 상속되는 CSS 변수, 20px 넘는 blur 순으로 확인하고 will-change는 마지막에 고려합니다.
03단계기록으로 확인
DevTools의 Performance·Animations 패널로 확인하고, 느낌이 아니라 실제 중급 스마트폰에서 프로파일링합니다.
04단계보고
각 발견마다 파일 위치, 원인, 변경 전후, 코드로 확인했는지 기기 기록이 필요한지 적고 비용순으로 정렬한 뒤 멈춥니다. 수정은 요청 시에만 합니다.
권한 설명 (SKILL.md 기준)
| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 필요 | 기본적으로 보고서만 내고, 요청받았을 때만 애니메이션 관련 코드를 수정합니다. |
| 명령 실행 | 필요 없음 | 명령을 실행하지 않으며, 기기 기록은 사용자가 DevTools에서 합니다. |
| 네트워크 송신 | 필요 없음 | 네트워크 접근이 필요 없습니다. |
SKILL.md 프런트매터(YAML)
---
name: animation-performance
description: Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.
---관련 스킬
규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.