Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
YouTube サムネイル、動画/ポッドキャスト/コースのカバー、ブログヘッダー、Open Graph（リンクプレビュー）画像を、Gemini 3.1 Flash の画像生成（デフォルト）または HTML/CSS で作成する。高コントラスト、小サイズでの可読性、クリック率に最適化。画像が動画、エピソード、記事を表す場合に使用。フィード投稿には social-media-graphic を、有料広告には ad-creative-design を使用。トリガーフレーズ：「design a thumbnail」「YouTube thumbnail」「video thumbnail」「article header image」「OG image」「create a thumbnail」「blog header」「video cover image」。
@visactor/vtable 向けの開発アシスタント。ユーザーが VTable/ListTable/PivotTable/PivotChart、columns/rows/indicators、cellType、style/theme、カスタムレンダリング(customRender)/カスタムレイアウト(customLayout/JSX)、イベント(table.on)、records/dataSource、インタラクション(選択/hover/編集/ソート/ドラッグ&ドロップ/スクロール)、または API の使い方やトラブルシューティングに言及したとき、ルーティングに従って references/knowledge と references/type を読み込み、実行可能な TypeScript の例とそのまま差し替えられる設定スニペットを出力し、必要に応じてパフォーマンスとリソース解放(table.release)の提案を行う。
Bagisto の Appearance 領域を扱うときに使用する — テーマセクション、セクションエディターとそのストアフロントプレビュー、下書きと公開の挙動、セクションメディア、テーマギャラリー。トリガーフレーズには "section"、"theme section"、"appearance"、"preview"、"draft"、"publish"、"unsaved changes"、"storefront layout"、"theme gallery"、"customize theme" が含まれる。
Expo / React Native iOS アプリを非ネイティブなパターン（Material コンポーネントキット、ネイティブの stack/tabs の代わりに JS ナビゲーター、PanResponder、フォントスケーリングの無効化、ハードコードされた 16 進カラー、仮想化されていないリスト）について静的スキャンし、各違反を file:line とルールへのリンク付きで報告する。ユーザーが Expo iOS アプリの HIG 準拠や "native feel" についてチェック、lint、監査、レビューを求めたとき、または Expo iOS UI を出荷/マージする前にトリガーする。expo-ios-hig ルール スキル（そのスキルが教える内容をチェックする）および expo-ios-screen-scaffolder と組み合わせて使用する。
Figma ノード上のデザイナー注釈の読み書き — プロパティ（塗り、幅、fontSize など）を固定し、プレーンまたは markdown のノートを保持するノードレベルのデザイン仕様。ユーザーがノードに直接付与されたインタラクション仕様、アニメーションのタイミング、イージング、アクセシビリティ要件、実装ノートを文書化または確認したいときに使用する。トリガー：'注釈を追加'、'このノード/コンポーネントに注釈を付ける'、'…の注釈を読む'、'この要素に固定されている仕様は何か'、'注釈カテゴリを一覧する'、'Figma でこのボタンのフォーカス動作を文書化する'。注釈はコメント（設計プロパティに固定される）とも description フィールドとも異なる。Figma Desktop アプリ（Plugin API）が必要。
Figma からコードへのデザインハンドオフパターン。Figma Variables からデザイントークンへのパイプライン、コンポーネントスペックの抽出、Dev Mode での検査、Auto Layout から CSS Flexbox/Grid へのマッピング、Applitools によるビジュアルリグレッションを含む。Figma デザインをコードに変換するとき、コンポーネントスペックを文書化するとき、デザインと開発のワークフローを構築するとき、本番 UI を Figma デザインと比較するときに使用。
Power BI レポート設計の規範。デザインアイデンティティ、視覚的階層と 3-30-300 ルール、レイアウト/余白/整列、色彩の規律、グラフ選択、KPI とカードの設計、テーブルとマトリックス、アクセシビリティ、そして最終デザインゲートを扱う。レポート設計の判断に関する共有リファレンスの拠点であり、create-pbi-report、pbir-cli、review-report、modifying-theme-json、custom-visual の各 skill から参照される。デザインアイデンティティを確定するとき、またはレポートのデザイン、レイアウト、色彩、グラフ選択、アクセシビリティの判断を行うときに読み込む。
Tailwind CSS v4 と shadcn/ui で UI を構築します。OKLCH カラーの CSS 変数、CVA によるコンポーネントバリエーション、レスポンシブデザイン、ダークモード、Tailwind v4.2 の機能を扱います。Radix UI と Base UI のプリミティブ、CLI 3.0、ビジュアルスタイルをサポートします。Tailwind でインターフェースを構築するとき、shadcn/ui コンポーネントをスタイリングするとき、テーマを実装するとき、ユーティリティファースト CSS を扱うときに使用します。トリガー：tailwind、shadcn、ユーティリティクラス、CSS 変数、OKLCH、コンポーネントのスタイリング、テーマ設定、ダークモード、radix ui。
Syncfusion WPF GridControl を実装するための完全ガイド — Windows Presentation Foundation アプリ向けの Excel ライクなセルベースの仮想グリッド。WPF GridControl や Syncfusion のグリッドコンポーネントを扱うときに使用し、セル型、仮想グリッド、数式セル、クリップボード操作、Excel のインポート/エクスポートを扱います。QueryCellInfo イベント、GridStyleInfo、GridModel、行/列の管理、デスクトップアプリの外観カスタマイズを網羅します。
@theme inline パターンと CSS 変数アーキテクチャを使用して、Tailwind v4 と shadcn/ui をセットアップする。4 ステップの必須パターン：ルートで CSS 変数を定義し、Tailwind ユーティリティにマッピングし、ベーススタイルを適用し、自動ダークモードを取得する。使用場面：Tailwind v4 で React プロジェクトを初期化するとき、shadcn/ui のダークモードを設定するとき、色が反映されない、テーマが適用されない、CSS 変数が壊れている、tw-animate-css のエラー、v3 からの移行といった問題を修正するとき。
`agent-browser` と `agent-browser eval` で実際の Web サイトを詳細に検査し、その視覚言語、レイアウトシステム、インタラクションパターン、コンテンツスタイルを構造化された markdown デザインシステムに統合して、再利用可能な design.md または DESIGN.md を生成する。1 つ以上の Web サイト URL が与えられ、サイトの分析、設計のリバースエンジニアリング、ルックアンドフィールの抽出、DESIGN.md の作成、スタイルガイドの作成、または後続の AI 支援による設計や実装のためにサイトの UI ルールを記録するよう求められた場合に使用する。目標がコードでページを再構築することではなくドキュメント化である場合にこの skill を優先する。常に `agent-browser` を主要なブラウザランタイムとして使用し、それが存在しない場合は、プラットフォームやブラウザスタックを切り替えるのではなく、ユーザーがインストールまたは公開できるよう支援する。
Bagisto の管理画面一覧ページを構築または変更する際に使用する — 列、検索、フィルター、並べ替え、行アクション、一括アクション、エクスポートを備えた DataGrid クラスと、それを描画するコントローラーおよび Blade ビュー。トリガーフレーズには "datagrid"、"admin listing"、"add a column"、"mass action"、"prepareQueryBuilder"、"listing page"、"grid filter"、"export grid" が含まれる。
COMPONENT または COMPONENT_SET 上で Figma のコンポーネントプロパティ（TEXT、BOOLEAN、INSTANCE_SWAP、VARIANT）を追加、編集、削除し、コンポーネントをインスタンス化してそのインスタンスプロパティを設定する。Figma でコンポーネントの API を作成または配線する際に使用 — トリガー：'コンポーネントプロパティを追加'、'このコンポーネントにブールプロパティを追加'、'このテキストをコンポーネントプロパティにする'、'インスタンススワップスロットを追加'、'バリアントプロパティを作成'、'コンポーネントプロパティの名前変更/削除'、'このコンポーネントのインスタンスを配置'、'このコンポーネントをインスタンス化してラベル/状態を設定'、'このインスタンスにプロパティを設定'。プロパティは個々のバリアントではなく親の COMPONENT_SET に追加する必要がある。ネイティブ MCP の読み取り専用 get_design_context/get_metadata では対応していない。
InstantSearch を使って本番品質の検索体験（オートコンプリート、検索結果ページ、ファセット検索）を構築する。ユーザーが React、Vue、またはバニラ JS アプリケーションに検索、オートコンプリート、入力即検索、ファセットフィルタリング、検索結果ページの追加を求めたとき、または Algolia、InstantSearch、react-instantsearch に言及したときに使用する。バックエンドのインデックス操作（レコード、同義語、設定、API キー）には使用しない — 代わりに algolia-cli を使用する。分析、レコメンデーション、MCP サーバーのクエリには使用しない — 代わりに algolia-mcp を使用する。AI／エージェント／会話型検索には使用しない — 代わりに algobot-cli を使用する。
ユーザーがアプリ内ペイウォール、アップグレード画面、アップセルモーダル、機能ゲートを作成または最適化したい場合に使用します。「paywall」「upgrade screen」「upgrade modal」「upsell」「feature gate」「convert free to paid」「freemium conversion」「trial expiration screen」「limit reached screen」「plan upgrade prompt」「in-app pricing」への言及erview灵活性... 「in-app pricing」と言及した場合にも使用します。公開の料金ページ（page-cro を参照）とは異なります。本スキルは、ユーザーがすでに価値を実感した後のアプリ内アップグレードの場面に集中します。
ポップアップ、モーダル、オーバーレイ、スライドイン、バナーを目的とされた変換のために作成・最適化したいときに使います。「exit intent」「popup conversions」「modal optimization」「lead capture popup」「email popup」「announcement banner」「overlay」への言及ABOUTfirmwhen 発動します。ポップアップ以外のフォームについては form-cro を、ページ全体の変換最適化については page-cro を参照してください。
ユーザーがサインアップ、登録、アカウント作成、トライアル有効化のフローを最適化したいときに使用します。また、「signup conversions」「registration friction」「signup form optimization」「free trial signup」「reduce signup dropoff」「account creation flow，此外 ...」→ 「account creation flow rast ...」 clean: 「signup conversions」「registration friction」「signup form optimization」「free trial signup」「reduce signup dropoff」「account creation flowyoshi ...」 I'll write: ユーザーが「signup conversions」「registration friction」「signup form optimization」「free trial signup」「reduce signup dropoff」「account creation flowshaw ...」 Final: また「signup conversions」「registration friction」「signup form optimization」「free trial signup」「reduce signup dropoff」「account creation flow」に言及した場合も使用します。サインアップ後のオンボーディングについては onboarding-cro を参照。リード獲得フォーム（アカウント作成ではない）については form-cro を参照。
ChatGPT または Claude 内でレンダリングされるインタラクティブ UI —— OpenAI Apps SDK アプリ、MCP Apps（@modelcontextprotocol/ext-apps 標準）、または MCP-UI コンポーネントと、Next.js/React サーバー。MCP ツールとリソースのアーキテクチャ、window.openai / ui-bridge のデータフロー、ウィジェットの状態、サンドボックス/CSP セキュリティ、表示モード、ビジュアルデザイン、ディレクトリへの申請を扱う。このようなアプリを構築・レビュー・設計するときにトリガーする —— ユーザーが特定の SDK を挙げずに "chat app"、"ChatGPT widget"、"Claude app"、"render UI in chat"、"window.openai"、"createUIResource"、"outputTemplate"、"MCP app UI" と言っただけの場合でも。
チャート選択、色彩理論、注釈のベストプラクティスを扱うデータ可視化。チャートタイプ（棒、折れ線、散布図、ヒートマップ）、軸のルール、データによるストーリーテリングを網羅します。用途：チャート、グラフ、ダッシュボード、レポート、プレゼンテーション、インフォグラフィック、データストーリー。トリガー: data visualization、chart、graph、data chart、bar chart、line chart、scatter plot、data viz、visualization、dashboard chart、infographic data、data presentation、chart design、plot、heatmap、pie chart alternative
レイアウトパターン、件名の公式、配信到達性のルールを備えたメールマーケティングのデザイン。ウェルカムシーケンス、プロモーションメール、トランザクションメールのテンプレート、モバイル最適化を扱います。用途：メールマーケティング、ニュースレターのデザイン、ドリップキャンペーン、メールテンプレート、トランザクションメール。トリガー：email design、email template、email marketing、newsletter design、email layout、email campaign、drip campaign、welcome email、promotional email、transactional email、email subject line、email header image、email banner。
Apple Human Interface Guidelines に構造的に従う Expo（React Native）の iOS 画面を生成する——リスト、詳細、フォーム、モーダルシート、ネイティブタブレイアウト、設定画面で、それぞれネイティブナビゲーション、FlashList、セーフエリアインセット、セマンティックカラー、SF Symbols、ハプティクス、空／読み込み状態を備える。生成されるコードは expo-ios-hig ルールに従うため、手直しなしで expo-ios-hig-verify を通過する。各画面は Expo Router 用の TSX であり、Swift ではない。ユーザーが iOS 向けの新しい Expo 画面、ルート、タブレイアウト、フォームを作成、追加、生成、スキャフォールドしたいときはいつでもトリガーする——HIG に言及していなくても。
単一の Figma コンポーネント（または任意のノード）を N 階層までの完全な再帰ツリーとして抽出する — 各子ノードのレイアウト、塗り/線/エフェクト、タイポグラフィ、解決済みのバインド変数（トークン名 + コード構文）、INSTANCE の mainComponent 参照、プロトタイプのリアクション、アノテーション。1 つのコンポーネントの本番コードを生成するために最大限の忠実度のデータが必要なときに使用 — トリガー：'get the full component tree'、'deep extract this component'、'give me everything about this node for code gen'、'resolve all the tokens in this component'、'what instances does this component nest'、'extract reactions/prototype links'、'high-fidelity component spec'。任意のプランでバインド変数をトークン名に解決する。ネイティブ MCP の get_design_context / get_metadata よりはるかに深い。
Figma ファイルのバージョン履歴を一覧表示し、任意の過去バージョンでファイルをスナップショットし、2 つのバージョンを差分比較する（追加/削除/名前変更されたページと、コンポーネントごとの詳細な変更）。ユーザーが Figma の履歴を確認したいときに使用 — トリガー：'list Figma versions'、'what versions does this file have'、'show version history'、'snapshot this file at version X'、'get the file as it was last week'、'diff two Figma versions'、'what changed between these versions'、'compare version A and B'、'did this component change between releases'。バージョン履歴は Plugin API / use_figma / ネイティブの Figma MCP からはアクセスできないため、Figma REST API と個人アクセストークンを使用する。散文形式のリリースノートを作成する場合は figma-generate-changelog を、ある変更を導入したバージョンを特定する場合は figma-blame-node を使用する。
モダンでクリーンな UI/UX ガイダンスとレビューを行うスキル。実践的な UX/UI の推奨事項、設計原則、または新機能や既存システム（web/app）向けのデザインレビューチェックリストが必要なときに使用する。CRAP（コントラスト／反復／整列／近接）に加えて、タスクファーストの UX、情報アーキテクチャ、フィードバックとシステム状態、一貫性、アフォーダンス、エラーの防止／回復、認知負荷に焦点を当てる。モダンでミニマルなスタイル（クリーン、余白豊か、タイポグラフィ主導）を徹底し、不要なコピーを削減し、アイコンとしての emoji を禁止し、一貫したアイコンセットから直感的で洗練されたアイコンを推奨する。
レイヤー状に破いた紙、粗いタイポグラフィ、スタンプ、テープ、ステッカー、切り抜きの被写体、コピー機の粒子感、収集したくなる証拠ボードの雰囲気を備えた、破り紙風エディトリアルコラージュポスターの AI 画像生成プロンプトと画像生成ワークフローを作成します。この特定の破り紙コラージュポスタースタイルについて、生成、再設計、または Image Generator 用のプロンプト作成をユーザーが依頼したときに使用します。特にテーマと、任意の参照画像、人物写真、ニュース/イベントデータ、ローンチデータ、製品/物体の写真、文化的な瞬間、技術的なマイルストーン、雰囲気/スタイルの参考を提供する場合に適しています。
ui.inference.sh の React/Next.js 向けバッテリー同梱のエージェントコンポーネント。ランタイム、ツール、ストリーミング、承認、ウィジェットを 1 つのコンポーネントに内蔵。機能：ドロップインのエージェント、human-in-the-loop、クライアント側ツール、フォーム入力。用途：AI チャットインターフェース、Agentic UI、SaaS コパイロット、アシスタントの構築。トリガー：agent component、agent ui、chat agent、shadcn agent、react agent、agentic ui、ai assistant ui、copilot ui、inference ui、human in the loop。
inference.sh CLI 経由で BiRefNet を使って画像の背景を除去します。モデル：BiRefNet（高精度の背景除去）。用途：商品写真、ポートレート、E コマース、透過 PNG、写真編集。トリガー：remove background、background removal、remove bg、transparent background、cut out image、background remover、rembg、product photo editing、cutout、transparent png、bg removal、photo cutout。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。