스킬 interaction-design

✨

interaction-design

Name: interaction-design
Author: wshobson

안전 ⚙️ 외부 명령어🌐 네트워크 접근

정교한 UI 마이크로인터랙션 및 애니메이션 설계

잘 설계된 마이크로인터랙션, 애니메이션 및 모션 패턴으로 매력적인 사용자 경험을 창출합니다. 이 스킬은 부드러운 전환, 로딩 상태 및 사용자 피드백 메커니즘 구현에 대한 포괄적인 안내를 제공합니다.

지원: Claude Codex Code(CC)

📊 71 적절함

스킬 ZIP 다운로드

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

토글을 켜고 사용 시작

테스트해 보기

"interaction-design" 사용 중입니다. Create a button with a smooth scale hover effect

예상 결과:

Button:hover {
transform: scale(1.05);
}
Button:active {
transform: scale(0.95);
}

"interaction-design" 사용 중입니다. Design a skeleton loading screen

예상 결과:

.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}

보안 감사

안전

v1 • 2/6/2026

Static analysis flagged patterns in markdown documentation files. Evaluation confirms all findings are FALSE POSITIVES caused by the analyzer mistaking markdown syntax (backticks for code formatting) and technical terminology for security-sensitive code patterns. This is a pure documentation/reference skill containing markdown files about interaction design patterns with no executable code.

스캔된 파일

1,781

분석된 줄 수

발견 사항

총 감사 수

높은 위험 문제 (3)

references/animation-libraries.md:9-498 references/microinteraction-patterns.md:7-536 references/scroll-animations.md:5-416 SKILL.md:43-320

False Positive: Markdown Code Formatting Misidentified as Shell Commands

Static analyzer flagged 'Ruby/shell backtick execution' in markdown files. These detections are FALSE POSITIVES caused by markdown syntax using backticks (`) for inline code formatting. This is a documentation skill containing only reference materials about animation libraries and interaction patterns.

SKILL.md:2-6 SKILL.md:14-19 references/scroll-animations.md:127-338

False Positive: Cryptographic Terminology in Documentation

Static analyzer flagged 'weak cryptographic algorithm' patterns. These detections are FALSE POSITIVES triggered by documentation mentioning algorithm names like SHA, MD5 in the context of animation libraries or data processing discussions.

references/animation-libraries.md:409 SKILL.md:324-327

False Positive: Network URLs in Documentation

Static analyzer flagged 'Fetch API call' and 'Hardcoded URL' patterns. These detections are FALSE POSITIVES triggered by reference links to animation libraries and documentation resources in the markdown files.

위험 요인

⚙️ 외부 명령어 (120)

🌐 네트워크 접근 (5)

references/animation-libraries.md:409 SKILL.md:324 SKILL.md:325 SKILL.md:326 SKILL.md:327

감사자: claude

품질 점수

아키텍처

100

유지보수성

콘텐츠

커뮤니티

보안

사양 준수

만들 수 있는 것

버튼 인터랙션에 폴리시 추가하기

버튼과 폼 컨트롤에 대한 섬세한 호버 효과, 클릭 피드백 및 상태 전환을 설계하여 인터페이스가 반응적이고 정교하게 느껴지도록 만듭니다.

매력적인 로딩 경험 창출하기

일반적인 스피너를 즐거운 로딩 애니메이션, 스켈레톤 화면 및 진행 표시기로 대체하여 사용자에게 정보를 제공하고 참여를 유지합니다.

스크롤 기반 스토리텔링 구현하기

콘텐츠를 리빌하고 사용자를 페이지 가이드하며 긴 콘텐츠에 내러티브 모션을 추가하는 스크롤 트리거 애니메이션을 생성합니다.

이 프롬프트를 사용해 보세요

기본 애니메이션 구현

I need to add a smooth hover animation to my button. The button should have a subtle scale up effect on hover and scale back down on release. Please provide the CSS and any JavaScript needed.

로딩 상태 디자인

My application shows a loading spinner while fetching data. The spinner feels generic and jarring. Help me design a more engaging loading experience using skeleton screens or animated placeholders.

스크롤 애니메이션 설정

I want elements on my landing page to fade in and slide up as the user scrolls down. Please show me how to implement scroll-triggered animations using intersection observers.

마이크로인터랙션 시스템

I'm building a design system and need consistent microinteraction patterns. Help me create a cohesive set of interactions for buttons, inputs, cards, and modals that follow the same motion principles.

모범 사례

최적의 지각된 반응성을 위해 애니메이션을 짧게 유지(100-300ms)
자연스러운 모션을 위해 이징 곡선(ease-out, cubic-bezier) 사용
모션 감소를 선호하는 사용자의 경우 애니메이션 감소 또는 비활성화

피하기

간단한 상태 변화에 500ms보다 긴 애니메이션 사용
모든 속성 애니메이션화(성능을 위해 opacity 및 transform에 집중)
모션 감소에 대한 접근성 환경 설정 무시

자주 묻는 질문

마이크로인터랙션에 가장 좋은 애니메이션 지속 시간은 무엇입니까?

마이크로인터랙션은 즉각적으로 느껴야 합니다. 버튼 호버와 같은 간단한 상태 변화에는 100-200ms를 사용하고, 모달 리빌과 같은 복잡한 전환에는 200-400ms를 사용합니다.

애니메이션이 접근 가능하도록 하려면 어떻게 해야 합니까?

prefers-reduced-motion 미디어 쿼리를 사용하여 사용자 환경 설정을 감지합니다. 모션 감소를 요청하는 사용자에게 대안을 제공하거나 애니메이션을 비활성화합니다.

애니메이션에 CSS와 JavaScript 중 어느 것을 사용해야 합니까?

간단한 전환 및 키프레임 애니메이션에는 CSS를 사용합니다. 복잡하거나 인터랙티브하거나 스크롤 트리거되는 애니메이션에는 JavaScript(requestAnimationFrame, Intersection Observer)를 사용합니다.

부드러운 60fps 애니메이션을 어떻게 생성합니까?

transform 및 opacity 속성만 애니메이션화합니다. width, height 또는 margin과 같은 레이아웃 속성은 리플로우를 트리거하므로 피합니다. will-change는 절제해서 사용합니다.

가장 자연스럽게 느껴지는 이징 함수는 무엇입니까?

뷰포트에 들어오는 요소에는 ease-out을 사용하고, 뷰포트 내에서 이동하는 요소에는 ease-in-out을 사용합니다. 사용자 정의 cubic-bezier 곡선이 표준 키워드보다 더 자연스러운 느낌을 제공합니다.

CSS 애니메이션과 애니메이션 라이브러리 중 어떻게 선택합니까?

간단하고 성능이 좋은 애니메이션에는 네이티브 CSS를 사용합니다. 복잡한 타임라인, 물리 기반 애니메이션 또는 고급 시퀀싱이 필요한 경우 Framer Motion, GSAP 또는 anime.js와 같은 라이브러리를 고려합니다.

개발자 세부 정보

작성자

wshobson

라이선스

MIT

리포지토리

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/interaction-design/

참조

main

파일 구조

📁 references/

📄 animation-libraries.md

📄 microinteraction-patterns.md

📄 scroll-animations.md

📄 SKILL.md