animate

機能を分析し、理解を深め、フィードバックを提供し、喜びを生み出すアニメーションとマイクロインタラクションを戦略的に追加します。

必須準備

frontend-design スキルを使用します。このスキルにはデザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。進める前にこのプロトコルに従ってください。デザインコンテキストがまだ存在しない場合は、必ず teach-impeccable を実行してください。さらに、パフォーマンス制約を収集してください。

アニメーション機会の評価

モーションがエクスペリエンスを改善するポイントを分析します。

1. 静的な領域を特定:

   • フィードバック不足: ビジュアル確認がないアクション(ボタンクリック、フォーム送信など)
   • ぎこちない遷移: 急に感じる瞬間的な状態変化(表示/非表示、ページロード、ルート変更)
   • 不明確な関係性: 空間的または階層的な関係性が明らかでない
   • 喜びの欠如: 機能的だが味気ないインタラクション
   • ガイダンスの見落とし: ユーザーの注意を誘導したり、動作を説明したりする機会

2. コンテキストを理解:

   • パーソナリティはどう?(遊び心がある vs 真面目、エネルギッ

...