animate
意図的なアニメーションとマイクロインタラクションの追加
静的なインターフェースは未完成に感じられ、ユーザーをガイドする機会を逃しています。このスキルは、フィードバックを提供し、理解を深め、ユーザーを圧倒することなく楽しいエクスペリエンスを作成するモーションを戦略的に追加するのに役立ちます。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「animate」を使用しています。 ダッシュボードナビゲーションにアニメーションを追加
期待される結果:
メニューアイテムにスムーズなスライドトランジション、ホバー時のスケールエフェクト、ダッシュボードセクション間の切り替え時のクロスフェードアニメーションを追加します。すべてのアニメーションはprefers-reduced-motionを尊重し、60fpsパフォーマンスのためにGPUアクセラレートトランスフォームを使用します。
「animate」を使用しています。 成功状態をより報われるように感じさせる
期待される結果:
控えめなスケールパルスを含む祝祭的なチェックマークアニメーション、ニュートラルから成功の緑への色彩遷移、完了したアクションのためのオプションの紙吹雪エフェクトを追加します。タイミングは、150ミリ秒のフォローアップ遅延を伴うプライマリアニメーションに300-400ミリ秒になります。
セキュリティ監査
安全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.
品質スコア
作れるもの
ユーザーオンボーディングの強化
新しいユーザーがインターフェースの関係と利用可能なアクションを理解するのに役立つ、歓迎的なエントランスアニメーションとガイド付きマイクロインタラクションを追加します。
フォームの使いやすさの向上
フォームをレスポンシブで明確に感じさせる検証フィードバックアニメーション、フォーカス状態、送信確認を追加します。
楽しいプロダクトエクスペリエンスの作成
成功したアクション、空の状態、ナビゲーションなどの主要なインタラクションに意図的なモーションを追加して、記憶に残る洗練されたエクスペリエンスを作成します。
これらのプロンプトを試す
適切なタイミングとイージングカーブで、プライマリアクションボタンにホバー、クリック、ローディング状態を追加します。
ランディングページをレビューし、ユーザーの注意を主要なコンテンツに導くエントランスアニメーションを推奨します。
チェックアウトフォームを分析し、検証フィードバック、フォーカス状態、送信アニメーションを追加します。
アプリケーション全体をレビューし、タイミング、イージングカーブ、アクセシビリティの考慮事項を含む一貫したアニメーション戦略を作成します。
ベストプラクティス
- スムーズな60fpsアニメーションのために、レイアウトプロパティ（width、height、top、left）の代わりにGPUアクセラレートプロパティ（transform、opacity）を常に使用してください
- 動きに敏感なユーザーのアクセシビリティを確保するために、prefers-reduced-motionメディアクエリでテストしてください
- 洗練された感覚のために、デフォルトのCSSイージングの代わりにease-out-quartやease-out-expoなどの自然なイージングカーブを使用してください
回避
- バウンスとエラスティックイージングカーブは古く感じられ、コンテンツではなくアニメーション自体に注意を引くため避けてください
- 目的なしにすべてをアニメーション化しないでください—過度なアニメーションは疲労を作り出し、インパクトを減らします
- フィードバックインタラクションで知覚されるラグを作り出すため、500ミリ秒を超えるアニメーション期間を使用しないでください