스킬 interaction-design
✨
interaction-design
안전 ⚙️
외부 명령어🌐
네트워크 접근
Polierte UI-Mikrointeraktionen und Animationen entwerfen
Erstellen Sie ansprechende Benutzererfahrungen mit sorgfältig entworfenen Mikrointeraktionen, Animationen und Bewegungsmustern. Diese Skill bietet umfassende Anleitung zur Implementierung reibungsloser Übergänge, Ladezustände und Benutzerrückmeldungsmekanismen.
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"interaction-design" 사용 중입니다. Erstellen Sie einen Button mit glatter Skalierung-Hover-Effekt
예상 결과:
- Button:hover {
- transform: scale(1.05);
- }
- Button:active {
- transform: scale(0.95);
- }
"interaction-design" 사용 중입니다. Entwerfen Sie einen Skelett-Ladebildschirm
예상 결과:
- .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.
4
스캔된 파일
1,781
분석된 줄 수
5
발견 사항
1
총 감사 수
높은 위험 문제 (3)
references/animation-libraries.md:9-498references/microinteraction-patterns.md:7-536references/scroll-animations.md:5-416SKILL.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.
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.
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)
references/animation-libraries.md:9-59 references/animation-libraries.md:59-63 references/animation-libraries.md:63-106 references/animation-libraries.md:106-110 references/animation-libraries.md:110-143 references/animation-libraries.md:143-147 references/animation-libraries.md:147-175 references/animation-libraries.md:175-183 references/animation-libraries.md:183-228 references/animation-libraries.md:228-232 references/animation-libraries.md:232-284 references/animation-libraries.md:284-288 references/animation-libraries.md:288-318 references/animation-libraries.md:318-322 references/animation-libraries.md:322-347 references/animation-libraries.md:347-349 references/animation-libraries.md:349-351 references/animation-libraries.md:351-357 references/animation-libraries.md:357-391 references/animation-libraries.md:391-397 references/animation-libraries.md:397-417 references/animation-libraries.md:417-420 references/animation-libraries.md:420-440 references/animation-libraries.md:440-446 references/animation-libraries.md:446-464 references/animation-libraries.md:464-468 references/animation-libraries.md:468-498 references/microinteraction-patterns.md:7-53 references/microinteraction-patterns.md:53-68 references/microinteraction-patterns.md:68-72 references/microinteraction-patterns.md:72-108 references/microinteraction-patterns.md:108-132 references/microinteraction-patterns.md:132-138 references/microinteraction-patterns.md:138-168 references/microinteraction-patterns.md:173-180 references/microinteraction-patterns.md:180-184 references/microinteraction-patterns.md:184-203 references/microinteraction-patterns.md:205-219 references/microinteraction-patterns.md:219-223 references/microinteraction-patterns.md:223-239 references/microinteraction-patterns.md:245-254 references/microinteraction-patterns.md:254-260 references/microinteraction-patterns.md:260-296 references/microinteraction-patterns.md:302-318 references/microinteraction-patterns.md:318-322 references/microinteraction-patterns.md:322-353 references/microinteraction-patterns.md:355-371 references/microinteraction-patterns.md:371-377 references/microinteraction-patterns.md:377-392 references/microinteraction-patterns.md:394-410 references/microinteraction-patterns.md:410-414 references/microinteraction-patterns.md:414-444 references/microinteraction-patterns.md:444-450 references/microinteraction-patterns.md:450-474 references/microinteraction-patterns.md:474-495 references/microinteraction-patterns.md:495-499 references/microinteraction-patterns.md:499-536 references/scroll-animations.md:5-51 references/scroll-animations.md:53-59 references/scroll-animations.md:59-63 references/scroll-animations.md:63-81 references/scroll-animations.md:81-87 references/scroll-animations.md:87-102 references/scroll-animations.md:102-106 references/scroll-animations.md:106-137 references/scroll-animations.md:137-143 references/scroll-animations.md:143-171 references/scroll-animations.md:171-175 references/scroll-animations.md:175-186 references/scroll-animations.md:186-206 references/scroll-animations.md:206-212 references/scroll-animations.md:212-232 references/scroll-animations.md:232-236 references/scroll-animations.md:236-257 references/scroll-animations.md:257-261 references/scroll-animations.md:261-276 references/scroll-animations.md:276-280 references/scroll-animations.md:280-310 references/scroll-animations.md:310-314 references/scroll-animations.md:314-343 references/scroll-animations.md:343-347 references/scroll-animations.md:347-366 references/scroll-animations.md:366-368 references/scroll-animations.md:368-383 references/scroll-animations.md:383-387 references/scroll-animations.md:387-389 references/scroll-animations.md:391-416 SKILL.md:43-49 SKILL.md:49-53 SKILL.md:53-69 SKILL.md:69-77 SKILL.md:77-87 SKILL.md:87-91 SKILL.md:91-98 SKILL.md:98-104 SKILL.md:104-110 SKILL.md:110-117 SKILL.md:120-130 SKILL.md:130-136 SKILL.md:136-154 SKILL.md:154-160 SKILL.md:160-191 SKILL.md:191-197 SKILL.md:197-214 SKILL.md:214-220 SKILL.md:220-257 SKILL.md:257-261 SKILL.md:261-272 SKILL.md:272-276 SKILL.md:276-287 SKILL.md:287-289 SKILL.md:289-302 SKILL.md:302-306 SKILL.md:306 SKILL.md:306-307 SKILL.md:307-316 SKILL.md:316 SKILL.md:316 SKILL.md:316 SKILL.md:316-320
감사자: claude
품질 점수
45
아키텍처
100
유지보수성
87
콘텐츠
25
커뮤니티
75
보안
91
사양 준수
만들 수 있는 것
Hinzufügen von Polish zu Button-Interaktionen
Entwerfen Sie subtile Hover-Effekte, Klick-Feedback und Zustandsübergänge für Buttons und Formularsteuerelemente, die Ihr Interface responsiv und poliert wirken lassen.
Erstellung ansprechender Ladeerfahrungen
Ersetzen Sie generische Spinner durch ansprechende Ladeanimationen, Skelettbildschirme und Fortschrittsanzeigen, die Benutzer informiert und engagiert halten.
Implementierung von scrollbasiertem Storytelling
Erstellen Sie scrollausgelöste Animationen, die Inhalte enthüllen, Benutzer durch Seiten führen und narrative Bewegung zu langen Texten hinzufügen.
이 프롬프트를 사용해 보세요
Grundlegende Animationseinführung
Ich möchte eine glatte Hover-Animation zu meinem Button hinzufügen. Der Button sollte einen subtilen Skalierungseffekt beim Hover haben und beim Loslassen wieder zurückskalieren. Bitte geben Sie mir das CSS und den benötigten JavaScript-Code.
Ladezustandsdesign
Meine Anwendung zeigt einen Lade-Spinner während des Datenabrufs. Der Spinner wirkt generisch und störend. Helfen Sie mir, eine ansprechendere Ladeerfahrung mit Skelettbildschirmen oder animierten Platzhaltern zu entwerfen.
Scroll-Animationseinrichtung
Ich möchte, dass Elemente auf meiner Landing-Page beim Scrollen einblenden und nach oben gleiten. Zeigen Sie mir bitte, wie ich scrollausgelöste Animationen mit Intersection Observern implementiere.
Mikrointeraktionssystem
Ich baue ein Designsystem und benötige konsistente Mikrointeraktionsmuster. Helfen Sie mir, einen kohärenten Satz von Interaktionen für Buttons, Eingaben, Karten und Modals zu erstellen, die die gleichen Bewegungsprinzipien befolgen.
모범 사례
- Halten Sie Animationen kurz (100-300 ms) für optimale wahrgenommene Reaktivität
- Verwenden Sie Easing-Kurven (ease-out, cubic-bezier) für natürliches Bewegungsempfinden
- Reduzieren oder deaktivieren Sie Animationen für Benutzer, die reduzierte Bewegung bevorzugen
피하기
- Verwenden von Animationen über 500 ms für einfache Zustandsänderungen
- Animieren aller Eigenschaften (fokussieren Sie sich auf Opazität und Transform für die Leistung)
- Ignorieren von Barrierefreiheitspräferenzen für reduzierte Bewegung
자주 묻는 질문
Was sind die besten Animationsdauern für Mikrointeraktionen?
Mikrointeraktionen sollten sich sofort anfühlen. Verwenden Sie 100-200 ms für einfache Zustandsänderungen wie Button-Hovers und 200-400 ms für komplexere Übergänge wie Modal-Enthüllungen.
Wie stelle ich sicher, dass Animationen barrierefrei sind?
Verwenden Sie das prefers-reduced-motion Media Query, um Benutzerpräferenzen zu erkennen. Bieten Sie Alternativen oder deaktivieren Sie Animationen für Benutzer, die reduzierte Bewegung angefordert haben.
Soll ich CSS oder JavaScript für Animationen verwenden?
Verwenden Sie CSS für einfache Übergänge und Keyframe-Animationen. Verwenden Sie JavaScript (requestAnimationFrame, Intersection Observer) für komplexe, interaktive oder scrollausgelöste Animationen.
Wie erstelle ich glatte 60-fps-Animationen?
Animieren Sie nur die transform- und opacity-Eigenschaften. Vermeiden Sie das Animieren von Layouteigenschaften wie width, height oder margin, die Reflows auslösen. Verwenden Sie will-change sparingly.
Welche Easing-Funktionen fühlen sich am natürlichsten an?
Verwenden Sie ease-out für Elemente, die in den Viewport eintreten, und ease-in-out für Elemente, die sich innerhalb des Viewports bewegen. Benutzerdefinierte cubic-bezier-Kurven bieten einen natürlicheren Gefühl als Standard-Schlüsselwörter.
Wie wähle ich zwischen CSS-Animationen und Animationsbibliotheken?
Verwenden Sie natives CSS für einfache, leistungsstarke Animationen. Erwägen Sie Bibliotheken wie Framer Motion, GSAP oder anime.js, wenn Sie komplexe Zeitlinien, physikbasierte Animationen oder fortgeschrittenes Sequenzieren benötigen.