shadcn-framer
애니메이션 ShadCN 인터페이스 구축
React 팀에는 일관된 UI 컴포넌트가 필요하지만, 동시에 반응성이 뛰어나고 완성도 있게 느껴져야 합니다. 이 skill은 애니메이션 카드, 목록, dialog, 전환, 로딩 상태를 위한 ShadCN 패턴과 Framer Motion 예제를 결합합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"shadcn-framer" 사용 중입니다. ShadCN UI와 Framer Motion을 사용하는 애니메이션 프로필 카드를 요청합니다.
예상 결과:
header, description, content, footer action과 짧은 fade-in 모션 동작이 있는 카드 패턴입니다.
"shadcn-framer" 사용 중입니다. 진입 및 종료 애니메이션이 있는 dialog를 요청합니다.
예상 결과:
dialog content에 scale 및 opacity 전환을 적용하면서 ShadCN 구조를 유지하는 dialog 구성입니다.
"shadcn-framer" 사용 중입니다. dashboard panel의 로딩 상태를 요청합니다.
예상 결과:
은은한 pulse 효과를 위해 muted styling과 반복적인 opacity 변경을 사용하는 skeleton 로딩 패턴입니다.
보안 감사
중간 위험Static external-command hits mostly match Markdown code fences and TypeScript examples, so those are false positives. The setup section does contain real pnpm dlx commands that execute the latest ShadCN package, which is legitimate but carries supply-chain risk if run without review. The weak cryptography alerts are false positives from words such as description and CardDescription, with no cryptographic code found.
중간 위험 문제 (1)
낮은 위험 문제 (2)
위험 요인
⚙️ 외부 명령어 (1)
감지된 패턴
품질 점수
만들 수 있는 것
애니메이션 컴포넌트 프로토타입 제작
간단한 Framer Motion 전환을 사용해 빠른 ShadCN 컴포넌트 프로토타입을 만듭니다.
모션 패턴 표준화
인터페이스 전반에서 dialog, 카드, 목록, 페이지 전환을 위한 공유 예제를 사용합니다.
UI 피드백 상태 개선
제품 화면이 더 반응성 있게 느껴지도록 hover, tap, 로딩 애니메이션을 추가합니다.
이 프롬프트를 사용해 보세요
이 skill을 사용하여 사용자 프로필 뷰용 Framer Motion fade-in 애니메이션이 있는 ShadCN 카드를 만드세요.
이 skill을 사용하여 항목이 staggered motion으로 들어오고 부드럽게 종료되는 애니메이션 ShadCN 목록을 설계하세요.
이 skill을 사용하여 dialog API를 유지하면서 콘텐츠가 Framer Motion으로 열리고 닫히도록 ShadCN dialog를 조정하세요.
이 skill을 사용하여 카드, dialog, 페이지 전환, skeleton, hover 상태, 목록 애니메이션을 위한 재사용 가능한 모션 패턴을 정의하세요.
모범 사례
- 프로덕션 저장소에서 설정 명령을 실행하기 전에 package version을 고정하세요.
- 관련 컴포넌트 전반에서 모션 duration을 짧고 일관되게 유지하세요.
- 애니메이션을 추가한 후 접근성 동작, focus 처리, reduced-motion 기본 설정을 확인하세요.
피하기
- 민감하거나 잠긴 저장소에서 @latest 설정 명령을 무작정 실행하지 마세요.
- focus management 또는 escape behavior를 깨뜨리는 방식으로 dialog 구조를 애니메이션 처리하지 마세요.
- 콘텐츠가 이동할 수 있는 밀집된 레이아웃에 큰 hover scale 효과를 적용하지 마세요.