Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
開発者向けの実在するウェブサイト(Vercel、Stripe、Linear、Notion、Figma など)から抽出した 54 個の DESIGN.md ファイルを厳選して収録しています。特定ブランドのデザインシステムに合った UI を作りたい場合、DESIGN.md テンプレートが必要な場合、有名な製品のデザイントークン、カラーパレット、タイポグラフィについて尋ねられた場合、または「[ブランド]風にして」と言われた場合に使用します。一致する参照ファイルを読み込み、デザイン仕様として使用します。
包括的なデザインスキル:ブランドアイデンティティ、デザイントークン、UI スタイリング、ロゴ生成(55スタイル、Gemini AI)、コーポレートアイデンティティプログラム(50種類の成果物、CIP モックアップ)、HTML プレゼンテーション(Chart.js)、バナーデザイン(22スタイル、ソーシャル/広告/ウェブ/印刷)、アイコンデザイン(15スタイル、SVG、Gemini 3.1 Pro)、ソーシャル写真(HTML→スクリーンショット、複数プラットフォーム対応)。操作:ロゴのデザイン、CIP の作成、モックアップの生成、スライドの作成、バナーのデザイン、アイコンの生成、ソーシャル写真やソーシャルメディア画像の作成、ブランドアイデンティティ、デザインシステム。プラットフォーム:Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。
python-docx と AppleScript を用いた macOS 向けのエキスパート Word 文書デザインエージェント。高いデザイン品質を備えた魅力的でプロフェッショナルな文書を作成・編集する。使用場面:(1) python-docx で新しい Word 文書をゼロから作成する、(2) 既存の .docx ファイルを編集または再設計する、(3) カスタムデザイン(表紙ページ、スタイル付き表、コールアウトカード、プルクォート、サイドバー、KPI パネル)を備えた文書を構築する、(4) AppleScript IPC 経由で文書をライブ編集する(テキスト、フォント、段落、検索/置換、フィールド、目次)、(5) macOS 上で AppleScript 経由でフィールドや目次を更新し、または PDF にエクスポートする、(6) 文書の表紙とコンテンツ用の AI 画像を生成する、(7) デザインのベストプラクティスを踏まえた python-docx コード生成を必要とするあらゆるタスク。
エディトリアルでミニマルなスタイルの、編集可能なビジネス向け PPTX デッキを作成します。白い背景、Georgia のセリフ体タイトル、赤いアクセントバー 1 本、全高の写真セクション区切りを使用します。HTML スライドから、ネイティブテキストボックスを備えた実際に編集可能な .pptx を出力します。このすっきりとしたエディトリアルスタイルまたは「写真区切り」スタイルのビジネスレポート、ピッチデッキ、PPT、PPTX をユーザーが求めている場合、またはこのスキルに言及した場合に使用します。
ウェブアニメーションのモーションアクセシビリティと WCAG 準拠。重要:アニメーションを実装する際は、このスキルを elite-gsap または elite-css-animations と併せて読み込むこと。prefers-reduced-motion(CSS と GSAP のパターン)、WCAG のコントラスト要件、APCA、フォーカス管理、キーボードナビゲーション、タッチ操作パターン、スクリーンリーダーへの配慮を扱う。以下について尋ねられたときに使用:モーションの低減、モーション感受性、前庭障害、アクセシビリティ、a11y、WCAG、コントラスト比、フォーカススタイル、タッチターゲット、セーフエリア、ジェスチャーのアクセシビリティ、アニメーションをアクセシブルにすること。モバイル向けのタッチ操作パターンも扱う。
プレミアムサイト向けのコンバージョン最適化と UX 戦略。以下の場合に使用:コンバージョン率最適化(CRO)、サインアップフロー、チェックアウト最適化、料金ページ、CTA、ヘッドライン、コピーライティング、A/B テスト、リード獲得、カート放棄、オンボーディング、リテンション、ソーシャルプルーフ、 testimonial、トラストシグナル、緊急性、希少性、成長、バイラルループ、ナビゲーションパターン、フォームバリデーション、トースト通知、エラー処理、空の状態、またはビジネス成果に影響する設計判断を行う必要がある場合。このスキルは設計上の選択の背後にある「why」を提供する。視覚的階層については elite-design-core を参照。フォーム実装時のフォーカス管理と aria パターンには elite-accessibility を読み込む。
NERV 風の司令センター、HUD、心理グラフ、シンクモニター、侵入警告、タイトルカードの表現を取り入れた、Evangelion に着想を得たオリジナルのウェブ・モバイルインターフェースをデザインします。鋭い幾何学形状、戦術的なタイポグラフィ、整理された情報密度、危険を優先する配色、ワイヤーフレームの分析フォーム、反復する計器配列、機械的なアニメーションを用います。Evangelion、NERV、アニメの管制室 UI、SF 軍事計器、診断オーバーレイ、心理グラフ表示、シンクモニター、カウントダウン画面、またはプロダクト UI のドラマチックなシステム状態アニメーションを求められた場合に使用します。
ウェブサイトのデザインシステムを DESIGN.md ファイル(google-labs-code/design.md 形式)に抽出する。ユーザーがサイトの URL を提示し、その視覚的アイデンティティ——色、タイポグラフィ、角丸/余白のスケール、コンポーネント、ブランドの印象——を捕捉、リバースエンジニアリング、クローン、または文書化したい場合に使用する。次のような表現でトリガーされる:「<url> からデザインシステムを抽出して」「<site> から DESIGN.md を作って」「<site> のデザイントークンを取得して」「<site> のカラーパレット / フォントは?」「自分の UI を <site> のようにしたい」。playwright-cli で実際のページをいくつかサンプリングし、CSS カスタムプロパティ + 計算済みスタイルを読み取り(正確で低コスト)、文章用に明るいスクリーンショットを撮り、公式リンターで検証する。再利用可能なデザイン仕様が目的の場合は、スクリーンショットを目視で確認するよりもこれを優先する。
エクスポート結果に忠実なアセット、画面×状態のインベントリ、出荷対象の親コンポーネント内で測定したコントロール、対象リポジトリ内の永続的な living spec(状態/モード/根拠、必須の Assets サブセクション)を用いて Figma UI を実装します。コンポーネントワークベンチ(Storybook など)がある場合は、インベントリを網羅するストーリーと仕様を固定するテストも提供します。Figma の URL/ノードからの実装や、ピクセルレベルの再現に使用します。ファイルにモードがあるか、プロジェクトにテーマ切り替え機能がある場合は、ライト/ダークも対象です。同じ実行内で figma-pixel-verify を使ってレイアウト済みフレームを測定し、合格するまで続けます。反復の間に人が介在する必要はありません。トリガー — 「像素级还原」「按稿实现」「Figma 对齐实现」「还原 Figma」「figma 保真实现」「暗黑模式还原」「多主题保真实现」 / implement from Figma、pixel restore、dark mode implement、multi-theme fidelity。コード→Figma のキャンバス書き込み、デザインのない自由な UI、実装後の整合性確認のみには使用しないでください(figma-pixel-verify を使用)。
実行中の UI のレイアウト済みフレームを、Figma の living artifact(インベントリ + 仕様 + Verify セクション)と照合して測定します。実装後のピクセル単位の整合性確認 / Figma との照合に使用します。ライト/ダークやホバー/バリアント状態も対象です(テーマと状態を切り替え、各行を測定)。ドキュメント以外の UI には layout-probe を使用します。ソース定数の比較は合格になりません。人に確認せず、同じ実行内で全体が PASS になるまで修正と再測定を行います。重要な行が未測定の場合、全体は失敗です。チェッカーは終了コード 0 で終了する必要があります。layout probe は出荷対象の親コンポーネントをマウントします。開けるチャネルでは、保存済みの空でないスクリーンショットファイルを示す必要があります。layout-probe は not-openable としても構いません。トリガー — 「检查像素对齐」「对照 Figma 验收」「设计保真检查」「是否对齐稿面」「figma 保真检查」「暗黑模式验收」「多主题保真检查」 / verify Figma fidelity、pixel check、dark mode fidelity check、multi-theme verify。主要な実装ワークフローとしては使用しないでください(figma-pixel-implement を使用)。コード→Figma にも使用しないでください。
「define our core action」「North Star metric」「accruing benefits」「improve retention mechanics」「hierarchy of engagement」「Sarah Tavel framework」と尋ねられた場合に使用します。消費者向け製品が、長期的な継続利用を促す行動と便益を特定するのに役立ちます。Benchmark の Sarah Tavel が作成した Hierarchy of Engagement フレームワークは、コアアクションから損失の拡大に至る進展を示します。
独自性の高いプロダクション品質のフロントエンドインターフェースを構築する — ウェブサイト、ランディングページ、ダッシュボード、React コンポーネント、HTML/CSS レイアウト、奥行きパララックス付きのエディトリアルヒーロー(Astryx パターン)、ポインター反応型の流体エフェクト、ピクセルグリッチの canvas ヒーロー、ターミナル風ツールパネルのジオラマ(Composio パターン)。ありきたりな AI 的な美観を避ける。web UI、styling、beautify、frontend design、dashboard、landing page、React component、editorial hero、glitch hero、dev-tool landing page でトリガーする。
PBIR JSON の生成前に、Power BI レポートのレイアウト設計、グラフの種類の選択、ページ構成の計画、テーマの選択、データストーリーテリングの適用を行います。`power-bi-report-authoring` に渡す設計仕様書と公式標準の `Design Brief:` 契約(設計アイデンティティ、ページアーキタイプ、機械的な layout_contract)を作成します。Microsoft の `powerbi-report-cli` の `design` モード(トーン、シグネチャー、アーキタイプルーター、グラフ選択、色、タイポグラフィ、レイアウト、インタラクティビティ、アクセシビリティ、既存レポートの再設計、事前チェックリスト)を対象とします。レポートの設計、ダッシュボードレイアウトの計画、ビジュアライゼーションやグラフ種類の選択、テーマやパレットの選択、ナビゲーションの計画、既存レポートの再設計や評価、要件に基づく設計仕様書の作成を求められた場合に使用します。PBIR JSON の生成、レポート構造の検証、セマンティックモデルの構築には使用しないでください(`power-bi-report-authoring` / `power-bi-semantic-model` を使用)。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。
