Emilkowalski 스킬

skills/skills/animate

애니메이션을 처음부터 구축하되, 그것이 자연스럽게 느껴지는지를 결정하는 순서대로 판단을 내린다 — 애니메이션을 적용할지 여부, 목적, 도구, 속성, 곡선과 지속 시간, 인터럽트 방식, 종료 방식을 결정한다. 구현을 작성한다. 무언가를 애니메이션으로 만들고, 모션을 추가하고, 컴포넌트에 생동감을 부여하거나, 전환을 구축하라는 요청이 있을 때 사용한다. 기존 모션을 비평할 때는 review-animations를 사용하고, 전체 코드베이스를 감사할 때는 improve-animations를 사용한다.

skills/skills/animation-vocabulary

웹 애니메이션이나 모션 효과에 대한 모호한 설명을 정확한 용어로 바꿔주는 역방향 검색 용어집입니다("팝오버가 열릴 때 통통 튀는 효과" → Pop in; "iOS 고무줄 스크롤" → Rubber-banding). 사용자가 "이런 걸 뭐라고 부르죠?"라고 묻거나, 모션 효과의 이름을 모르고 설명만 하면서 AI나 디자이너에게 지시할 정확한 단어를 원할 때 사용합니다. 효과의 이름을 찾는 용도이며, 설계나 구현을 위한 것이 아닙니다.

skills/skills/apple-design

Apple의 인터페이스 디자인과 유려하고 물리적인 모션 접근법을 웹에 맞게 변환했습니다. 제스처 기반 UI, 스프링 애니메이션, 드래그/스와이프/시트 상호작용, 관성 및 중단 가능한 전환, 반투명 소재와 깊이, 타이포그래피(광학적 크기 조정, 자간, 행간), 모션 감소, 또는 Apple 스타일 인터페이스의 기반이 되는 디자인 원칙(피드백, 공간적 일관성, 절제)을 구축하거나 검토할 때 사용하세요.

skills/skills/ask-sonner

Sonner(React 토스트 라이브러리) 사용 가이드 — Toaster 설치 및 연결, 올바른 toast() 호출 선택, promise 및 로딩 토스트, 토스트 업데이트·해제·유지, 스타일링, 테마 및 아이콘, 위치 지정 및 다중 toaster 설정. Sonner로 작업하거나 문제를 해결할 때 사용 — 토스트가 표시되지 않거나, 두 번 표시되거나, 스타일이 사라지거나, Tailwind 클래스를 무시하거나, 모달 뒤에 위치하거나, 다크 모드를 따르지 않는 경우.

skills/skills/emil-design-eng

이 스킬은 Emil Kowalski의 UI 폴리시, 컴포넌트 디자인, 애니메이션 결정, 그리고 소프트웨어를 훌륭하게 만드는 보이지 않는 세부 사항에 대한 철학을 인코딩합니다.

skills/skills/find-animation-opportunities

코드베이스나 UI에서 애니메이션이 있어야 하지만 없는 곳을 검색하고, 있으면 안 되는 모든 것은 거부합니다. 읽기 전용이며, 정확한 값으로 모션을 제안할 뿐 구현하지는 않습니다. 사용자가 "여기서 무엇을 애니메이션할 수 있을까?"라고 묻거나 "이것을 더 생동감 있게 만들고 싶다"고 할 때 사용하세요. 기존 애니메이션 수정은 improve-animations 또는 review-animations를 대신 사용하세요.

skills/skills/improve-animations

코드베이스의 애니메이션 및 모션 코드를 시니어 모션 어드바이저로서 조사한 후, 우선순위가 매겨진 감사 보고서와 다른 에이전트(또는 저렴한 모델)가 실행할 수 있는 자체 포함된 구현 계획을 생성합니다. 소스 코드는 읽기 전용이며 개선 계획을 수립할 뿐 적용하지는 않습니다. 사용자가 "애니메이션 개선", "모션 감사", "이 앱의 느낌 개선"을 요청하거나 단일 diff 검토가 아닌 애니메이션 수정 로드맵을 원할 때 사용하세요.

skills/skills/pick-ui-library

주어진 프론트엔드 작업에 적합한 라이브러리를 선별된 의견 기반 목록에서 고릅니다 — 숫자, OTP 입력, 차트, 명령 메뉴, 가상화, 드래그 앤 드롭, 토스트, 상태, 스타일링 등. 명시적으로 호출될 때만 실행되며, 자체적으로 트리거되지 않습니다.

skills/skills/prototype

설명하는 UI 요소의 서로 다른 여러 버전을 만들고, 시각적 선택기 뒤에 렌더링하여 실시간으로 넘겨보며 마음에 드는 버전을 선택할 수 있게 합니다. 명시적으로 호출될 때만 실행되며, 자체적으로 트리거되지 않습니다.

skills/skills/review-animations

에밀 코왈스키의 디자인 엔지니어링 철학에서 비롯된 높은 장인 기준에 따라 애니메이션 및 모션 코드를 검토합니다. 기본적으로 플래그를 지정하며, 승인은 획득해야 합니다.