animate
Zweckorientierte Animationen und Mikro-Interaktionen hinzufügen
Statische Schnittstellen wirken unvollständig und verpassen Gelegenheiten, Benutzer zu leiten. Diese Fähigkeit hilft Ihnen, strategisch Bewegung hinzuzufügen, die Feedback gibt, das Verständnis verbessert und wunderbare Erlebnisse schafft, ohne Benutzer zu überfordern.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“animate”。 Add animations to our dashboard navigation
预期结果:
Ich füge sanfte Folienübergänge für Menüelemente, einen Skalierungseffekt beim Hover und Crossfade-Animationen beim Wechsel zwischen Dashboard-Abschnitten hinzu. Alle Animationen berücksichtigen prefers-reduced-motion und verwenden GPU-beschleunigte Transforms für 60fps-Leistung.
正在使用“animate”。 Make the success state feel more rewarding
预期结果:
Ich füge eine feierliche Häkchen-Animation mit einem subtilen Skalierungspuls hinzu, einen Farbübergang von neutral zu Erfolgsgrün und einen optionalen Konfetti-Effekt für abgeschlossene Aktionen. Das Timing beträgt 300-400ms für die Hauptanimation mit einer 150ms Nachfolgeverzögerung.
安全审计
安全Static analysis detected 21 potential security issues, all confirmed as false positives after code review. The scanner incorrectly flagged CSS code blocks in documentation as external command execution, and YAML frontmatter/markdown headers as weak cryptography. This is a pure documentation skill file containing animation guidelines and code examples with no executable content or security risks.
质量评分
你能构建什么
Benutzer-Onboarding verbessern
Fügen Sie einladende Eingangsanimationen und geführte Mikro-Interaktionen hinzu, die neuen Benutzern helfen, Schnittstellenbeziehungen und verfügbare Aktionen zu verstehen.
Formular-Benutzerfreundlichkeit verbessern
Fügen Sie Validierungs-Feedback-Animationen, Fokuszustände und Bestätigungen hinzu, die Formulare reaktionsschnell und klar erscheinen lassen.
Wunderbare Produkterlebnisse schaffen
Fügen Sie zweckorientierte Bewegung zu wichtigen Interaktionen wie erfolgreichen Aktionen, leeren Zuständen und Navigation hinzu, um einprägsame, polierte Erlebnisse zu schaffen.
试试这些提示
Fügen Sie Hover-, Klick- und Ladezustände zur primären Aktionsschaltfläche mit entsprechendem Timing und Easing-Kurven hinzu.
Überprüfen Sie die Landingpage und empfehlen Sie Eingangsanimationen, die die Benutzeraufmerksamkeit auf wichtige Inhalte lenken.
Analysieren Sie das Checkout-Formular und fügen Sie Validierungs-Feedback, Fokuszustände und Absende-Animationen hinzu.
Überprüfen Sie die gesamte Anwendung und erstellen Sie eine kohäsive Animationsstrategie mit Timing, Easing-Kurven und Barrierefreiheits-Überlegungen.
最佳实践
- Verwenden Sie immer GPU-beschleunigte Eigenschaften (transform, opacity) anstelle von Layout-Eigenschaften (width, height, top, left) für sanfte 60fps-Animationen
- Testen Sie mit der prefers-reduced-motion Media Query, um Barrierefreiheit für motionsensitive Benutzer sicherzustellen
- Verwenden Sie natürliche Easing-Kurven wie ease-out-quart oder ease-out-expo anstelle des Standard-CSS-Easings für ein poliertes Gefühl
避免
- Vermeiden Sie Bounce- und Elastic-Easing-Kurven, da sie veraltet wirken und die Aufmerksamkeit auf die Animation selbst lenken statt auf den Inhalt
- Animieren Sie niemals alles ohne Zweck—übermäßige Animation ermüdet und verringert die Wirkung
- Verwenden Sie keine Animationsdauern über 500ms für Feedback-Interaktionen, da dies wahrgenommene Verzögerung erzeugt