Animation

remotion-video-creation은 React 기반 영상 작업을 위한 Remotion 중심 스킬입니다. 애니메이션, 에셋, 오디오, 캡션, 차트, 컴포지션, 전환 등 29개 규칙으로 렌더링 실수를 줄이는 데 도움이 됩니다. Video Editing 워크플로, 템플릿형 설명 영상, 소셜 클립, 데이터 기반 모션 그래픽에 적합합니다.

manim-video는 그래프, 워크플로, 시스템 다이어그램, 제품 사용 화면, 출시용 비주얼을 위한 깔끔한 Manim 기반 설명 영상을 기획하고 제작하는 데 도움을 줍니다. 말하는 사람 중심의 편집이 아니라 장면 우선 방식으로 정확한 애니메이션 설명이 필요할 때 manim-video 스킬을 사용하세요. 설치, 장면 기획, 렌더링에 대한 실용적인 manim-video 가이드 단계도 포함되어 있습니다.

frontend-slides는 처음부터 애니메이션이 풍부한 HTML 프레젠테이션을 만들거나 PowerPoint 파일을 변환해 만드는 데 도움이 됩니다. 발표, 피치덱, 워크숍, 사내 데모에 적합하며, 시각적 탐색이 필요하고 의존성 없는 브라우저 출력과 한 화면(viewport)에 꼭 맞는 슬라이드가 필요할 때 frontend-slides for UI Design에 사용하세요.

slack-gif-creator는 Slack에 맞는 애니메이션 GIF를 만들기 위한 코드 중심 스킬입니다. Python 헬퍼로 프레임 생성, 최적화, 검증을 지원하며, 의존성 설치부터 GIFBuilder 루프 구성, Slack의 용량·타이밍·색상 제약에 맞는 이모지·메시지 GIF 내보내기까지 다룰 수 있습니다.

ui-ux-pro-max는 AI 기반 UI/UX 디자인을 위한 종합 스킬입니다. 웹과 모바일 프로젝트의 레이아웃, 스타일, 컬러 시스템, 타이포그래피, UX 규칙에 대해 체계적으로 안내하며, React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, HTML/CSS 등 다양한 환경에서 실무 디자인 결정을 지원합니다. UI 기획, 리뷰, 개선에 활용할 수 있는 큐레이션된 디자인 인텔리전스를 제공합니다.

interaction-design 스킬은 팀이 목적 있는 UI 모션, 마이크로인터랙션, 전환, 로딩 상태, 피드백 패턴을 설계하고 구현할 수 있도록 실용적인 React 중심 참고 자료와 활용 가이드를 제공합니다.

react-native-design는 React Native UI 패턴에 집중한 스킬로, StyleSheet 스타일링, 타입이 적용된 React Navigation, 그리고 크로스플랫폼 화면 구현을 위한 Reanimated 3 활용법까지 다룹니다.

overdrive는 맥락 파악, 제안 우선 계획, 뛰어난 인터랙션 품질을 중시하는 야심찬 UI 디자인 작업을 위한 GitHub 스킬입니다. 시네마틱 전환, 반응형 인터페이스, 임팩트 있는 제품 경험에 overdrive를 설치하고 적용할 때 사용하세요.

delight 스킬은 사용성이나 집중도를 해치지 않으면서 성공, 로딩, 빈 상태, 온보딩 화면에 세련된 UI 디테일과 마이크로 인터랙션, 개성을 더할 때 유용합니다.

overdrive는 대담한 UI 디자인을 위해 사용자가 직접 호출하는 스킬로, 인터페이스를 표준 컴포넌트의 한계 너머로 끌어올리는 데 초점을 둡니다. 먼저 /frontend-design 맥락이 필요하며, 구현에 들어가기 전에 콘셉트 방향을 먼저 제안한 뒤, 집중도 높고 임팩트 있는 상호작용을 만들어가도록 안내합니다.

optimize skill은 측정 우선 워크플로를 바탕으로 로딩, 렌더링, 애니메이션, 이미지, 번들 크기, 런타임 동작 전반의 UI 성능 문제를 진단하고 개선하는 데 도움을 줍니다.

delight 스킬은 UI Design 작업에 과하지 않은 즐거움, 개성, 그리고 세심한 마감감을 더하도록 돕습니다. 성공 상태, 빈 상태, 로딩 순간, 각종 인터랙션을 더 좋게 다듬고 싶을 때, delight 설치, 설정, 활용 방법을 맥락에 맞게 안내하는 용도로 사용할 수 있습니다.

animate 스킬을 사용하면 UI 기능을 검토하고, 목적이 분명한 애니메이션·마이크로 인터랙션·전환을 설계할 수 있습니다. /frontend-design에서 필요한 디자인 맥락을 바탕으로, 피드백·명확성·위계·즐거움을 높이는 모션을 식별하도록 돕고, 성능과 접근성까지 함께 고려합니다.

overdrive는 대담한 UI 디자인을 위한 GitHub 스킬로, 팀이 맥락을 반영한 고임팩트 인터랙션을 선택하고 구현하도록 돕습니다. 구현에 앞서 필요한 디자인 준비를 거쳐, 돋보이는 모션, 성능 부담이 큰 UI, 완성도 높은 고급 플로우를 기획할 때 활용할 수 있습니다.

delight 스킬은 UI 팀이 과하지 않은 마이크로 인터랙션, 카피, 피드백 포인트를 더해 인터페이스를 더 따뜻하고 기억에 남게 다듬도록 돕습니다. 전체 리디자인보다는 특정 화면이나 플로우를 정교하게 마감할 때 가장 잘 맞습니다. 사용 전 /frontend-design 맥락을 먼저 갖추고, 필요하면 /teach-impeccable을 선행한 뒤 delight를 쓰는 것이 좋습니다.

animate 스킬을 사용하면 기능을 검토하고, 명확성·피드백·완성도를 높이는 의도 있는 애니메이션, 마이크로 인터랙션, 모션 효과를 더할 수 있습니다. 목표가 분명하고 디자인 맥락과 성능 제약이 정리된 UI 디자인 작업에 특히 잘 맞습니다.

shader-dev는 ShaderToy 스타일의 실시간 비주얼을 위한 실용적인 GLSL 셰이더 스킬입니다. 이 shader-dev 스킬을 사용하면 레이 마칭, SDF 장면, 조명, 파티클, 유체 모션, 후처리, UI 디자인용 shader-dev까지 일반적인 프롬프트보다 훨씬 적은 시행착오로 만들거나 디버깅할 수 있습니다.

remotion 스킬을 사용해 Stitch 프로젝트 화면을 전환, 확대/축소, 텍스트 오버레이가 포함된 세련된 워크스루 영상으로 바꿔 보세요. 설치 단계, 예제 파일, 그리고 영상 편집과 렌더링 준비가 된 컴포지션을 위한 반복 가능한 remotion 가이드가 포함되어 있습니다.

gsap-performance는 Frontend Development를 위한 GSAP 성능 스킬입니다. 렌더링 끊김을 줄이고, 레이아웃 스래싱을 피하며, transform과 opacity를 우선하고, will-change를 적절히 적용하고, 읽기와 쓰기를 배치해 더 부드러운 60fps 애니메이션을 만드는 데 사용하세요. 기존 모션 코드에 대해 실무적인 gsap-performance 활용 가이드가 필요할 때 가장 잘 맞습니다.

gsap-react는 React와 Next.js를 위한 공식 GSAP 스킬입니다. useGSAP(), refs, gsap.context(), 스코프가 적용된 셀렉터, 정리(cleanup)까지 다루어 리렌더나 언마운트 버그 없이 React에 안전한 애니메이션을 만들 수 있게 해줍니다. 프런트엔드 개발에서 설치와 사용법이 필요할 때 이 gsap-react 가이드를 활용하세요.

GSAP 유틸리티 헬퍼용 gsap-utils 스킬입니다: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Frontend Development에서 gsap-utils를 어떻게 쓰는지 배우고, 재사용 가능한 함수 형태를 언제 사용해야 하는지, 헬퍼를 tween과 콜백에 어떻게 자연스럽게 넣는지, 그리고 왜 별도 등록이 필요 없는지 확인하세요.

gsap-plugins는 프론트엔드 개발자가 GSAP 플러그인을 올바르게 선택, 설치, 활용하도록 돕습니다. 플러그인 등록과 import 방법은 물론 ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG 플러그인, easing 도구, GSDevTools까지 실무적으로 다룹니다. 일반적인 애니메이션 조언보다 gsap-plugins에 맞는 명확한 가이드가 필요할 때 유용합니다.

gsap-scrolltrigger는 스크롤 연동 애니메이션, 고정(pinning), 스크럽 동작, 뷰포트 기반 트리거를 위한 GSAP 공식 스킬입니다. gsap-scrolltrigger 가이드, 설치 도움말, 또는 패럴랙스·고정 섹션·스크롤 구동 모션에 대한 실전 사용법이 필요할 때 Frontend Development에 활용하세요.

gsap-timeline은 GSAP 타임라인 시퀀스를 순서가 있는 단계, 겹침, 레이블, 중첩 재생으로 구성하는 데 도움을 줍니다. 여러 애니메이션을 조율해야 할 때, 특히 UI 디자인, 온보딩 흐름, 반복 가능한 모션 시스템에 적합한 gsap-timeline 스킬을 사용하세요. 명확한 순서 제어를 위한 gsap-timeline 설치 및 사용 가이드도 포함되어 있습니다.