사용 가이드로 건너뛰기
review-animations작성자 Emil Kowalski

Review Animations 스킬.

디자인 검토를 위한 Claude Code 및 Codex 스킬: 높은 완성도 기준에 따라 애니메이션 코드의 타이밍, 인터랙션, 완성도를 검토합니다.

  • Design Review & Accessibility
  • 리뷰 리포트
emilkowalski/skills · skills/review-animations/SKILL.mdSKILL.md
--- name: review-animations description: Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned. --- ## Operating Posture ## The Ten Non-Negotiable Standards ## Aggressive Escalation Triggers ## Remedial Preference Hierarchy ## Required Output Format ## Guidelines
2026-09-14에 업스트림 파일에서 읽은 전면 메타데이터 및 섹션 제목 · 전체 8,040자

01 기능

Claude Code와 Codex에서 review-animations 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

의도적으로 범위를 좁힌 리뷰 스킬로, 애니메이션과 모션 코드를 높은 완성도 기준으로만 판단하며 일반적인 코드 리뷰는 거부합니다. 실질적인 기준은 Emil Kowalski의 애니메이션 철학에서 가져오며, 방법론은 열 가지 절대 기준, 적극적인 에스컬레이션 트리거, 아홉 단계의 개선 우선순위, 계층화된 출력으로 구성되어 하나의 판정으로 귀결됩니다.

기본값은 문제로 지적하는 것이며, 승인은 얻어내야 합니다. 디프에 포함된 모든 애니메이션은 목적과 빈도로 정당화되어야 하고, 반응형 이스링을 사용해야 하며, 300ms 이내여야 하고, 트리거 지점에서 시작해야 하며, transform과 opacity로 실행되어야 하고, 중단 가능해야 하며, reduced motion을 존중해야 하고, 비대칭 타이밍을 사용해야 합니다. 출력은 Before/After/Why 발견 사항 표와 Block 또는 Approve 결정으로 구성되며 file:line을 인용합니다.

검토 보고서
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    열 가지 기준으로 평가하기

    디프에 포함된 모든 애니메이션은 정당화, 빈도, 이스링, 지속 시간, 시작점, 중단 가능성, GPU 속성, 접근성, 비대칭성, 일관성에 이르는 열 가지 절대 기준으로 검사됩니다.

  2. 02
    에스컬레이션 트리거를 즉시 표시하기

    transition: all, scale(0) 등장, UI에 ease-in 사용, 키보드 또는 하루 100회 이상 발생하는 동작에 애니메이션 적용, reduced-motion 처리 누락 등 나열된 위험 신호 목록은 논의 대상이 아니라 강하게 지적됩니다.

  3. 03
    가장 빠른 해결책을 우선하기

    수정 사항은 애니메이션 삭제, 축소, 이스링 수정, 시작점 수정, 중단 가능성 수정, GPU 속성 수정, 타이밍 수정, 다듬기, 마지막으로 접근성과 일관성 순으로 우선순위에 따라 제안됩니다.

  4. 04
    필수 두 부분을 출력하기

    리뷰는 고정된 순서로 돌아옵니다: 1부는 단일 발견 사항 표이고, 2부는 계층화된 코멘터리로 명시적인 결정으로 끝납니다.

  5. 05
    계층화된 코멘터리와 판정하기

    나머지 논평은 영향도 6단계로 묶으며, 가장 높은 단계부터 시작하고 비어 있는 단계는 생략하며, 마지막에 차단 또는 승인 결정으로 마무리합니다.

02 적합성 확인

review-animations Skill을 사용하는 경우

이러한 종류의 디자인 리뷰 작업에는 Claude Code 또는 Codex에서 review-animations 스킬을 사용하십시오. 아래 적합성 및 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • Emil Kowalski의 디자인 엔지니어링 철학에서 파생된 높은 수준의 기준에 따라 애니메이션 및 모션 코드를 검토합니다. 기본적으로 문제를 지적하며, 승인은 획득하는 것입니다.

한계 인지하기

  • 기능을 작성하거나, 관련 없는 버그를 수정하거나, 모션이 아닌 코드를 검토하지 않습니다.

03 스킬 내부

review-animations Skill이 디자인 리뷰에 제공하는 것

SKILL.md가 Claude Code 또는 Codex에 지시하는 4가지 내용으로, 파일 자체의 섹션 순서를 따릅니다.

  1. 작업 자세

    당신은 기교에 대한 냉혹한 안목을 가진 시니어 디자인 엔지니어입니다. 당신의 편향은 단순히 작동하는 모션이 아니라 올바르게 느껴지는 모션을 향합니다.

  2. 타협할 수 없는 10가지 기준

    차이점의 모든 애니메이션은 이 기준에 따라 측정됩니다. 위반은 발견 사항입니다.

  3. 개선 우선순위 계층

    수정 사항을 제안할 때는 후순위보다 선순위 조치를 우선합니다:

  4. Guidelines

    미리 정의된 모션에는 CSS transitions/@starting-style/WAAPI를 선호하고, 동적이고 중단 가능하며 제스처 기반 모션에는 JS/스프링을 선호합니다.; 모션이 올바르게 느껴지는지 확실하지 않을 때는 슬로우 모션/프레임별로 검토할 것을 권장합니다

04 활용하기

Claude Code 또는 Codex에 review-animations 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 review-animations 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill review-animations

skills/review-animations/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소마다 자체 경로를 문서화할 수 있습니다.

스킬에 첫 번째 디자인 리뷰 작업 부여

SKILL.md에는 예제 프롬프트가 포함되어 있지 않습니다. 이 스타터는 카탈로그 한 줄 설명에서 작성되었습니다. 작업 줄을 실제 브리프로 교체하십시오.

Starter prompt
Use the review-animations skill on the material I attach. What the skill should do here: Reviews animation code for timing, interaction, and finish against a high craft bar. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

출처: SKILL.md가 아닌 카탈로그 한 줄 사용 설명에서 작성된 스타터 프롬프트입니다.

첫 번째 결과 확인

출력을 수락하기 전에 대화 기록과 파일에서 다음을 확인하십시오:

  • 결과는 이 스킬에 대해 카탈로그에 나열된 대로 검토 보고서로 제공됩니다.
  • 에이전트가 결과를 생성하기 전에 계획이나 트랜스크립트에서 review-animations 스킬의 이름을 명시합니다.
  • 사용자의 콘텐츠, 이름 및 숫자는 출력에서 변경되지 않습니다.

OpenDesign에서는 review-animations가 기본 포함되어 있습니다: 상단 바에서 Plugins → Skills를 선택하십시오.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Repository
github.com/emilkowalski/skills 브랜치 main
스킬 파일
skills/review-animations/SKILL.md 검증 시 기록된 콘텐츠 체크섬, 커밋 d23d7f8
License
MIT LICENSE에서 확인.
리포지토리 스타
37,516 GitHub 스냅샷은 2026-09-14에 전체 emilkowalski/skills 리포지토리에 대해 촬영되었으며, 이 카탈로그에 9개의 스킬이 포함되어 있습니다. review-animations에 대한 평점이나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.
스킬 자체 설명
"Emil Kowalski의 디자인 엔지니어링 철학에서 파생된 높은 수준의 기준에 따라 애니메이션 및 모션 코드를 검토합니다. 기본적으로 문제를 지적하며, 승인은 획득하는 것입니다."

SKILL.md의 프론트매터 설명입니다. 전체 파일은 약 8,040자입니다. GitHub에서 전체 파일 읽기.

Review Animations

실제 디자인 검토 작업에 review-animations를 실행합니다.

review-animations 스킬은 OpenDesign에 포함되어 있습니다. 앱을 다운로드하고 Plugins → Skills에서 스킬을 선택한 후 위의 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

터미널
npx skills add https://github.com/emilkowalski/skills --skill review-animations