ui-animation
✓이징, 스프링, 레이아웃 애니메이션, 제스처 및 접근성을 통해 세련된 UI 애니메이션을 안내합니다. Tailwind 및 Motion 패턴을 다룹니다. 사용 시기: (1) 들어가기/나가기 애니메이션 구현, (2) 이징 곡선 선택, (3) 스프링 구성, (4) 레이아웃 애니메이션 및 공유 요소, (5) 드래그/스와이프 동작, (6) 마이크로 상호 작용, (7) 선호 감소 모션 접근성 보장. 트리거: 애니메이션, 애니메이션, 여유, 스프링, 전환, 모션, 레이아웃, 제스처, 드래그, 스와이프, 모션 감소, 프레이머 모션.
SKILL.md
Tasteful UI animation with proper timing, accessibility, and performance.
Default: Start with Easing Decision Tree → Duration Guidelines → Implement → Add a11y → Verify
| Micro-interaction | Button press, toggle, checkbox | CSS/Tailwind | | Enter/Exit | Modal, toast, dropdown | Motion + AnimatePresence | | Layout change | Accordion, reorder, expand | Motion layout prop | | Shared element | Tab indicator, card expand | Motion layoutId | | Gesture | Drag, swipe, pull-to-refresh | Motion springs |
이징, 스프링, 레이아웃 애니메이션, 제스처 및 접근성을 통해 세련된 UI 애니메이션을 안내합니다. Tailwind 및 Motion 패턴을 다룹니다. 사용 시기: (1) 들어가기/나가기 애니메이션 구현, (2) 이징 곡선 선택, (3) 스프링 구성, (4) 레이아웃 애니메이션 및 공유 요소, (5) 드래그/스와이프 동작, (6) 마이크로 상호 작용, (7) 선호 감소 모션 접근성 보장. 트리거: 애니메이션, 애니메이션, 여유, 스프링, 전환, 모션, 레이아웃, 제스처, 드래그, 스와이프, 모션 감소, 프레이머 모션. 출처: lukasstrickler/ai-dev-atelier.
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/lukasstrickler/ai-dev-atelier --skill ui-animation- 카테고리
- *크리에이티브
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
ui-animation이란?
이징, 스프링, 레이아웃 애니메이션, 제스처 및 접근성을 통해 세련된 UI 애니메이션을 안내합니다. Tailwind 및 Motion 패턴을 다룹니다. 사용 시기: (1) 들어가기/나가기 애니메이션 구현, (2) 이징 곡선 선택, (3) 스프링 구성, (4) 레이아웃 애니메이션 및 공유 요소, (5) 드래그/스와이프 동작, (6) 마이크로 상호 작용, (7) 선호 감소 모션 접근성 보장. 트리거: 애니메이션, 애니메이션, 여유, 스프링, 전환, 모션, 레이아웃, 제스처, 드래그, 스와이프, 모션 감소, 프레이머 모션. 출처: lukasstrickler/ai-dev-atelier.
ui-animation 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/lukasstrickler/ai-dev-atelier --skill ui-animation 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/lukasstrickler/ai-dev-atelier