スキル自身の言葉で
このスキルは、コーディングエージェントに、Emil Kowalski のデザインエンジニアリングの判断力をインターフェース作業のために与えます。何かをアニメーションさせるべきかどうか、どのイージングとデュレーションを使うべきか、そして応答性を感じさせるコンポーネントをどう構築するかを判断できるようになります。厳格なデフォルトを設定します — UI アニメーションは300ms未満、組み込みの CSS イージングではなくカスタムの cubic-bezier カーブを使用、ease-in は絶対に使わない、scale(0) のエントランスは絶対に使わない、ポップオーバーはトリガーからスケールする、といった内容です。
また、スプリング、clip-path テクニック、ドラッグとジェスチャーの処理、GPU パフォーマンスのルール、reduced motion、そしてコードレビュー用の必須の Before/After markdown 表もカバーしています。汎用的なアニメーションのアドバイスではなく、センスに基づいたインターフェースの判断を求めるデザイナーや開発者向けです。
生成されるもの
- Before、After、Why の列を持つ markdown レビュー表で、見つかった問題ごとに1行が対応します。
- 推奨されるカスタムイージングカーブを保持する、そのまま貼り付け可能な CSS 変数。
- Apple スタイルまたは従来の物理パラメータのいずれかによるスプリング設定オブジェクト。
- レビューチェックリストのカテゴリから導き出された、優先順位付けされた修正リスト。
仕組み
- 01頻度に応じてアニメーションをゲートする
アニメーションのコードを書く前に、ユーザーがそのインタラクションにどのくらいの頻度で遭遇するかを判断します。
- 02目的を明確にする
すべてのアニメーションは、なぜアニメーションするのかについて、有効なリストの中から答えを出す必要があります: 空間的な一貫性、状態の表示、説明、フィードバック、または急激な変化を防ぐこと。
- 03カスタムカーブを選ぶ
要素が出現するか、退場するか、移動するか、あるいは色だけが変化するかによってイージングを選び、組み込みのカーブをより強いカスタム cubic-bezier に置き換えます。
- 04デュレーションを設定する
表内の要素タイプにデュレーションを合わせます — ボタン押下は100-160ms、ドロップダウンは150-250ms、モーダルは200-500ms — そしてUIは300msの上限を超えないようにします。
- 05コンポーネントのデフォルトを適用する
ボタンは:activeで0.97にスケールし、エントランスはscale(0)ではなくopacityを併用して0.95から始まり、ポップオーバーはトリガーからスケールし、モーダルは中央に固定されたままにします。
- 06スプリングが効果を発揮する場面で使用する
スプリングは、モメンタムのあるドラッグ、中断可能なジェスチャー、意図的に装飾的なインタラクションに適しています。