スキル一覧

自動発動スキルとフレームワーク検出を備えたインフラキット。Tailwind CSSキットはv4ユーティリティ、レスポンシブデザイン、テーマをカバー。6フック、6エージェント、6コマンド搭載。

React Three Fiber（Three.jsのReactレンダラー）用の11モジュールスキル。3Dオブジェクトアニメーション、シェーダーアニメーション、インタラクションアニメーション、物理ベースアニメーション、ポストプロセッシングエフェクトをカバー。

Motion.dev（Framer Motion後継）向けのWebアニメーション実装スキル。ヒーロー、スクロール演出、ジェスチャー、マイクロインタラクション、テンプレート実装までをカバー。

Disneyの12原則を実践に落とし込むClaude Code向けアニメーションスキル集。UIマイクロインタラクション、ゲーム演出、ローディング状態、モーションシーケンスまで幅広い文脈で適用できる144スキルを提供。

Next.js/React向けアニメーション実装スキル。Emil Kowalskiのモーション設計知見をベースに、ホバー、トースト、モーダルなど実践例を含む。

WCAG 2.1/2.2（Level A〜AAA）、ビジュアルデザイン（レイアウト、タイポグラフィ、色彩理論）、UXヒューリスティクス、レスポンシブ対応、デスクトッププラットフォーム固有パターンをカバーする包括的デザイン評価スキル。

「Refactoring UI」書籍に基づくデザインスキル。定義済みスペーシングスケール、HSLベースカラーシステム、標準化シャドウレベル。/ui-refactorコマンド付き。

Anime.js v4向けのClaude Codeスキル。タイムライン、イージング、シーケンス制御を使った軽量JavaScriptアニメーション実装を支援。

包括的なWebアニメーションスキル。Framer Motion、CSSアニメーション、ページトランジション、ホバーインタラクション、スクロールアニメーション、ローディング状態（スピナー、スケルトン）、ドラッグ＆ドロップ、モーダル/ダイアログトランジション、ボタンフィードバックなどマイクロインタラクション全般をカバー。

Figmaデザインからプロダクションレディなコードを自動生成するスキル。Figma MCP統合、コンポーネント再利用の優先、バリアント→Propマッピング、TypeScript型安全性、アクセシビリティサポート内蔵。

マルチモーダルAIビジュアルテストプラグイン。Claude 4.5 Sonnetのビジョン機能でスクリーンショット分析。アクセシビリティ（WCAG 2.1）、パフォーマンス、レスポンシブデザインを含む10カテゴリのテスト。