CSS 네이티브 애니메이션 (css-native)

무엇을 해주나

• 라이브러리 vs 순수 CSS 판단 기준을 표로 제시합니다. 애니메이션 3개 미만·스크롤 리빌·툴팁 위치 지정은 CSS, 5단계 이상 타임라인이나 물리 기반 스프링은 GSAP/Framer Motion 같은 식으로 결정을 돕습니다.
• animation-timeline: scroll()/view(), animation-range, View Transitions API(SPA·MPA 모두), @starting-style + allow-discrete, 앵커 포지셔닝, 컨테이너 쿼리 기반 애니메이션의 바로 쓸 수 있는 코드 예제를 제공합니다.
• clip-path 트랜지션, backdrop-filter 글래스 효과, mix-blend-mode, 메시/코닉 그라디언트 등 시각 효과 레시피를 담았습니다.
• transition: all 금지, width/height 대신 transform/opacity 사용, 스크롤 애니메이션은 반드시 @supports로 감싸기 등 하지 말아야 할 것 표로 흔한 실수를 막아줍니다.

이런 분께 추천

• 무거운 애니메이션 라이브러리를 덜어내고 번들 크기를 줄이고 싶은 프론트엔드 개발자
• 랜딩 페이지·포트폴리오에 스크롤 리빌, 페이지 전환 효과를 넣고 싶은 웹 퍼블리셔/디자이너
• Claude Code로 UI 코드를 작성할 때 최신 CSS 문법을 정확히 쓰게 하고 싶은 분

활용 예시

1. "스크롤에 따라 채워지는 상단 진행 바를 순수 CSS로 만들어줘" → scroll(root block) 타임라인 코드와 Firefox 폴백용 @supports 래핑까지 생성.
2. "카드 목록에서 상세 페이지로 넘어갈 때 이미지가 이어지는 전환 효과" → view-transition-name 공유 + @view-transition { navigation: auto; } MPA 패턴 적용.
3. "모달이 display:none에서 부드럽게 나타나게 해줘" → @starting-style + transition-behavior: allow-discrete 조합으로 JS 타이밍 해킹 없이 구현.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/AThevon/genjutsu/HEAD/skills/_jutsu/css-native/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 AThevon/genjutsu 의 skills/_jutsu/css-native 폴더를 내 ~/.claude/skills/css-native/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.