animate (emilkowalski/skills)

리뷰

Codex CLI 0.166 (gpt-6-astra, low reasoning)을 전용 Windows 테스트 PC에서 실행했고, 실행마다 새 임시 프로젝트와 임시 HOME/TMPDIR/캐시를 사용했습니다. 스킬 설치(스킬 사용군), 미설치(대조군), 미설치 상태에서 스킬의 핵심 요구사항만 한 문장으로 압축해 프롬프트에 덧붙인 경우(한 문장 프롬프트군)로 나눴으며, 과제·그룹당 2회씩 실행했습니다. 네트워크는 끄고 /tmp 쓰기는 차단했습니다. 프롬프트에는 스킬 이름을 언급하지 않았습니다(아래에 적은 경우 제외). 세 가지 빌드 과제를 사용했으며, 각 과제는 인라인 CSS와 JS를 포함한 자체 완결형 HTML 파일 하나를 작성하는 것입니다. 드롭다운 메뉴, 어두운 배경의 모달, 쌓이는 토스트이며, 모두 열기/닫기 또는 등장/퇴장 애니메이션이 있습니다. 프롬프트에는 모션 규칙을 언급하지 않았습니다. 한 문장 프롬프트군은 규칙을 한 문장으로 나열합니다.

3개 그룹 비교

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

판정: 상황에 따라 다름 (22.0 / 30). 출처: emilkowalski/skills, skills/animate, 커밋 a81dbca에 고정. 설치: npx skills@latest add emilkowalski/skills --skill animate. 라이선스: MIT (저장소 LICENSE).

어떤 스킬인가

animate 스킬(emilkowalski/skills)은 UI 애니메이션을 만들 때 따르는 모션 규칙을 담고 있습니다. 목적이 있는 곳에만 애니메이션을 적용하고, 사용자 정의 ease-out 큐빅 베지어를 쓰며(절대 ease-in이나 기본값은 쓰지 않음), 150-300 ms, transform과 opacity만 사용하고, 눌림 피드백은 scale(0.97)로 주고, scale(0)에서 시작하지 않으며, 등장은 스태거로, 전환은 중단 가능하게, prefers-reduced-motion을 존중하고, hover는 (hover: hover)로 제한합니다.

테스트 방법

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

빌드 작업은 세 가지로, 각각 인라인 CSS와 JS를 넣은 단일 HTML 파일을 만드는 과제입니다. 드롭다운 메뉴, 어두운 배경을 깐 모달, 겹쳐 쌓이는 토스트이며, 모두 열기/닫기 또는 등장/퇴장 애니메이션이 필요합니다. 프롬프트에는 모션 규칙이 없습니다. 한 문장 프롬프트는 그 규칙을 한 문장으로 나열합니다.

1. 애니메이션 드롭다운 메뉴 — menu.html을 만드세요: 버튼을 누르면 5개 항목이 있는 드롭다운 메뉴가 열리고, 열기와 닫기 애니메이션이 있어야 합니다. 인라인 CSS와 JS만 사용하는 단일 HTML 파일로 작성하세요(라이브러리 사용 금지).
2. 애니메이션 모달 대화상자 — modal.html을 만드세요: 버튼을 누르면 어두운 배경을 깐 모달 대화상자가 열리고, 열기와 닫기 애니메이션이 있어야 합니다. 인라인 CSS와 JS만 사용하는 단일 HTML 파일로 작성하세요(라이브러리 사용 금지).
3. 토스트 알림 — toasts.html을 만드세요: 버튼 세 개가 각각 토스트 알림을 띄우고, 토스트는 겹쳐 쌓였다가 스스로 사라지며, 등장과 퇴장 애니메이션이 있어야 합니다. 인라인 CSS와 JS만 사용하는 단일 HTML 파일로 작성하세요(라이브러리 사용 금지).

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

결과

세 번째 군에 전달한 한 문장 프롬프트: "디자인 엔지니어처럼 애니메이션을 만드세요. 목적이 있는 것만 애니메이션하고, 사용자 정의 ease-out 큐빅 베지어를 쓰며(절대 ease-in이나 기본값은 쓰지 않음), 150-300 ms, transform과 opacity만 사용하고, 눌림 피드백은 scale(0.97), scale(0)에서 시작하지 말고, 등장은 스태거로, 전환은 중단 가능하게, prefers-reduced-motion을 존중하고 hover는 (hover: hover)로 제한하세요."

평균 점수: 스킬 없이 3.71, 스킬 사용 시 4.36(델타 +0.64). 실행당 토큰: 78k 대 132k(1.68배), 시간 82초 대 81초. 한 문장 프롬프트군: 5.0(한 문장 프롬프트 대비 스킬의 이득: -0.64, 스킬 없는 경우 대비 한 문장 프롬프트의 이득: +1.29). 한 문장 프롬프트는 실행당 105k 토큰을 쓰므로, 스킬은 한 문장 프롬프트의 1.25배 비용입니다.

실제로 있었던 일

• 대조군 3.71, 스킬 4.36, 한 문장 프롬프트 5.0(각 n=6). 규칙 기반 모션 검사는 페이지가 10개 규칙 중 몇 개를 따르는지 셉니다. 대조군은 10개 중 6〜8개, 스킬은 8〜9개에 도달했고, 한 문장 프롬프트는 6회 실행 모두에서 모든 검사를 통과했습니다.
• 대조군이 가장 자주 놓친 규칙은 눌림 피드백(:active scale)으로 6회 중 3회에서 빠졌고, 일부 실행에서는 스태거 등장과 비기본 이징도 빠졌습니다. 스킬도 2회 실행에서 눌림 피드백을 놓쳤고 여러 실행에서 스태거 등장이나 이징을 놓쳤습니다. 토스트 작업에서는 점수가 4.14와 4.57로, 대조군 4.14와 비슷했습니다.
• 토큰: 스킬 132k, 한 문장 프롬프트 105k, 대조군 78k(실행당). 대조군의 1.7배, 한 문장 프롬프트의 1.3배입니다. 스킬은 스킬 사용군 6/6 실행에서 읽혔고, 명령을 더 많이 씁니다(실행당 9.3회 대 4.7회).
• 스킬 사용군은 실행마다 작업 폴더에 스킬 사본을 포함해 약 3개의 파일을 추가로 만듭니다.

항목별 점수

이 테스트의 한계

• HTML 파일 하나의 코드 텍스트를 대상으로 한 규칙 기반 검사입니다. 애니메이션을 브라우저에서 렌더링하거나 시간을 재지 않았으므로 부드러움과 시각적 품질은 평가하지 않았습니다.
• 한 문장 프롬프트는 스킬 자체 체크리스트를 거의 그대로 옮긴 것이고, 검사도 같은 규칙 목록을 따릅니다.
• 셀당 n=2.
• 작업·군당 n = 2: 약 1점 미만의 차이는 노이즈입니다.
• 규칙 기반 채점은 검사가 볼 수 있는 것만 측정합니다. 취향이나 결과가 최선인지는 판단할 수 없습니다.

보안

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

결론

이 스킬은 아무 안내도 없을 때보다 모션 규칙 준수를 개선하지만, 같은 규칙을 한 문장으로 주면 더 적은 토큰으로 완벽한 점수를 얻습니다. 따라서 이득은 맨 프롬프트에 비할 때만 있습니다.