improve-animations (emilkowalski/skills)

리뷰

Codex CLI 0.166 (gpt-6-astra, low reasoning)을 전용 Windows 테스트 PC에서 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬 설치(스킬 사용군), 미설치(대조군), 미설치 상태에서 스킬의 핵심 요구사항만 한 문장으로 압축해 프롬프트에 덧붙인 경우(한 문장 프롬프트군)로 나눴으며, 과제·그룹당 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 언급하지 않았습니다(아래에 적은 경우 제외). 모션 문제 8개를 심어 둔 작은 웹 앱(am_app) 하나를 사용했습니다. 과제는 프로젝트 전체 감사, 드롭다운과 모달만 감사, 지정된 문제 다섯 개 수정입니다. 프롬프트에는 어떤 규칙도 언급하지 않고 '애니메이션과 모션'이라고만 적었습니다. 한 문장 프롬프트군은 규칙을 나열하고 정확한 대체 값을 요구합니다.

3개 그룹 비교

Codex CLI에서 18회 실행해 측정했고, LLM 심사 없이 규칙 기반 검사로 채점했습니다. 총점 25.5 / 30, 판정 추천.

판정: 추천 (25.5 / 30). 출처: emilkowalski/skills, skills/improve-animations, 커밋 a81dbca에 고정. 설치: npx skills@latest add emilkowalski/skills --skill improve-animations. 라이선스: MIT(저장소 LICENSE).

무엇인가

emilkowalski/skills의 improve-animations 스킬입니다. 모션 디자인 감사 가이드로, 기본 ease-in/기본 곡선 대신 사용자 정의 ease-out 곡선을 쓰고, 지속 시간은 150-300 ms, transform과 opacity만 사용하며, transition: all 금지, scale(0) 시작 금지, transform-origin은 트리거 위치에 맞추고, reduced-motion을 지원하며, 빈도가 높은 동작에는 애니메이션을 넣지 않습니다.

테스트 방법

Codex CLI 0.166(gpt-6-astra, 낮은 추론)을 전용 Windows 테스트 PC에서 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬을 설치한 스킬 사용군, 스킬이 없는 대조군, 스킬 없이 핵심 요구사항을 한 문장으로 압축해 프롬프트 끝에 붙인 한 문장 프롬프트군으로 나눴으며, 작업·군당 2회 실행, 네트워크 차단, /tmp 쓰기 차단 조건이었습니다. 프롬프트에는 스킬 이름을 전혀 언급하지 않았습니다(아래에 적은 표현 제외).

작은 웹 앱(am_app) 하나에 모션 문제 8개를 심어 두었습니다. 작업은 프로젝트 전체 감사, 드롭다운과 모달만 감사, 이름이 지정된 다섯 문제 수정입니다. 프롬프트에는 '애니메이션과 모션'이라고만 하고 어떤 규칙도 언급하지 않습니다. 한 문장 프롬프트는 규칙을 나열하고 정확한 대체 값을 요구합니다.

1. 모션 코드 감사 — 이 프로젝트의 애니메이션과 모션을 감사하세요. 수정할 항목을 우선순위 순서로 알려주고, 각 항목에 파일과 정확한 대체 값을 붙이세요. 파일은 변경하지 마세요.
2. 두 컴포넌트 감사 — styles.css의 드롭다운과 모달 애니메이션만 감사하세요. 무엇이 잘못되었고 정확히 어떻게 바뀌어야 하나요? 파일은 변경하지 마세요.
3. 다른 사람이 구현할 핵심 수정 — 이 프로젝트를 본 적 없는 동료에게 모션 수정 작업을 넘기려 합니다. 영향력이 가장 큰 애니메이션 수정 5개를 각각 작성할 정확한 CSS와 함께 나열해, 저에게 묻지 않고도 구현할 수 있게 하세요. 파일은 변경하지 마세요.

채점은 프로그램 방식(숨은 테스트/심어 둔 문제 탐지/제약 조건 검사/해당되는 경우 렌더링+OCR)으로 진행하며 실행당 0~5점입니다. 어떤 점수도 LLM 심사자가 결정하지 않았습니다.

결과

세 번째 군에 제공한 한 문장 프롬프트: "선임 디자인 엔지니어처럼 모션 코드를 감사하세요. ease-in과 기본 곡선, transition: all, scale(0) 시작, 레이아웃 속성 애니메이션, 누락된 reduced-motion, 빈도 높은 동작의 애니메이션, 잘못된 transform-origin, 느린 지속 시간을 지적하고, 각 항목에 정확한 대체 값(사용자 정의 ease-out cubic-bezier, 150-300 ms, transform/opacity만)을 제시해 다른 사람이 적용할 수 있게 하세요. 소스 파일은 변경하지 마세요."

평균 점수: 스킬 없음 3.15 vs 스킬 사용 4.81(델타 +1.66). 실행당 토큰: 65k vs 78k(1.20배), 시간 48초 vs 49초. 한 문장 프롬프트군: 4.94(한 문장 프롬프트 대비 스킬의 이득: -0.13, 스킬 없음 대비 한 문장 프롬프트의 이득: +1.79). 한 문장 프롬프트는 실행당 65k 토큰이므로 스킬 비용은 한 문장 프롬프트의 1.19배입니다.

무슨 일이 있었나

• 대조군 3.15, 스킬 4.81, 한 문장 4.94(각 6회). 안내가 없을 때 Codex는 심어 둔 문제 8개 중 3~7개를 찾았고, 6회 중 5회에서 cubic-bezier나 정확한 이징 곡선을 제시하지 않았습니다.
• 스킬이 이 격차를 메웁니다. 집중 감사 두 실행 모두 5.0이었고(대조군은 두 실행 모두 scale(0) 모달 시작을 놓침), 모든 감사에서 정확한 곡선을 제시했습니다. 한 문장 프롬프트도 같은 결과에 도달합니다.
• 다섯 가지 수정 작업에서 스킬은 한 문장 프롬프트에 살짝 뒤졌습니다(4.62 vs 5.0). 스킬 사용군 두 실행 모두 700 ms 선형 카드 호버를 놓쳤고, 각각 다른 심어 둔 문제 하나(scale(0) 모달 또는 transition: all)를 놓쳤습니다.
• 토큰: 스킬 78k, 한 문장 65k, 대조군 65k(대조군의 1.2배). 스킬은 이름을 대지 않은 채 스킬 사용군 6/6 실행에서 읽혔습니다.

항목별 점수

이 테스트의 한계

• 감사 텍스트에 대한 탐지 검사와 변경된 CSS에 대한 정규식 검사를 했으며, 브라우저에서 렌더링하거나 측정한 것은 없습니다.
• 한 문장 프롬프트는 스킬 자체 체크리스트를 거의 그대로 옮긴 것이라 강력한 비교 대상입니다.
• 픽스처 하나, 셀당 n=2.
• 작업·군당 n=2: 약 1점 미만의 차이는 노이즈입니다.
• 규칙 기반 채점은 검사가 볼 수 있는 것만 측정하며, 취향이나 결과가 최선인지는 판단하지 못합니다.

보안

security.md를 참고하세요. 스캔: CRITICAL 0 / HIGH 2 / MEDIUM 0. 판정: 실행해도 안전(네트워크 차단 샌드박스). 깨끗한 스캔 결과가 스킬의 안전성을 증명하지는 않습니다.

결론

이 스킬은 특히 항상 구체적인 곡선과 지속 시간을 제시한다는 점에서, 아무 안내 없는 감사보다 분명히 낫습니다. 같은 규칙을 나열한 한 문장이 더 적은 비용으로 같은 성과를 내므로, 이득은 안내가 없는 경우에 대한 것이지 좋은 프롬프트에 대한 것이 아닙니다.