Framer Motion

interaction-designスキルは、目的のあるUIモーション、マイクロインタラクション、画面遷移、ローディング状態、フィードバックパターンを設計・実装するための実践的なガイダンスを提供します。React寄りの参考情報と使いどころがまとまっており、チームでの検討や実装判断に役立ちます。

design-taste-frontend-v1 は、高い裁量で進めるフロントエンド作業向けに最初に用意された taste-skill で、厳密な後方互換性のためにそのまま保存されています。React/Next.js を前提にした UI コード生成を支援し、より明確な taste の判断、依存関係の確認、実務的なガードレールを提供します。v2 の実験的なリライトではなく、旧来の挙動が必要なときにこの design-taste-frontend-v1 スキルを使ってください。

frontend-devは、洗練された本番品質のWebページを作るためのフロントエンド開発スキルです。高品質なUI、シネマティックなモーション、AI生成メディア、訴求力のあるコピー、生成アートまでまとめて扱えます。ランディングページ、マーケティングサイト、商品ページ、ダッシュボードなど、デザイン・コンテンツ・実装の整合性が重要なフロントエンド制作に向いています。

frontend-ui-dark-ts は、TypeScript、Tailwind CSS、Framer Motion、再利用可能なデザイントークンを使って、ダークテーマの React UI を構築するのに役立ちます。ダッシュボード、管理画面、分析ビューなど、洗練されたダークな見た目と一貫したコンポーネント設計が求められる情報量の多い画面に適しています。

fixing-motion-performance は、既存のスタックを基本的に変えずに、UI アニメーションのパフォーマンス問題を監査・修正するのに役立ちます。モーションがカクつく、スクロール連動エフェクトが重い、トランジションが layout・paint・compositing を発生させている、といったフロントエンドの課題で使うのに最適です。アニメーションの不具合を、原因が明確なコードレベルの修正へ落とし込めます。