드롭다운 애니메이션 값을 이유와 함께 받는 emil-design-eng 스킬

설치하고 스킬 이름으로 부른다

emil-design-eng는 토스트 라이브러리 Sonner를 만든 Emil Kowalski가 애니메이션 판단 규칙을 지시문 한 파일(SKILL.md)로 적어 둔 Claude Code 스킬입니다. 코드를 쓰기 전에 네 가지를 차례로 정하게 합니다. 움직일지, 무엇을 위해, 어떤 이징으로, 얼마나 빠르게입니다. 이징은 속도가 붙고 줄어드는 모양입니다.

github.com↗

GitHub - emilkowalski/skills: Skills for Designers and Engineers.

Skills for Designers and Engineers. Contribute to emilkowalski/skills development by creating an account on GitHub.

1npx skills add emilkowalski/skills --skill emil-design-eng -a claude-code

메뉴를 만들 저장소 폴더에서 실행하면 .claude/skills/emil-design-eng/SKILL.md 한 파일과 설치 기록 skills-lock.json이 생깁니다. 모든 프로젝트에서 쓰려면 -g를 붙입니다.

설치만 해 두고 문장을 보내면 Claude가 스킬을 읽지 않고 바로 파일을 쓰기도 합니다. 요청 앞에 스킬 이름을 붙여야 읽습니다. 이름만 보내면 준비됐다는 한 줄만 답하니 요청을 같은 줄에 적습니다.

1/emil-design-eng 헤더 오른쪽 프로필 버튼을 누르면 열리는 계정 메뉴 드롭다운을 menu.html 한 파일로 만들어 줘. 열고 닫을 때 애니메이션을 넣고, 고른 값과 이유를 짧게 알려 줘.

스킬 없이스킬 부름

스킬 없이 받은 답은 무엇을 했는지 적고, 스킬을 부른 답은 값마다 규칙을 댑니다. 댄 규칙은 넷입니다.

• 드롭다운은 150~250ms 안에서 움직입니다.
• scale(0)에서 시작하지 않습니다.
• 닫기는 열기보다 빠릅니다.
• 키보드로 열 때는 반복이 잦아 애니메이션을 뺍니다.

프로필 버튼으로 열고 닫고, 열린 채 Esc로 닫고 Enter로 다시 열어 봅니다.

스킬 없이 만든 메뉴는 항목이 25ms씩 늦게 차례로 올라와 열기가 길어집니다. 스킬로 만든 메뉴는 Enter로 열면 움직임 없이 바로 뜹니다.

바뀐 값은 네 질문 순서를 따른다

스킬은 보는 횟수로 움직일지부터 정합니다.

• 하루 100번 넘게 보는 단축키·명령 팔레트는 움직이지 않습니다.
• 하루 수십 번 보는 호버·목록 이동은 줄이거나 없앱니다.
• 모달·드로어처럼 가끔 보는 것에만 표준 애니메이션을 씁니다.

스킬 없이 만든 menu.html에서 바뀐 줄도 이 질문 순서를 따라갑니다.

이징은 순서도 하나로 고릅니다.

• 들어오고 나가면 ease-out(빨리 출발해 천천히 멈춤)
• 화면 안에서 옮겨 가면 ease-in-out
• 호버 색 변화면 ease

ease-in은 출발이 느려 같은 300ms라도 더 굼떠 보여 UI에는 쓰지 않습니다.

리뷰와 넣을지 판단도 한 줄로 받는다

이미 있는 파일을 점검만 하게 할 수도 있습니다. 스킬 없이 만든 menu.html을 두고 부릅니다.

1/emil-design-eng menu.html 의 열고 닫는 애니메이션을 리뷰해 줘. 고치지는 말고 중요한 것 세 개만.

리뷰는 Before·After·Why 세 칸 표로 옵니다. 고칠 곳 셋은 스킬이 메뉴를 만들 때 바꾼 값과 같은 쪽입니다.

• stagger를 없애거나 30ms 이하로 줄이기
• 닫기를 약 120ms로 줄이기
• 곡선을 바꾸고 셰브런(펼침 화살표)과 길이를 맞추기

효과를 더하기 전에 판단만 받을 수도 있습니다. 스킬로 만든 menu.html에 호버 효과를 더할지 묻습니다.

1/emil-design-eng menu.html 의 메뉴 항목에 마우스를 올리면 강조 배경이 그 항목으로 미끄러져 따라가게 할까? 고치지는 말고 판단만.

답은 넣지 않는 쪽입니다. 메뉴를 열 때마다 마우스가 항목 넷을 훑으니 자주 보는 효과가 됩니다. 항목이 넷뿐이라 지금 어디를 가리키는지 따로 알려 줄 필요도 없습니다. 항목이 여덟 개 이상으로 늘거나 하위 메뉴가 생기면 다시 보라고 덧붙입니다.