mcpField
I
interaction-design

interaction-design

github.com/hachejデザイン・UI160 回インストール2 日前に更新
リポジトリ

interaction-design について

動きやフィードバック、状態遷移を通じて直感的な UI を設計するスキルです。アニメーションの選択、時間設定、アクセシビリティの指針を示します。

主な機能

  1. 01React 向け Framer Motion の指針
  2. 02CSS アニメーションの性能規則
  3. 03インタラクションにスプリングを採用
  4. 04中断可能なアニメーション
  5. 05視差効果の設定を尊重

活用シーン

  1. 01ボタンやトグルのフィードバック設計
  2. 02モーダルやページ遷移の実装
  3. 03スクロール連動の表示演出

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hachej/boring-stack --skill interaction-design

インストール後、Claude Code で/interaction-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE
references/
animation-libraries.md
microinteraction-patterns.md
scroll-animations.md

詳細

インタラクションデザイン

モーション、フィードバック、細やかな状態遷移を通じて、魅力的で直感的なインタラクションを作成します。

プロジェクトの規約

  • 推奨ライブラリ： React コンポーネントのアニメーションには Framer Motion を使用します
  • CSS アニメーション： 60fps のパフォーマンスを実現するため、transform と opacity のみを使用します
  • スプリング物理： インタラクティブな要素には、線形またはイージングよりもスプリングアニメーションを優先します
  • 中断可能： ユーザーがすべてのアニメーションをキャンセルまたは上書きできるようにします
時間の目安
継続時間使用例
100-150msマイクロフィードバック（ホバー、クリック）
200-300ms小規模な遷移（トグル、ドロップダウン）
300-500ms中規模な遷移（モーダル、ページ切り替え）
500ms+複雑に演出されたアニメーション
アクセシビリティ

常に prefers-reduced-motion: reduce を尊重します。ユーザーが動きを減らす設定を選んでいる場合は、アニメーションの継続時間を 0 に設定します。これは必須です。

参考ファイル

タスクに応じて、以下を必要に応じて読みます。

ファイル読むタイミング
animation-libraries.mdFramer Motion、GSAP、CSS ベースの手法を選択または設定するとき
microinteraction-patterns.mdボタンのフィードバック、トグル、リップル、ローディングインジケーター、トーストを構築するとき
scroll-animations.mdスクロールをトリガーとする表示、パララックス、交差ベースのアニメーションを実装するとき

コメント

Markdown 対応