Skills
エージェント向けにパッケージ化された専門スキルと手順を 97,501 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
React Email コンポーネントでレスポンシブな HTML メールを構築する。メール構造（Html、Head、Body、Container）、コンテンツコンポーネント（Text、Heading、Button、Link、Img）、レイアウト（Section、Row、Column）、インライン CSS と Tailwind によるスタイリング、カスタムフォント、プレビューテキスト、HTML へのレンダリングを扱う。トランザクションメール、マーケティングテンプレート、メールデザインシステムを作成するときに使用する。メールのレンダリング、プレビュー、Tailwind によるメールスタイリング、Resend、Nodemailer、SendGrid とのプロバイダー統合に使用する。
Inertia Rails Vue 3(Nuxt ではない)向けの shadcn-vue コンポーネント統合:フォーム、ダイアログ、テーブル、トースト、ダークモードなど。Inertia + Vue アプリで shadcn-vue コンポーネントを使って UI を構築する場合や、Nuxt の shadcn-vue サンプルを移植する場合に使用する。shadcn-vue の入力は name 属性と #default スコープ付きスロットを介して Inertia Form に接続する。Flash トーストには Rails の flash_keys イニシャライザ設定が必要。
ブラウザーで開く自己完結型の静的 HTML 成果物（インタラクティブな図、ダッシュボード、インフォグラフィック）を作成します。HTML5+CSS3+インライン SVG のみを使用し、ツールチェーンは不要です。トリガー：「interactive HTML」「open in browser」「HTML artifact」「visual dashboard」「HTML infographic」。PNG/SVG 出力には使用せず、concept-to-image を使用してください。状態モデルやレイアウトの検討用の使い捨てプロトタイプには使用せず、prototype を使用してください
ユーザーフロードキュメントを作成する際に使用する — ユーザーが各目標を達成するために製品内でたどる経路の地図：エントリーポイント + ナビゲーション/IA の枠組み、ハッピーパス、意思決定の分岐、エラー/復旧 + エッジ状態（ローディング + 成功を含む）、インタラクションのレジリエンス（取り消し/再開/システム状態）、フロー単位のアクセシビリティ、および通過する画面/状態。各フローは目標/ペルソナのジョブにひも付けられる。導くのは方法であり、アウトラインではない：上流の目標 + 既存パターンからフローを導出し（決して発明しない）、すべての分岐 + エラーパスを列挙して行き止まりを作らず、客観的なヒューリスティクスでフローの品質を判断し、各フローを同期した図 + 番号付きナラティブとして描画し、既存ドキュメントを範囲を限定したバージョン付き差分として修正する。別個のユーザーフローテンプレートツールおよびリサーチ機能と組み合わせる。上流入力として承認済み PRD を前提とする — 白紙の状態からは決して始めない。完成したユーザーフロードキュメントのレビュー、画面レイアウト/ワイヤーフレーム、PRD 自体の作成には使用しない。
Web UI のダークテーマの設計と実装：サーフェスの標高、彩度を落としたブランドカラー、テキスト/ボーダーのトークン、color-scheme、システム設定の検出、フラッシュのないテーマ切り替え、Tailwind のダークバリアント。ユーザーが「ダークモードを追加」「ダークテーマを作成」「ダークモード対応」「ダーク/ライト切り替えの実装」「テーマスイッチャー」「prefers-color-scheme」「ダーク背景向けのデザイン」「ナイトモード」、またはその他のダークテーマ作業を求めたときに使用。HTML メールのダークモードには email-design を使用し、完全なカラーパレットの構築には color-palette を使用。
monotykamary / Linear の美学（ほぼ黒のグレースケール、Inter の見出し + 等幅ラベル、ヘアラインで囲まれた図）で、単一のコーラル系アクセントを用いた、意味を担うエディトリアルなデータイラストを生成する。これはテンプレート集ではなく生成ガイドであり、「主張 -> 幾何」の手法を教えることで、あらゆるセッションが記事の実際の論旨にふさわしい図を考案し、それを自己完結型でテーマ対応、モーション削減に対応した HTML/SVG 図としてレンダリングできるようにする。ブログ記事、エッセイ、仕様書、スライドを書いたり図解したりする際に、ハウススタイルで論旨を担う（装飾ではない）チャート、図、イラストが欲しいときに使用する。トリガー：「これのチャート/図/イラストを作って」、「この主張を可視化して」、「monotykamary/Linear スタイルの図」、「エディトリアルグラフィック」。
RunComfyでOpenAI GPT Image 2（ChatGPT Images 2.0）を使って画像を生成・編集します。GPT Image 2の強み（画像内テキスト、ロゴ、多言語タイポグラフィ、指示の正確さ）、3つの固定サイズ、保持しながら編集する際の表現、代わりに同系列モデル（Flux 2 / Nano Banana Pro / Seedream）を使う場面を説明します。ローカルのRunComfy CLI経由で`runcomfy run openai/gpt-image-2/text-to-image`または`/edit`を呼び出します。「gpt image 2」「gpt-image-2」「ChatGPT Images 2」「image 2」、またはこのモデルで画像の生成・編集を明示的に依頼した場合に起動します。
ユーザーが PageCraft でドキュメントの作成、一覧表示、公開を求めたときにこのスキルを使用する — ページ、4CMS テンプレート（カタログのルーブリック、商品カード）、またはページを包むレイアウトドキュメント — ライブラリからブロックを選択し、V1 REST API でプレースホルダーを埋め、必要に応じて 4CMS に公開する。トリガーフレーズには「сделай страницу」「собери лендинг」「напиши статью на сайте」「наполни рубрику」「создай страницу в PageCraft」「сгенерируй landing」「сделай шаблон рубрики」「сделай шаблон карточки товара」「собери макет сайта」「сделай макет с шапкой и подвалом」「какие есть шаблоны」「какие есть шаблоны рубрик」「какие есть типы шаблонов」「какие есть макеты」「покажи мои страницы」「наполни блоки контентом」「опубликуй страницу」「обнови опубликованную страницу」「обнови устаревшие блоки」「приведи страницу к актуальным версиям」「найди где используется блок」「мигрируй мажорную версию блока」「сделай аудит блоков на странице」が含まれる。
UX やデザインの語彙を必要とせずに段階的なインタビューを行い、ソフトウェアプロジェクトの正規の UX 標準を作成または進化させ、3 つの連携した成果物を生成します。UX_STANDARD.md、カスタムの ux-review スキル、UX_REVIEW_TEMPLATE.md です。機能をレビューする前に、ルックアンドフィール、対象ユーザー、原則、デザインシステム、アクセシビリティ、レスポンシブ、トーン、参考事例、インタラクション、品質基準、UX ガバナンスを定義したいときに使用します。生成された ux-review は SDD の Define と Design の間のステップになります。生成されたスキルの代わりに機能レビューを実行することはありません。
PowerPoint プレゼン資料を全工程 AI で制作するスキル。マッキンゼー／デロイトなどトップコンサルティングファームの基準に対応（Aham UI v6.1 · Office トラック · PPT）。ユーザーが「帮我做PPT」「做演示文稿」「做一个汇报」「根据这份资料做PPT」「做客户方案PPT」「制作幻灯片」と言った時点で即座に発動する。一言の要望だけでも発動する。8 段階のモジュール型プロセス：仕様の読み込み→素材の解析→論点の抽出→ナラティブの骨格→アウトラインとレイアウト→サンプルの確認→ページ単位のデザイン→品質チェックと納品。内蔵の適応型コーチング機構により、ユーザーの専門レベルに関わらず合格水準以上のアウトプットへ導く。注意：このスキルは PowerPoint / pptx 出力用。SVG/HTML 版は ppt-svg スキルを参照。
コード化されたデザインシステムを構築する：3 層のデザイントークン（CSS 変数と W3C DTCG JSON）、スペーシング/角丸/シャドウ/モーションのスケール、ライト/ダーク/マルチブランドのテーマ化、状態とドキュメントを備えたコンポーネント API。コンポーネントライブラリやトークンアーキテクチャを構築・拡張するときに使用。トリガーフレーズ：「design system」「design tokens」「component library」「theming」「css variables」「spacing scale」「elevation system」「component API」「token hierarchy」「tokens.json」。color-palette（色）と typography（タイプスケール）を消費する。ブランドの基本情報のみを記録する場合は design-context を使用。
UI 向けの一貫した SVG アイコンシステムを設計・実装する：キーライングリッド、ストローク規則、光学補正、アウトライン/塗り/デュオトーンのスタイル、アイコンとテキストの配置、アニメーション、アクセシブルなマークアップ。コード内の UI アイコンに使用する。ロゴマークには brand-identity、イラストには image-generation を使用する。トリガーフレーズ：「icon design」「svg icon」「icon system」「custom icons」「icon animation」「icon grid」「icon accessibility」「duotone icon」「icon set」「animated icon」
記事、小紅書のノート、WeChat 公式アカウントの投稿、X の投稿、Instagram、Facebook、LinkedIn、YouTube、TikTok、Pinterest、Snapchat、Reddit、Threads、Bluesky、Medium、トピックの下書き、およびカバー、ソーシャルカバー画像、ポスタープロンプト、スタイルテンプレートに基づく画像プロンプト、長文テキストからの画像生成のリクエスト向けに、共有の Punk スタイルライブラリからローカライズされたカバー画像と再利用可能な画像プロンプトを生成する。このスキルを使用してソースコンテンツを分析し、未対応の比率を利用可能な最も近い生成比率に解決し、ローカライズされたビジュアルスタイルを選択し、最終プロンプトを保存し、画像生成ツールが利用可能な場合は画像を生成する。
完成したユーザーフロードキュメントをレビュー/判定し、下流のワイヤーフレーム工程がすべての画面を列挙できるか、また各パスが完全で、たどれ、耐性があり、アクセシブルで、妥当かを判断するときに使用する。これは受け入れゲートであり、執筆ではない。ユーザーフロードキュメントとはナビゲーション/インタラクションのグラフである：エントリー + IA フレーム、ハッピーパス、分岐、エラー/復旧 + エッジ状態、耐性、フローレベルのアクセシビリティ、通過する画面。単一の基準で判定する：目標がフローに対応する（孤立なし）、エントリーと出口が定義されている、分岐が解決する、行き止まりがない、状態（ローディング + 成功を含む）が網羅されている、不可逆な操作が保護されている、すべてのパスがキーボード/支援技術で完了できる、フローが客観的に妥当である、記法が同期している、画面が列挙可能である。修正時には差分範囲のレビューも行う。出力は `VERDICT: approve|revise` のみで、実行可能な指摘を添える。基準を満たすドキュメントは承認し（薄いドキュメントを誤って revise にしない）、明確な欠落がある場合にのみ revise とする。執筆用ではなく、ワイヤーフレーム用でも、PRD 用でもない。
Web とネイティブ向けのユニバーサル React UI フレームワーク（v1.144.0+）。React Native + Web でクロスプラットフォームアプリを構築するとき、`styled()` でスタイル付きコンポーネントを作成するとき、デザイントークン/テーマを設定するとき、Tamagui UI コンポーネント（Button、Dialog、Sheet、Input、Select、Tabs など）を使うとき、アニメーションを扱うとき、Bento/Takeout のプレミアムコンポーネントが必要なときに使用する。トリガー: "tamagui"、"universal UI"、"react native web"、"styled()"、"design tokens"、"$token"、"XStack/YStack/ZStack"、"useTheme"、"useMedia"、"@tamagui/*" インポート、"bento"、"takeout"、"one.js router"、"createStyledContext"、"withStaticProperties"、"@tanstack/react-table"、"zero sync"、"better auth"。
サイトマップ、ナビゲーションツリー、カテゴリ構造、メニューラベル、またはマルチスクリーン製品に対して構造化された情報アーキテクチャ監査を実施します。重要度評価付きの問題リストと具体的な修正案を提示し、スキーム／タスクの不一致、狭く深い階層、情報の手がかりが少ないラベル、一貫性のないラベリング体系、単一経路の見つけやすさ、行き止まりページを検出します。IA、サイト構造、カテゴリ、タクソノミー、ラベルの監査時、またはナビゲーションやマルチスクリーン構造を生成した後の検証ステップとして使用。
規律あるスペーシング、サイジング、グリッドで画面をレイアウトする — すべての値を 1 つの基準単位（8px/4px スケール）に揃え、コンテンツをグリッドに整列させ、近接性と余白でグループ化し、空間で視覚的階層を確立する。恣意的なピクセル値や場当たり的な整列をシステムで置き換える。空間における視覚的階層／整列／構成の基礎も扱う。レイアウトの設計や批評、スペーシング／パディング／マージンの設定、スペーシングスケールやデザイントークンの構築、グリッド／カラムの選択や適用、不整合なスペーシングや整列の修正、空間と位置による視覚的階層の確立を求められたときにトリガーする。
新規プロジェクト向けに現在の weapp-tailwindcss v5 と Tailwind CSS 4 を設定する。uni-app、uni-app x、Taro、Mpx、ネイティブミニプログラム、weapp-vite、Vite、Webpack 5、Rspack、Gulp、単体 CLI、およびミニプログラム/H5/Web/App のマルチプラットフォームを対象とする。セットアップ、インストール、統合、フレームワーク設定の選択、`weapp-tw` での CSS ビルドを行うときに使用する。旧バージョンの移行、トラブルシューティング、独自ビルドツール、Expo React Native、ReactLynx には使用しない。
コンバージョンにつながる Amazon A+ Content（旧称 Enhanced Brand Content、2019 年に改称）を計画・作成します。Premium A+ 層のモジュール（動画、カルーセル、インタラクティブなホットスポット、より大きな比較表、Q&A）や、カタログ全体にわたるブランドストーリーのカルーセルを含みます。適切なモジュールレイアウトの選択、説得力のあるモジュールコピーの作成、比較表の設計、デザイナーにそのまま渡せる画像ブリーフの作成を行います。ユーザーが A+ Content、Enhanced Brand Content、Premium A+、ブランドストーリーモジュール、比較表、インタラクティブな A+ モジュール、A+ 動画、または Amazon リスティングの箇条書きの下にあるビジュアルセクションの作成、計画、改善、監査を依頼したときに使用します。トリガーフレーズには "A+ content"、"EBC"、"enhanced brand content"、"brand story module"、"comparison chart"、"below the fold"、"premium A+"、"brand story"、"A+ video"、"interactive modules"、"premium content" が含まれます。ツールは不要です。ユーザーが商品を説明し、既存のコピーを貼り付けます。
Amazon ブランドストアを計画する。ページ構造、ナビゲーション、ショッパブルコンテンツ、トラフィック計画を設計し、ストアが死んだページではなく本物のブランドの目的地として機能するようにする。ユーザーが Amazon ストア、ブランドストア、ストアフロントのデザイン、ストアページ、ショッパブル画像、ストアへの集客について尋ねたときに使用する。トリガーフレーズ："amazon store"、"brand store"、"storefront"、"store design"、"store pages"、"shoppable images"、"store traffic"。ツールなしで動作する。
読み手が 3 秒で結論をつかめるように、データセットを表現する正しい方法を選ぶ——20 種類以上のチャートと図の形式のカタログ、それぞれの使用場面と失敗モード、さらにどれでも読みやすくするエンコーディングの判断（要点を伝える見出し、直接ラベル、軸を消す、ハイライトとミュート、注意点の明示）を提供する。スタイル非依存——出力先がすでに持つパレットやデザインシステムと組み合わせて使える。投稿、ブリーフ、デッキ、レポートのために調査結果、ベンチマークデータ、利用指標、研究知見をチャート化するとき、また既定の棒グラフが要点を埋もれさせていると感じるときに使用する。
RunComfyでOpenAI GPT Image 2（ChatGPT Images 2.0の`/edit`エンドポイント）を使って画像を編集します。モデルのドキュメントに記載されたプロンプトパターンをまとめ、同じモデルに単純なプロンプトを入力するよりも優れた出力を得られるようにします。GPT Image Editの強み（保持を指示する表現、画像内テキストの多言語編集、最大10枚の参照画像、レイアウト／タイポグラフィの精度）、スキーマ、Nano Banana Edit／Flux Kontext／GPT Image 2 t2iに切り替えるタイミングを説明します。ローカルのRunComfy CLI経由で `runcomfy run openai/gpt-image-2/edit` を呼び出します。「gpt image edit」「gpt-image-edit」「chatgpt image edit」「edit with gpt image 2」などの語句や、このモデルでの画像編集を明示的に求める指示で起動します
ブラウザでレンダリングされるメディアにおける GSAP アニメーションの作成、統合、レビューのための制作ガイダンス。決定論的なキネティックタイポグラフィ、SVG の描画とモーフィング、モーションパス、FLIP トランジション、レスポンシブなモーションシステム、HTML ビデオコンポジションや React ベースのレンダラー内のフレームシーク可能な GSAP タイムラインに使用する。通常の CSS トランジションや一般的なフロントエンド開発には使用しない。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。