micro-interactions-skill は何をしますか？
AIコーディングエージェント向けの専門的なマイクロインタラクションスキル — モバイルアプリ、Webアプリケーション、レスポンシブウェブサイトに対応。20以上のパターン、スプリング物理、イージングカーブ、アクセシビリティ、パフォーマンス。
概要
このスキルは、AIエージェントがマイクロインタラクションを実装するための知識とパターンを提供します。以下のトピックをカバーします：
- スプリングアニメーション: 自然な動きのための物理ベースのアニメーション
- イージングカーブ: 様々な効果のためのCSSイージング関数
- アクセシビリティ:
prefers-reduced-motionの処理とWCAG要件への準拠 - パフォーマンス: アニメーションの最適化とレイアウトスラッシングの回避
パターン
以下のマイクロインタラクションパターンが含まれています：
- ボタン: ホバー、アクティブ、フォーカス状態のアニメーション
- 入力フィールド: フォーカス状態とエラー状態のアニメーション
- ローディング: スピナー、スケルトンスクリーン、プログレスバー
- トランジション: ページ間および要素間のトランジション
- フィードバック: トースト通知、スナックバー、モーダル
使用方法
AIエージェントでこのスキルを使用するには、スキルリポジトリを参照し、必要に応じてパターンを適用します。
# 例: スプリングアニメーションを使用
const animation = spring({ from: 0, to: 1 });
ベストプラクティス
- モーションの軽減を尊重するために常に
prefers-reduced-motionを使用する - アニメーションのパフォーマンスを
will-changeを使用して最適化する - 関連するパターンにはシステムのイージングカーブを使用する