Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,222 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
探索から実行へつなぐクリエイティブブリーフを作成、または改善します。新規プロジェクトやウェブサイトの開始、ブランドの立ち上げやリデザイン、デザイナー・開発者・AIエージェントへの依頼、制作前のチーム内の方向性統一に使用します。クリエイティブブリーフ、デザインブリーフ、ブランドブリーフ、プロジェクトのキックオフ、チームへの説明、プロジェクトの要件整理、デザイン方針、デザイナーや開発者への依頼、何から始めるか、ブリーフの作成、プロジェクト概要、範囲の設定、方向性の統一などで起動します。「ブリーフ」と明言されていなくても、曖昧なアイデアを引き継げる程度に具体化する必要がある場合にも起動します。
2つの相補的なプローブを使って、変換／構築後のWebページを元のプロトタイプと照合します。PIXEL／レイアウト差分（画像の引き伸ばし、改行の欠落、空白レンダリング、色の反転）と、STRUCTURALなコンテンツ＋タイポグラフィ差分（見出し、眉見出し、CTAの欠落や配置ミス、レンダリングされた書体の分岐）です。プロファイル（eds | generic）により、スタックに依存しません。プロトタイプを EDS/AEM に変換した後（stardust `deploy` スキルの Step 10）、または任意のプロトタイプとビルドの忠実度チェックに使用できます。stardust `diff` スキルおよびワークフローから呼び出せます。
ページごとにスタイル設定されたHTMLプロトタイプ（stardust/prototypes/** 内の stardust、claude-design / Mobirise / Relume / Lovable / v0 / Figma由来のページ、またはHTMLに事前レンダリングされたJSXプロトタイプ（多くはsamples/内））を、Edge Delivery Services（EDS / AEM）のブロックとコンテンツページに変換し、DA経由でデプロイします。プロトタイプの各セクションは1つのEDSブロックになり、セクションごとのCSSはブロッククラス内にスコープされたブロックCSSになります。スタイル付きのページ単位のHTMLプロトタイプをblocks/とcontent/配下の稼働するEDSサイトに移行する場合に使用します。
PPTX形式のプレゼンテーションスライドを作成・編集します。LinkedInのカルーセル作成や、再利用可能なスライドレイアウトの管理にも対応します。トリガー — ユーザーが次のように依頼した場合にこのスキルを使用します：「[brand] のスライドを作成」／「[brand] のプレゼンテーションを生成」／「[brand] のスライドを作成」；「[brand] のカルーセルを作成」／「LinkedInカルーセル」／「[topic] についてのカルーセルを作成」；「このPPTXを編集」／「スライドを更新」／「このプレゼンテーションを変更」；「新しいレイアウトを作成」／「cookbookにレイアウトを追加」／「[type] のレイアウトテンプレートを作成」；「[name] のレイアウトを編集」／「cookbookを更新」／「[name] のテンプレートを改善」；またはブランド名とともにスライド、プレゼンテーション、カルーセル、PPTX、レイアウトに言及する依頼。PowerPoint、Google Slides、Keynoteに対応する.pptxファイルを作成します。LinkedIn向けのPDFカルーセル（正方形の1:1形式）も作成します。
ターミナル UI、テキストユーザーインターフェース、curses アプリ、ダッシュボード、ウィザード、REPL シェル、プロンプトフロー、インタラクティブな画面を備えた CLI の設計、作成、選定、刷新、レビューを依頼された場合に使用します。TUI アーキテクチャ、ターミナル UI デザイン、フレームワーク選定、curses とモダンなフレームワークの比較、全画面 UI とインライン UI の選択、アプリの状態モデリング、ウィジェット構成、コマンドパレット、キーボード優先のワークフロー、ターミナルダッシュボード、インタラクティブ CLI の UX、クロスプラットフォームのターミナル製品計画では積極的に有効化します。アーキテクチャパターン、フレームワーク選定ルール、UX ガイドライン、スコープの境界、本番運用準備チェックリストを提供します
Adobe Express のテンプレートを使って、チラシ、ポスター、ソーシャルメディア投稿（Instagram、Facebook、LinkedIn）、名刺、招待状、グリーティングカード、履歴書、カバーレター、パンフレット、ニュースレター、証明書、プレゼンテーション、YouTube サムネイル、メールヘッダー、ロゴ、メニュー、ラベルなど、あらゆるビジュアルデザインを作成します。ユーザーがビジュアルの制作、デザイン、作成を希望する場合に使用します。「チラシを作って」「ポスターをデザインして」「Instagram 用に何か欲しい」「イベント招待状を作って」「名刺を作って」といった依頼にも対応します。テンプレートの閲覧、テキスト編集、画像の差し替え、背景変更、アニメーション化、デザインのエクスポートにも対応します。アクセス：サインイン必須 | 生成 AI：デフォルトでオフ。画像差し替えは、Codex など生成 AI が許可される環境でのみ対応。Claude では利用不可。
ChaiUI のデザインシステム。chaicode.com のルック（六角形の光彩をあしらった暖色系のほぼ黒い背景、白い Manrope の見出し、段落ごとに1つの淡いクリーム色の Montserrat 強調フレーズ、非対称な角を持つ無地の白いボタン、影のない暖色系の細線カード、オレンジはほぼ使わない）。ChaiCode 製品（chaicode.com、Chai Prep / dsa.chaicode.com、Hitesh Choudhary / ChaiCode のプロジェクト）の UI 構築や再デザイン、ユーザーが ChaiUI、@chaiui、「chaicode のルック／スタイル」に言及する場合や「chaicode のような」UI を求める場合、shadcn CLI で @chaiui コンポーネントを追加する場合に使用します。
OpenAI Codex、Tencent WorkBuddy、QoderWork（CN/global）、TRAE SOLO（global/CN）など、対応する Chromium/Electron AI デスクトップアプリ向けの可逆 CodeDrobe テーマを作成、確認、変換、適用、置換、検証、トラブルシューティング、更新、公開、復元します。添付またはローカルの参考画像を Codex、WorkBuddy、QoderWork、TRAE SOLO のスキンにする、ネイティブ UI でビジュアルスタイルを再現する、複数アプリ向けテーマを作成する、.codedrobe-theme パッケージやテーマ画像を扱う、ライブ CDP DOM スナップショットを分析する、DOM 互換性の問題を修正する、カスタムポートやインストールパスを使用する、検証用スクリーンショットを撮影する、CodeDrobe ストアを検索するかテーマ名でストアのテーマをインストールする、CodeDrobe ストアにテーマを公開・提出する、または旧 .codex-theme ファイルを移行するときに使用します。
「録画を見たいが、どれを見ればよいかわからない」というユーザーを、見る価値のあるセッションの短い高精度リストへ導きます。視聴するセッションやリプレイを尋ねる場合、興味深い／役立つ録画を探したい場合、セッションリプレイのどこから始めればよいかわからない場合、または具体的なフィルターを指定せずに、目標（登録、価格設定、オンボーディング、チェックアウト、機能、レイジクリック、エラー、モバイル、特定の人物）に関するセッションを見たい場合に使用します。`query-session-recordings-list` を使って曖昧な意図を絞り込んだ RecordingsQuery に変換し、有力候補にディープリンクを付けて `investigating-replay` に引き継ぎます。ユーザーがすでに録画／セッション ID を持っている場合（investigating-replay を使用）、または既知のエラーに関するリプレイを求めている場合（finding-replay-for-issue を使用）は使わないでください。
React、Vue、Svelte、SolidJS、Angular、React Native、Flutter など、あらゆるフレームワークで実際の Hugeicons アイコン名を検索して使用します。ダッシュボード、サイドバー、ナビゲーション、ツールバー、ボタン、メニュー、空の状態など、UI 作業でアイコンが必要な場合に使用します。プロジェクトにアイコンライブラリがまだインストールされていない場合や、ユーザーがアイコンに言及していない場合も対象です。プロジェクトが @hugeicons/*、@hugeicons-pro/*、または Flutter hugeicons パッケージに依存している場合にも使用します。アイコンライブラリの選択、インストール、レンダリング、props、Hugeicons MCP サーバーを使った名前の解決を扱います
サイトマップ、ナビゲーション、URL 構造、コンテンツタイプ、タクソノミー、ラベリングなど、ウェブサイトや製品の構造を設計します。サイトマップの計画、ナビゲーションの設計、URL の構成、コンテンツタイプの定義、タクソノミーの構築、サイト内検索の設計、システムレベルでのコンテンツ整理を依頼された場合に使用します。トリガーとなる語句は、sitemap、site structure、navigation、IA、information architecture、URL structure、content types、taxonomy、categorization、breadcrumbs、hub pages、faceted navigation、site search、labeling です。構造計画なしでコンテンツを作成する場合や、既存サイトの構造を監査・再構成する場合にも起動します。
GPUI アプリケーションで gpui-component UI ライブラリを使用する方法と、適用される規範的なデザイン／コーディングガイドを説明します。gpui-component のコンポーネント（Button、Input、Select、Dialog、Tabs、Sidebar、List、Table など）を使った UI の構築、ライブラリのセットアップ、コンポーネントの状態やテーマの管理、UI の要件に合うコンポーネントの選定に使用します。また、レイアウト、余白、視覚的階層、インタラクション状態の設計、インターフェース文言の作成、アプリケーションアーキテクチャ、状態の所有権、パブリック API に関する判断にも使用します。
WCAG 2.2 準拠、タッチターゲット、フォーカス管理、ARIA などを含む Tailwind CSS のアクセシビリティパターンです。次の場合は積極的に有効化してください：(1) Tailwind でアクセシブルな UI を構築する、(2) WCAG 2.2 準拠（レベル A、AA、AAA）、(3) フォーカスリングと focus-visible のスタイリング、(4) 最小タッチターゲットサイズ（24x24/44x44）、(5) 色のコントラストとテキストの読みやすさ、(6) スクリーンリーダー専用ユーティリティ（sr-only、not-sr-only）、(7) prefers-reduced-motion の処理、(8) ARIA 属性のスタイリング（data-state、aria-* セレクター）、(9) キーボードナビゲーションパターン、(10) アクセシブルなフォーム（ラベルの関連付け、エラー通知）。WCAG 2.2 チェックリスト、フォーカス管理ユーティリティ、タッチターゲットのサイズ設定例、sr-only パターン、アクセシブルなコンポーネントテンプレートを提供します。
デフォルトのデザインシステム——Tailwind CSS v4、React 19、Radix UI を基盤とする、darkmatter のダークファーストでターミナルに着想を得たデザインシステムです。既存のデザインシステムやガイドラインがないアプリで、デフォルトとして使用します。ダッシュボード、取引／監視コンソール、フォーム、テーブル、設定、ナビゲーションなど、darkmatter のブランドらしい画面に使用します。darkmatter のコンポーネント、トークン（OKLCH --n-* ランプ）、テーマ設定、レイアウトの正式な参照元であり、汎用的な shadcn/ui より優先してください。
ユーザー独自のブランドで Instagram のカルーセル投稿をデザインし、単体で動作する HTML ファイルを作成します。初回使用時に一度だけブランド設定（名前、ハンドル、サブタイトル、写真、アクセントカラー、スタイルの好み）を行います。デザインスタイルは 4 種類：Bold Impact（ダークでプレミアム）、Tweet Post（最小限のテキスト）、Clean Editorial（ライト／ホワイト）、Product Showcase（柔らかなグラデーション）。スライドは固定の 420x525px、フォントは Poppins、進捗バー、矢印インジケーター、白い CTA スライドを備え、PNG + PDF にエクスポートできます。トリガー：instagram carousel、carousel design、ig carousel、create carousel、design carousel、carousel post、make a carousel、instagram post design、carousel html、slide deck for instagram、visual carousel
任意のテキスト、ウェブページ、URL から Claude/Anthropic のデザイン言語に沿った HTML 情報カードを生成し、Playwright で PNG としてキャプチャします。14 種類の形式に対応：プラットフォームのカバー（WeChat 公式アカウント、Channels、Bilibili、Douyin）、画像とテキストのコンテンツカード（Xiaohongshu、チュートリアル、比較分析）、ソーシャル共有カード（名言、データ、正方形）、長文の編集レイアウト（Broadsheet、Feature、Reader、Digest）。ユーザーが「情報カード」「カード」「カバー」「画像付き投稿」「レイアウト」「スクリーンショット」「画像生成」「コンテンツカード」に言及した場合に使用します。
利用可能なソース（スクリーンショットのみ、公開中の URL、生の HTML/CSS、またはその組み合わせ）を使い、ユーザーの既存の技術スタック上に任意の Web UI をピクセル単位で忠実に再現します。スクリーンショット、画像、URL、Figma エクスポート、HTML ダンプをもとにデザインを再作成、照合、複製、または「クローン」したい場合に使用します。「これをクローンして」「このデザインに合わせて」「スクリーンショットから作って」「このページを再現して」「このように見せて」「この UI を作り直して」「このレイアウトをコピーして」といった表現で起動します。ユーザーが視覚的な参考資料を提示して忠実な実装を求める場合も対象です。明示的な表現がなく、スクリーンショットだけが送られた場合も、このスキルを適用してください。
ユーザーが Penpot MCP Server を介して AI エージェントで Penpot のデザインファイルを扱う場合に、このスキルを使用します。AI エージェント経由での Penpot の利用、デザインファイル、デザインシステム、デザイントークン、Penpot MCP、デザインからコードへの変換、デザインからの UI 生成、デザインシステムの監査、コンポーネント／バリアントの作成、レイヤー名の変更、Penpot からのアセットのエクスポート、フロー、インタラクション、アニメーション、オーバーレイの追加、Penpot でのプロトタイピング、AI エージェントへの Penpot ファイルの読み取り／変更指示などが起動条件です。Penpot MCP の設定、MCP 対応の AI エージェントや IDE と Penpot の接続、Penpot のデザインから本番品質の HTML/CSS/React を生成する場合も対象です。デザイン、コーディング、監査、プロトタイピング、設定など、Penpot とエージェントのワークフローに使用します。
React、Vue、Next.js、Svelte、Angular などのフレームワークと Tailwind CSS の連携。次の場合に積極的に起動します。(1) React（Vite、CRA）での Tailwind、(2) Next.js（App Router、Pages Router）での Tailwind、(3) Vue 3 / Nuxt での Tailwind、(4) SvelteKit での Tailwind、(5) Angular での Tailwind、(6) Astro での Tailwind、(7) Remix / React Router 7 での Tailwind、(8) PostCSS、CLI、Vite プラグインの設定、(9) フレームワーク別のクラス結合ユーティリティ（tailwind-merge）、(10) SSR に安全なクラス構成。フレームワークごとのセットアップ手順、コンテンツ設定、ダークモード設定、クラス結合のレシピを提供します。
クリック数だけを稼ぐのではなく、ユーザーを次のアクションにつながるカテゴリーに分類するクイズ、パーソナリティ評価、レコメンデーションツールを設計します。質問設計、スコアリングアルゴリズム、結果の分類、レコメンデーションの対応付け、リード獲得の統合を扱います。クリックベイト型クイズ（エンゲージメントのみ）、見栄え重視の結果（楽しいが役に立たない）、実用的なセグメンテーション（次の推奨につながる本質的な分類）のパターンを明確に区別します。クイズ、評価、性格診断、レコメンデーションツール、スコアカード、診断、適合性評価、「あなたはどのタイプの X？」、ペルソナクイズに関する依頼で起動します。分類を軸にしたリード獲得コンテンツが必要な場合、見栄え重視のクイズがエンゲージメントを生んでも有望なリードにつながらない場合、または評価の企画を初めて行う場合にも起動します。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。