Spree Commerce

UIアニメーションのコードを見直し、動きの目的や速度、表示位置、性能、アクセシビリティを点検。修正案と理由を表にまとめ、承認可否を示すスキル。

• ドロップダウンの動きを点検したいとき
• 頻繁な操作の演出を見直したいとき
• アニメーションの性能確認

UIに動きを加える必要性を判断し、目的や操作頻度に合うアニメーションをコードにするスキル。速度や中断・退出時の動き、動きを抑える設定やタッチ操作への配慮まで扱います。

• ボタンやモーダルに目的のある動きを付けたいとき
• 連続操作や中断に対応する動きを作りたいとき
• 動きを抑える設定やタッチ操作への対応

Appleの設計思想をWebに取り入れ、指に追従するドラッグや慣性のある動きを設計・レビューします。半透明の画面表現、文字組み、動きを抑える設定も扱います。

• 指に追従するドロワーを設計したいとき
• スワイプの勢いを動きに引き継ぎたいとき
• 半透明のレイヤーや文字組みを整えたいとき

通知やグラフ、ドラッグ操作など、作りたい画面の機能に合うライブラリを選びます。既存の依存関係を確認し、用途別の選定リストから理由を添えて一つ推薦します。

• 通知や認証コード入力の部品選び
• リアルタイムや集計用のグラフ選び
• ドラッグ操作や大量リストの道具選び

shadcn/uiの既存部品を探して追加し、フォームや管理画面を組み立てます。プロジェクト設定と資料を確認しながら、不具合修正や見た目の調整、更新を進めます。

• 既存部品でフォームや管理画面を作りたいとき
• レジストリから部品を探して追加したいとき
• 部品の構成やスタイルを修正したいとき

指定したUI部品を、レイアウトや操作方法の異なる複数案として試作します。実際に動かせる画面で案を切り替えて比較し、選んだ案を既存コードへ組み込みます。

• 料金カードのレイアウト比較
• 通知の操作方法の試作
• 長押し削除ボタンの動きの検討

ボタンやメニューなどの見た目と操作感を、利用頻度や目的に合わせて整えます。アニメーションの要否から速度、ドラッグ操作、動きを抑える設定まで具体的に検討します。

• ボタンやメニューの操作感を整えたいとき
• 動きの速度や加減速を選びたいとき
• ドラッグや中断時の挙動を改善したいとき

「ぽんと跳ねて現れる」などの曖昧な説明から、Webアニメーションの用語を探します。似た効果との違いも示し、AIやデザイナーへの依頼に使える言葉に整理します。

• 見かけたアニメーションの名前調べ
• AIへの動きの依頼文作成
• 似ているアニメーション用語の区別

画面やコードからアニメーションを加えると役立つ箇所を探し、頻度・目的・速度・機能で候補を絞ります。実装はせず、具体的な数値と見送り理由を提案します。

• 既存画面に動きを加える箇所の検討
• ダイアログや通知の動きの具体化
• 動きを付けない操作の判断

アプリ全体のアニメーションを調べ、操作感や性能、アクセシビリティの課題を優先順位付きで整理します。別のエージェントに渡せる具体的な改善計画を作ります。

• アプリ全体の動きを点検したいとき
• 改善箇所に優先順位を付けたいとき
• 別のエージェントへ修正を引き継ぐとき