Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
ゼロから完全なビジュアルアイデンティティを構築、または既存のものを刷新する：ロゴマークとバリエーション（SVG）、ブランドカラーの役割、ブランドフォント、パターン、favicon／アプリアイコン、ソーシャルアバター、ブランドガイドラインページ。ユーザーが単一の要素ではなくブランドそのものを必要としているときに使用。トリガーフレーズ：「brand identity」「logo design」「brand guidelines」「visual identity」「brand system」「favicon」「logo variations」「brand pattern」「rebrand」。配色のみなら color-palette、フォントのみなら typography、UI トークン／コンポーネントなら design-system を使用。
ユーザーが「アーキテクチャ図/フローチャート/スイムレーン図/シーケンス図/組織図/ステートマシン/ファネル/ガントチャート/マイルストーン/マトリクス象限/リンクアーキテクチャ/手描き風アーキテクチャ/複雑な業務スイムレーン図/ER 図/マインドマップ」のいずれかの作成を求め、それを飛書（Feishu）に反映しようとする場合、またはユーザーが飛書ドキュメントの URL を提示してその中に図を描くよう求める場合、あるいは「飛書に同期/飛書ホワイトボードに書き込んで」と言った場合は、必ず本スキルを使用する。上記 17 種類の組み込みテンプレートに加え、本スキルは「自由描画モード（freeform-drawing）」も提供する。ユーザーが油絵/手描きイラスト/モバイルアプリのプロトタイプ/地図/ゲーム画面/サンキー図/任意の参考画像の再現など、テンプレートでは対応できない図の作成を求めた場合、または「自由描画/自由に描いて/テンプレートを使わないで」と明示した場合も、同様に本スキルを使用する（出力は引き続き再編集可能な飛書ホワイトボード）。生成経路は Normalize → Select → Plan → Layout → Render → StaticCheck → VQA → Deliver の 8 ステップに厳密に従い、テンプレートのハードコード、座標のハードコード、ユーザーが言及していない業務内容の捏造は禁止する。すべてのスタイルは assets/style-tokens/ から読み込む（コードネイティブ図と自由描画モードを除く）。納品前に品質ゲート（ルートごとに実行）と 2 名のレビュアーによる視覚レビューを通過しなければならない（いずれかのスコアが 9 未満、または blocker が発生した場合は失敗）。
購読済みの Figma チームライブラリからデザイントークンを検出して現在のファイルにインポートします。共有ライブラリにあるトークンを再利用したいときに使用：トリガー 'list library variables'、'what tokens are in our shared library'、'import a variable from our design system library'、'pull in the brand color token from the library'。Plugin API の teamLibrary メソッドにより、どのプランでも動作します。ローカル変数には figma-export-tokens / figma-manage-variables を使用してください。
画像形式の PPT ドキュメント / スライドのスクリーンショット / 任意の画像ページを、編集可能な .pptx に逆算して復元する。4 層のフローを必須とする：背景画像の複製 + グリーンスクリーンで全体構成図を切り抜き + グリーンスクリーンで要素アイコン/装飾を切り抜き + GPT の視覚で文字を抽出、その後に合成する（文字は本物のテキストボックス、構成図/アイコンは移動可能な画像。ユーザーが明示的に構成の分割を求めた場合にのみ構成パーツに分割する）。スライド画像を背景 + 構成 + アイコン + テキストの各レイヤーで編集可能な PPTX に変換する。ユーザーが「PPT の画像/スクリーンショットを編集可能な PPTX に変換、画像 PPT を編集可能な PPT に復元、アイコンの切り抜き、背景の複製、文字の抽出、レイアウトの復元」を求めたときに使用。入力は画像、出力は編集可能な .pptx。
モバイルアプリのオンボーディングを改善、修正、テスト、批評したいときに使用します — "here's my onboarding"、"roast my flow"、"why do users drop off before the paywall"、競合のサインアップフロー、ウェルカムまたはアクティベーションフロー、クイズ、一文で説明されたフローなど。また、あなた自身がオンボーディングの流れを設計または生成する際に、参照すべきデザインがない場合にも使用します — 参考画面も、コピーできる既存フローも、明文化された手順もない場合 — 例えば "build me an onboarding"、"add a quiz before the paywall"、"make a flow that converts"。その場合、このライブラリが参照となり、あなたが生成したフローを評価して修正します。flow-generator スキルが生成したオンボーディングフロー設定や一連の `flows config preview` レンダリングをレビューするときにも使用します。名指しで "teardown" を求められるまで待たないでください。
ハンドオフ用に Penpot デザインを記録する。デザインの横（決してその上ではない）に非表示可能な注釈レイヤーを置く：コンテキストカード（目的、ビジネスルール、リンク、ステータス）、UI 上の番号付きピン、対応する観察/推奨ノート、任意のツールチップ。注釈コンポーネントキット + トークンを再利用または提案する。監査（penpot-audit-*）やレイヤーのリネーム（penpot-rename-layers）向けではない。トリガー：'document this design'、'annotate this screen'、'prepare this for handoff'、'add observation notes'、'create a critique card'、'spec this screen for handoff'。
認証済み MCP または shadcn registry を通じて、ライセンス済みの beUI Pro プレミアム React ブロックを選択、検査、インストール、組み合わせる。beUI Pro でランディングページを構築または改善する場合、@beui-pro の項目をインストールする場合、プレミアムな hero、機能、料金、社会的証明、CTA、ナビゲーション、フッター、その他のページセクションを選ぶ場合、または React や Next.js プロジェクト内でインストール済みの Pro ソースを調整する場合に使用する。
74 の実在ブランドのデザインシステム（Claude、Linear、Stripe、Vercel、Figma、Apple、Tesla、Spotify、Notion、Supabase など）を DESIGN.md ファイルとして収録したリファレンスライブラリ — 色、タイポグラフィ、コンポーネント、レイアウト、エレベーション。特定のブランドの見た目に合う UI、ランディングページ、コンポーネントが欲しい場合、実在のデザインシステムからデザインの方向性を選びたい場合、「like <brand>」「Linear / Stripe / Apple のような感じにして」と言う場合、フロントエンド作業の前に具体的なデザイントークンの出発点が必要な場合に使用する。frontend-design と tailwind-design-system と組み合わせる。
expo-design-system のルールを構造的に守る Expo / React Native デザインシステムコンポーネントをスキャフォールドする——バリアント駆動のプレス可能プリミティブ、スロットベースのカードサーフェス、型付きテキストプリミティブ、ラベル付きフォームフィールド、FlashList エンティティ画面、テーマトークングループ、Storybook バリアントカタログ。生成されるコードは style props の代わりに Unistyles v3 バリアント、ref-as-prop、デザイントークン、組み込みアクセシビリティ、Web/iOS の同等性（インタラクティブなプリミティブにおける `_web` の hover/focus/cursor）を使用するため、手直しなしで expo-design-system に従う。出力は react-native-unistyles を使用した TSX/TS。ユーザーが clinic モバイルアプリ向けに新しい共有 UI コンポーネント、プリミティブ、デザイントークングループ、画面を作成、追加、生成、スキャフォールドしたいときは常にトリガー——デザインシステムに言及していなくても。
FigJam ボードを細かく制御して作成 — 付箋（単体 + 一括）、ノード間のコネクタ、テキスト付き図形、セクション、テーブル、コードブロック、自動整列 — さらにボードの内容と接続グラフの読み取り。ユーザーが FigJam ボードを要素単位で作成または編集したいときに使用。トリガー：'add stickies to FigJam'、'create a flowchart/diagram in FigJam'、'connect these nodes'、'make a section/table/code block in FigJam'、'auto-arrange the board'、'read what's on the FigJam board'、'map the connections'。ネイティブの generate_diagram（図全体を一度に生成）より細かい制御が可能。FigJam ファイルのみ（figma.editorType === 'figjam'）。Figma デスクトップアプリ（Plugin API）が必要。
Figma の COMPONENT_SET のバリアントを、整理されたラベル付きグリッドにまとめる——行と列はバリアントのプロパティから導出し、行ラベルは左側、列ヘッダーは上部、タイトル付きの白いコンテナを配置する。バリアントセットが雑然と積み重なっていて、提示できてドキュメント化しやすいレイアウトにしたいときに使用する——トリガー：'arrange my variants in a grid'、'organize this component set'、'lay out the variants with labels'、'make a variant matrix'、'clean up my component set layout'、'add row/column headers to my variants'。デフォルトでは最後のプロパティ（通常は State）を列に、残りを行にする。ネイティブ MCP の読み取り専用ツールが行うことではない——これは整理された新しいレイアウトをキャンバスに書き込む。
ユーザーが情報を効果的に見つけ管理できるよう、コンテンツを整理・構造化・ラベリングする。コンテンツ監査、カードソーティング、タクソノミー設計、ナビゲーション構造、ツリーテストによる検証を導く。デジタルプロダクトのコンテンツを整理する場合、ナビゲーションシステムを設計する場合、情報階層を再構築する場合、見つけやすさを改善する場合、タクソノミーやメタデータスキーマを作成する場合、またはユーザーが information architecture、IA、sitemap、navigation design、content structure、card sorting、tree testing、taxonomy、findability に言及した場合に使用。
この skill を使って AI エージェント（Claude Code、Cursor、任意の MCP クライアント）から Compose HotSwan を操作し、エージェントが Kotlin ファイルを編集し、ホットリロードをトリガーし、デバイスのスクリーンショットを取得し、結果を設計意図と照らして評価し、人手を介さずに反復できるようにする。7 つの HotSwan MCP ツール（hotswan_get_status、hotswan_reload、hotswan_take_screenshot、hotswan_start_snapshot、hotswan_stop_snapshot、hotswan_select_variant、hotswan_build_and_install）、標準的な編集-リロード-スクリーンショットのループ、スナップショットベースのロールバック、および schema 変更時に完全インストールにフォールバックすべき場面を扱う。開発者が「AI にこの画面を mock と一致するまで調整させたい」と言う場合、「AI は何が変わったか見えるのか？」「AI はデバイスのスクリーンショットを撮れるのか？」と尋ねる場合、MCP ツールへのアクセスが必要な Claude Code または Cursor のワークフローを構築する場合、または AI 駆動の UI 反復を望む場合に使用する。
参照 URL、スクリーンショット、ソースコードから Sketch で UI デザインを再現または構築し、Sketch MCP（`get_document_info`、`get_layer_tree_summary`、`get_screenshot`、`get_design_assets`、`get_symbol_overrides`、対象を絞った `run_code`）を使って並べて比較するスクリーンショットの忠実度検証を行う。ユーザーがウェブ、画像、コードから Sketch でページや画面をデザイン、モックアップ、再現したいときに使用する。
ドキュメントやプレゼンテーションにプロフェッショナルなビジュアルテーマを適用する。一貫したカラーパレットとフォントの組み合わせで成果物をスタイリングするために使用。成果物の美的品質をすばやく高めるために積極的に使用する。例： - user: "Apply a modern theme to this deck" -> use Modern Minimalist theme - user: "I want a tech aesthetic for this doc" -> apply Tech Innovation theme - user: "Create a custom theme for my project" -> generate new color/font specification
Vite プロジェクトで shadcn/ui + Tailwind CSS v4 を初期化する（Vite 専用、Next.js/Remix ではない）。Vite プロジェクトのセットアップ、shadcn コンポーネントのインストール、Tailwind v4 の設定で積極的に使用する。例：- ユーザー：「私の Vite プロジェクトに shadcn をセットアップして」→ 依存関係をインストールし、tailwind v4 の CSS-first を設定し、shadcn を初期化し、コンポーネントが動作することを検証する - ユーザー：「既存の Vite アプリに shadcn を追加して」→ 既存の設定を確認し、CLI をインストールし、components.json を追加し、CSS インポートを更新する - ユーザー：「shadcn で Tailwind v4 を使う」→ @import と @theme を設定し、v3 の設定を削除し、カスタム tokens を設定する - ユーザー：「Vite + React + shadcn プロジェクトを作成して」→ Vite を雛形生成し、shadcn をインストールし、テーマを設定し、サンプルコンポーネントを追加する
Zalo Mini App——Zalo スーパーアプリ内で動作する軽量 Web アプリ——を構築する。このスキルは ZaUI コンポーネント（Button、Input、Modal、Tabs、Avatar など）、JavaScript API（authorize、getUserInfo、getPhoneNumber、getLocation、Storage、Camera）、決済用の Checkout SDK、設計ガイドライン、開発ツールを提供する。Mini App の構築、ZaUI コンポーネントの使用、Zalo API の呼び出し、決済の統合、Web アプリの Mini App への変換、Zalo 設計標準の遵守のときに使用する。
ui.inference.sh が提供する React/Next.js 向けチャット UI のビルディングブロック。コンポーネント：コンテナ、メッセージ、入力、入力インジケーター、アバター。機能：チャットインターフェース、メッセージリスト、入力処理、ストリーミング。用途：カスタムチャット UI の構築、メッセージングインターフェース、AI アシスタント。トリガー：chat ui、chat component、message list、chat input、shadcn chat、react chat、chat interface、messaging ui、conversation ui、chat building blocks
スライド設計規約 slide-rules.md を中核に、経営会議品質のスライドを作成するスキルです。工程ごとに必要な節だけを scripts/rules.py で取得し、規約への適合を確認した部品（new_deck.py --list の20種類）で組み立て、check_deck.py・check_layout.mjs の機械チェックで FAIL 0 に仕上げます。既存の PowerPoint 資料を渡され、そこに挿入するページを PPTX で求められた場合に限り、その資料のマスター上に直接組み立てます（slide-rules §8.7）。トリガー例：「コンサル品質のスライドを作って」「規約に沿ったデッキで」「この pptx に同じ書式でページを追加して」。
D3.js でカスタムのインタラクティブなデータ可視化を作成するためのガイド — 棒／折れ線／散布図、ネットワーク図、地理マップ、階層構造、ズーム／パン／ブラシ操作とアニメーション遷移を伴うリアルタイムデータ更新。チャートライブラリ（Highcharts、Chart.js）に必要なカスタマイズ性がなく、データ駆動の DOM 操作、スケール、シェイプ、レイアウトを低レベルで制御する必要がある場合に使用する。ユーザーが D3、d3.js、custom visualization、force-directed graph、data-driven SVG に言及したときに呼び出す。
2 つの Figma ファイルバージョン間で人間が読める markdown の変更ログを生成する——追加/削除/名前変更されたページとコンポーネントごとの変更を、作者のハンドルとタイムスタンプ付きで提示し、リリースノート、PR、Storybook MDX にそのまま貼り付けられる。ユーザーが叙述的な履歴を求める場合に使用——トリガー：'generate a Figma changelog'、'write release notes from Figma'、'what changed between these versions in markdown'、'summarize Figma changes for the PR'、'changelog between version A and B'、'design changelog since last release'。バージョン履歴は Plugin API / use_figma / ネイティブの Figma MCP からは取得できないため、Figma REST API と個人アクセストークンを使用する。生の構造化 diff JSON が必要な場合は figma-version-history を、特定の変更をどのバージョンが導入したかを調べる場合は figma-blame-node を使用する。
Figma Slides のプレゼンテーションを作成する——スライドの一覧表示/作成/複製/並べ替え/削除、スライドグリッドの読み取り、スライドへのテキストと図形の追加、スライド背景色の設定、スライドのトランジション（dissolve、slide-from、push-from、smart-animate）の設定または読み取り、スライドへのフォーカス、スキップの切り替え。ユーザーが Figma Slides のデッキを構築または編集したいときに使用する。トリガー：'create a slide'、'add a slide to the deck'、'reorder slides'、'set the slide background'、'add a transition between slides'、'add text/shape to slide 3'、'read what's on this slide'、'skip this slide in the presentation'。Figma Slides ファイルのみ（figma.editorType === 'slides'）。Figma デスクトップアプリ（Plugin API）が必要。
ロゴ作成のためのロゴデザイン原則と AI 画像生成のベストプラクティス。ロゴの種類、プロンプト技法、スケーラビリティのルール、反復ワークフローをカバー。用途：ブランドアイデンティティ、スタートアップのロゴ、アプリアイコン、favicon、ロゴコンセプト。トリガー：logo design、create logo、brand logo、logo generation、ai logo、logo maker、icon design、brand mark、logo concept、startup logo、app icon logo
Open Graph とソーシャル共有画像のデザイン。プラットフォームの仕様、テキスト配置、ブランディングを扱います。OG meta タグ、Twitter カード、LinkedIn プレビュー、動的生成をカバーします。用途：ソーシャル共有画像、ブログのサムネイル、リンクプレビュー、ソーシャルカード。トリガー：og image、open graph、social sharing image、twitter card、social card、link preview image、og meta、sharing preview、social thumbnail、meta image、og:image、twitter:image、linkedin preview。
Instagram、LinkedIn、Twitter/X 向けの複数スライドのカルーセルデザイン。レイアウト規則とフックを扱う。スライド構成、テキストの階層、スワイプの心理、プラットフォーム固有の仕様を網羅。用途：カルーセル投稿、Instagram カルーセル、LinkedIn カルーセル、スライド投稿、教育コンテンツ。トリガー：carousel、instagram carousel、linkedin carousel、slide post、carousel design、swipe post、multi-image post、carousel template、educational carousel、carousel content、instagram slides、linkedin slides
ユーザーが Spree 管理画面（`spree_admin` gem）をカスタマイズするときに使用——新しいリソースページの追加、サイドバー項目の登録、管理テーブルの列のカスタマイズ、ビューのオーバーライド、新しい管理セクションのスキャフォールド。よくある表現は "add admin page"、"Rails admin"、"spree_admin"、"scaffold admin resource"、"admin sidebar"、"override admin view"、"Hotwire admin"、"Turbo admin"。
ui.inference.sh が提供する React/Next.js 向けツールライフサイクル UI コンポーネント。ツール呼び出しを表示：保留中、進行中、承認必要、結果。機能：ツールステータス、進捗インジケーター、承認フロー、結果表示。用途：エージェントのツール呼び出しの表示、ヒューマン・イン・ザ・ループの承認、ツール出力。トリガー：tool ui、tool calls、tool status、tool approval、tool results、agent tools、mcp tools ui、function calling ui、tool lifecycle、tool pending
PPTX Generator やその他のブランド対応スキルで使用するトーンオブボイスとブランドシステムのファイルを生成する。トリガー - ユーザーが次のように言った場合にこのスキルを使用する： - 「ブランドシステムの作成を手伝って」/「自分のブランドを設定して」 - 「自分のトーンオブボイスを生成して」/「自分のボイスガイドラインを作成して」 - 「プレゼン用に自分のブランドを設定して」/「スライド用にブランドを設定して」 - 「ブランドファイルを作成して」/「自分のブランドを初期化して」 - コンテンツ制作のためにブランドアイデンティティ、ボイス、ビジュアルシステムを定義することに関するあらゆるリクエスト brand.json、config.json、brand-system.md、tone-of-voice.md ファイルを作成する。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。