Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,770 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
ユーザーが「スクロールアニメーションを作る」「ScrollTrigger を追加する」「スクロール中にセクションを固定する」「スクロールに合わせてアニメーションを再生する」「ヒーローのタイムラインを作る」「横スクロールのセクションを作る」「テキストを分割して単語をアニメーションさせる」「GSAP Flip でレイアウト変更をアニメーションさせる」「ScrollTrigger を Lenis と同期する」「Lenis のスムーススクロールがガタつく」「ScrollTrigger のマーカーがずれる」「Lenis/Locomotive 使用時に ScrollTrigger の固定が壊れる」、または「GSAP の固定機能を使ってスムーススクロールを設定する」と依頼した場合に使用します。コード駆動のウェブアニメーション向けに、GSAP タイムライン、ScrollTrigger、SplitText、Flip、Lenis/Locomotive のスムーススクロール同期を扱います。
Locomotive Scroll のスムーズスクロールライブラリに関する総合スキル。パララックス効果、ビューポート検出、スクロール駆動アニメーションを扱う。スムーズスクロール体験の実装、パララックス効果の作成、スクロール発火アニメーションの構築、没入感のあるスクロールサイトの開発時に使う。Locomotive Scroll、スムーズスクロール、パララックス、スクロール検出、スクロールイベント、スティッキー要素、横スクロール、GSAP ScrollTrigger の統合などに関するタスクで発動する。先進的なスクロール駆動アニメーションのために GSAP と統合できる。
**必須の前提条件** — `get_design_context` Figma MCPツールを呼び出す前に、必ずこのスキルを呼び出してください。ユーザーがFigmaデザインの実装、構築、移植、コード化を希望する場合は、必ずこのスキルを起動してください。プロンプト例（これらに限りません）：「implement this Figma design」「build this screen from Figma」「turn this Figma into code」「design to code」。このスキルは、Figmaデザインをコードとして正しく実装するための重要な手順をエージェントに提供するため、省略してはいけません。
ユーザーが「グラスモーフィズム効果を追加」「すりガラス風 UI」「Apple のリキッドグラス風」「すりガラスのぼかしカード」「半透明ガラスパネルのアニメーション」「すりガラスのナビバーを作成」「ガラス風モーダル／ダイアログを構築」「ホバー時にガラスカードをアニメーション」「屈折するリキッドグラスのヒーローを追加」と依頼した場合に使用します。backdrop-filter のぼかしを使った半透明パネル、エッジ／鏡面ハイライト、SVG によるリキッドグラスの屈折、ホバー／スクロール／表示時の動き、アクセシビリティに配慮した透明度低減時の代替表示を扱います。
物理ベースのアニメーションライブラリ。React Spring（スプリングダイナミクス、ジェスチャー統合、60fps アニメーション）と Popmotion（低レベルで組み合わせ可能なアニメーションユーティリティ、リアクティブストリーム）を融合しています。流れるような自然な体感の UI アニメーション、ジェスチャー駆動のインターフェース、物理シミュレーション、スプリングを用いたインタラクションの構築に利用できます。React Spring のフック、スプリング物理、慣性スクロール、物理ベースのモーション、アニメーションの組み合わせ、自然な UI モーションを扱うタスクで呼び出されます。motion-framer に対する代替の物理ベースのアプローチで、より物理的に正確なアニメーションを実現します。
ユーザーが「ページやルートの切り替えをアニメーション化」「ビュー間にページ遷移やクロスフェードを追加」「Next.js App Router のルート変更をアニメーション化」「View Transitions API を使用」「ナビゲーション時に AnimatePresence の exit が発火しない」「Framer Motion の exit アニメーションが動かない／Next.js でアンマウント前に exit アニメーションを実行」と依頼した場合に使用します。View Transitions API と Framer Motion を使用した、Next.js App Router および一般的な SPA ルーティング向けのページ遷移アニメーション（入場／退出）を扱います。
AOS (Animate On Scroll) を使ったシンプルなスクロール連動の表示アニメーション。マーケティングページ、ランディングページ、内容の多いサイトで、複雑なアニメーション制御なしに基本的なフェード/スライド効果が必要な場合に使います。スクロールアニメーション、スクロール連動の表示、AOS、シンプルなアニメーション、基本的なスクロール効果に関するタスクで起動します。よりシンプルな用途では GSAP ScrollTrigger や Locomotive Scroll の代替になります。React 専用アニメーションについては motion-framer と比較してください。
Web 開発向けに画像を処理します。サイズ変更、トリミング、余白の削除、フォーマット変換（PNG/WebP/JPG）、ファイルサイズの最適化、サムネイル生成、OG カード画像の作成に対応します。Pillow（Python）を使用するため ImageMagick は不要です。'resize image'、'convert to webp'、'trim logo'、'optimise images'、'make thumbnail'、'create OG image'、'crop whitespace'、'process image'、'image too large' などで発動します。
Web サイト、アプリ、管理画面、コンポーネントの UI を設計・改善・レビューします。デザインの方向性を探り、複数スタイルを並べた比較ページを生成し、実際のスクリーンショットを基にビジュアル階層を磨きます。依頼に応じて比較ページ、デザイン説明、デザイン案、実行可能な UI を納品します。デザイン判断のみを担当し、純粋なビジネスロジック、API 構築、UI 変更を伴わないコード整理、変更内容が完全に明確な定型修正（文言変更、数値調整、指定要素の削除、既存スタイルの再利用など。「最適化」と呼ばれていても同様）には使用しません。oil-ui-pro がインストール済みの場合は oil-ui-pro に委任します。
強く際立った LOCKED 人心的デザイン言語と、そのまま実装できる UX/UI 仕様を `.ulpi/design/` に書き出します。 briefs ごとのビジュアルアイデンティティ（配色、書体、シグネチャー）、土台となるデザインシステム、ユーザーフローと状態、コンポーネント仕様、アクセシビリティ要件を含みます。大胆なumabda な美学的方向性を定め、「AI 特有のualmente作業」 を名指しで禁じ、アイデンティティをロックしてすべての画面と以降のセッションで一貫性を保ちます。 browse スキルでインスピレーションリンクを訪問し、実際のデザイン DNA を抽出することもできます。最後は委譲されたエンジニアリングエージェントが実装するビルドハンドオフを出力します。本スキルは仕様書のみを生成し、実運用向けの UI コードは生成しません。新機能、リstrut̄ット transactしたデザインirming需要、設計システム(It means design-system work) などで使用します。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。