Communitygithub.com

jakubantalik/transitions-dev

웹 앱을 위한 프로덕션 준비 완료 CSS 전환(transition)입니다. 알림 배지, 드롭다운, 모달, 패널 표시, 페이지 전환, 카드 크기 조정, 숫자 팝인, 텍스트 교체, 아이콘 교체, 성공 확인, 아바타 그룹 호버, 오류 상태 흔들림, 검색/입력 지우기, 스켈레톤 로더, 쉬머 텍스트, 슬라이딩 탭, 툴팁 또는 지연 텍스트 표시를 구현할 때 사용합니다.

transitions-dev란 무엇인가요?

이 스킬은 웹 애플리케이션에 프로덕션 수준의 CSS 전환을 손쉽게 추가할 수 있도록 설계되었습니다. 알림 배지, 드롭다운, 모달, 패널, 페이지 전환, 카드 리사이즈, 숫자 애니메이션, 텍스트/아이콘 교체, 성공 체크, 아바타 그룹 호버, 오류 셰이크, 검색창 클리어, 스켈레톤 로더, 쉬머 텍스트, 슬라이딩 탭, 툴팁, 지연 텍스트 등 다양한 UI 요소에 자연스러운 애니메이션을 적용할 수 있습니다. '전환 추가', '드롭다운 애니메이션', '모달 부드럽게 열기', '아이콘 교체', '페이지 슬라이드', '스태거 애니메이션', '열기/닫기 전환', '페이드', '성공 애니메이션', '폼 오류', '유효하지 않음 흔들림', '호버 시 들림', '아바타 스택 호버', '검색 지우기', '스켈레톤 로더', '로딩 쉬머', '쉬머 텍스트', '슬라이딩 탭', '세그먼티드 컨트롤', '툴팁', '텍스트 표시'와 같은 자연어 명령어로 트리거됩니다. 개발자는 복잡한 CSS 애니메이션 로직을 직접 작성할 필요 없이, 간단한 설명만으로 즉시 사용 가능한 전환 효과를 얻을 수 있습니다. 이는 Claude Code, Cursor, Codex 등 주요 AI 에이전트 플랫폼에서 작동하며, SKILL.md 문서를 기반으로 일관된 애니메이션 패턴을 제공합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jakubantalik/transitions.dev/tree/main/skills/transitions-dev

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

transitions-dev은(는) 무엇을 하나요?

웹 앱을 위한 프로덕션 준비 완료 CSS 전환입니다. 알림 배지, 드롭다운, 모달, 패널 표시, 페이지 전환, 카드 크기 조정, 숫자 팝인, 텍스트 교체, 아이콘 교체, 성공 확인, 아바타 그룹 호버, 오류 상태 흔들림, 검색/입력 지우기, 스켈레톤 로더, 쉬머 텍스트, 슬라이딩 탭, 툴팁 또는 지연 텍스트 표시를 구현할 때 사용합니다. "전환 추가", "드롭다운 애니메이션", "모달 부드럽게 열기", "아이콘 교체", "페이지 슬라이드", "스태거 애니메이션", "열기/닫기 전환", "애니메이션 적용", "페이드 전환", "성공 애니메이션", "폼 오류", "유효하지 않음 흔들림", "호버 시 들림", "아바타 스택 호버", "검색 지우기", "스켈레톤 로더", "로딩 쉬머", "쉬머 텍스트", "슬라이딩 탭", "세그먼티드 컨트롤", "툴팁", "텍스트 표시"와 같은 명령어로 트리거됩니다. 또한 transitions reveal, transitions review, transitions apply, transitions refine 명령어도 지원합니다.

관련 스킬