Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,770 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
ユーザーがサインアップ／登録以外のフォームを最適化したい場合に使用します。リード獲得フォーム、問い合わせフォーム、デモ申請フォーム、応募フォーム、アンケート、チェックアウトフォームなどが対象です。「フォーム最適化」「リードフォームのコンバージョン」「フォームの入力負荷」「フォーム項目」「フォーム完了率」「問い合わせフォーム」「誰もフォームに入力しない」「フォーム離脱」「項目が多すぎる」「デモ申請フォーム」「リードフォームがコンバージョンしない」などに言及した場合にも使用してください。情報を収集するサインアップ以外のフォーム全般が対象です。サインアップ／登録フォームについては signup-flow-cro、フォームを含むポップアップについては popup-cro を参照してください。
ユーザーがサインアップ、登録、アカウント作成、トライアル開始のフローを最適化したい場合に使用します。「サインアップのコンバージョン」「登録時の負担」「サインアップフォームの最適化」「無料トライアルへの登録」「サインアップ離脱の削減」「アカウント作成フロー」「登録者がいない」「サインアップの離脱」「トライアルのコンバージョン率」「登録が完了しない」「登録手順が多すぎる」「サインアップを簡略化」などに言及した場合にも使用してください。サインアップ／登録フローの成果が出ていない場合は常に使用してください。登録後のオンボーディングについては onboarding-cro、アカウント作成以外のリード獲得フォームについては form-cro を参照してください。
ユーザーがアプリ内のペイウォール、アップグレード画面、アップセルモーダル、機能ゲートを作成または最適化したい場合に使用します。「ペイウォール」「アップグレード画面」「アップグレードモーダル」「アップセル」「機能ゲート」「無料から有料への転換」「フリーミアムのコンバージョン」「トライアル終了画面」「上限到達画面」「プランのアップグレード案内」「アプリ内価格」「無料ユーザーがアップグレードしない」「トライアルから有料への転換」「ユーザーに支払ってもらう方法」などに言及した場合にも使用してください。製品内でユーザーにアップグレードを促すあらゆる場面が対象です。公開料金ページ（page-cro を参照）とは異なり、ユーザーが価値を体験した後、製品内でアップグレードを促す場面に焦点を当てます。料金の決定については pricing-strategy を参照してください。
花叔Design——HTML で高精細なプロトタイプ、スライド、アニメーション、ビジュアライゼーションを作成し、専門家レビューを行います。新しいデザインでは必ず、最初に3つの案を提示してユーザーに選んでもらいます（スタイルやブランドが指定されている場合も同様）。案が選ばれてから作業を進めます。起動語句：プロトタイプ、PPT、スライド、アニメーション、デザインスタイル、レビュー、HTML ページ、UI モックアップ、MP4/GIF のエクスポート、見栄えよく。プロダクション品質の Web アプリやバックエンドが必要なシステムには適していません。
ユーザーがコンバージョン目的でポップアップ、モーダル、オーバーレイ、スライドイン、バナーを作成または最適化したい場合に使用します。「離脱意図」「ポップアップのコンバージョン」「モーダルの最適化」「リード獲得ポップアップ」「メールポップアップ」「告知バナー」「オーバーレイ」「ポップアップでメールを収集」「離脱ポップアップ」「スクロールトリガー」「固定バー」「通知バー」などに言及した場合にも使用してください。オーバーレイや割り込み型のコンバージョン要素全般が対象です。ポップアップ以外のフォームについては form-cro、一般的なページのコンバージョン最適化については page-cro を参照してください。
レイアウトのルール、ヒーローセクションのデザイン、CTA の心理学を用いてランディングページのコンバージョンを最適化します。ファーストビューの構成、ソーシャルプルーフの配置、モバイルデザイン、F 型の読み進め方を扱います。用途：スタートアップのランディングページ、製品ページ、SaaS マーケティング、コンバージョン最適化。起動語句：ランディングページ、ヒーローセクション、ファーストビュー、コンバージョン最適化、ランディングページデザイン、CTA ボタン、ヒーロー画像、ランディングページのレイアウト、SaaS ランディングページ、製品ページデザイン、コンバージョン率、ランディングページのベストプラクティス
包括的なデザインスキル：ブランドアイデンティティ、デザイントークン、UIスタイリング、ロゴ生成（55 種類のスタイル、Gemini、Atlas Cloud、MuAPI AI）、コーポレートアイデンティティプログラム（50 種類の成果物、CIP モックアップ）、HTML プレゼンテーション（Chart.js）、バナーデザイン（22 種類のスタイル、ソーシャル／広告／Web／印刷）、アイコンデザイン（15 種類のスタイル、SVG、Gemini 3.1 Pro）、ソーシャルフォト（HTML→スクリーンショット、複数プラットフォーム対応）。操作：ロゴデザイン、CIP 作成、モックアップ生成、スライド作成、バナーデザイン、アイコン生成、ソーシャルフォトやソーシャルメディア画像の作成、ブランドアイデンティティやデザインシステムの構築。プラットフォーム：Facebook、Twitter、LinkedIn、YouTube、Instagram、Pinterest、TikTok、Threads、Google Ads。
ウェブアニメーションをフレームバジェット内に収める — 合成のみのプロパティをアニメーション化し、ページが忙しいときはメインスレッド外で動きを処理し、フレーム落ちしたら原因を特定する。レイアウト/ペイント/コンポジットのパイプライン、安価なプロパティ切り替え、CSS と WAAPI と requestAnimationFrame の比較、Framer Motion のハードウェアアクセラレーション経路、フレームごとの React の再レンダリング、継承 CSS 変数の再計算、ブラーのコスト、`will-change` が実際に効く場面を扱う。アニメーションがカクつく、途切れる、フレーム落ちするSymptoms... ja clean: アニメーションがカクつく、途切れる、フレーム落ち—when
shadcn/ui コンポーネント（Radix UI + Tailwind ベース）、Tailwind CSS のユーティリティファーストなスタイリング、canvas ベースのビジュアルデザインを使って、美しくアクセシブルなユーザーインターフェースを作成します。ユーザーインターフェースの構築、デザインシステムの実装、レスポンシブレイアウトの作成、アクセシブルなコンポーネント（ダイアログ、ドロップダウン、フォーム、テーブル）の追加、テーマや色のカスタマイズ、ダークモードの実装、ビジュアルデザインやポスターの生成、複数のアプリにわたる一貫したスタイルパターンの確立に使用します。
ソーシャルメディア、広告、ウェブサイトのヒーロー画像、クリエイティブ素材、印刷物向けのバナーをデザインします。複数のアートディレクション案があり、ビジュアルは生成または提供されたものを任意で使用できます。アクション：デザイン、作成、バナー生成。プラットフォーム：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、ウェブサイトのヒーロー画像、印刷物。スタイル：ミニマリスト、グラデーション、大胆なタイポグラフィ、写真ベース、イラスト、幾何学、レトロ、グラスモーフィズム、3D、ネオン、デュオトーン、エディトリアル、コラージュ。
ブランドを重視したランディングページデザイナー。ブランドアイデンティティのヒアリング（色、タイポグラフィ、形状言語）を行い、Stitch を使って洗練されたランディングページを生成・改良し、デプロイ可能な HTML を提供します。ユーザーがランディングページ、ホームページ、マーケティングページの作成、デザイン、構築を依頼し、視覚的な方向性がまだ定まっていない場合に使用します。デザインモックアップがある場合、ダッシュボードやアプリ UI が必要な場合、コンポーネント単位で作業している場合、複数ページのアプリを構築している場合、または既知のデザイントークンでスタイルを変更する場合は使用せず、代わりに frontend-design を使用してください。
レイアウトのルール、ヒーローセクションのデザイン、CTA の心理学を用いてランディングページのコンバージョンを最適化します。ファーストビューの構成、ソーシャルプルーフの配置、モバイルデザイン、F 型の読み進め方を扱います。用途：スタートアップのランディングページ、製品ページ、SaaS マーケティング、コンバージョン最適化。起動語句：ランディングページ、ヒーローセクション、ファーストビュー、コンバージョン最適化、ランディングページデザイン、CTA ボタン、ヒーロー画像、ランディングページのレイアウト、SaaS ランディングページ、製品ページデザイン、コンバージョン率、ランディングページのベストプラクティス
プラットフォームの正確な仕様に沿って App Store と Google Play のスクリーンショットを作成します。iOS/Android の寸法、ギャラリーの順序、デバイスモックアップ、プレビュー動画を扱います。用途：アプリストア最適化、ASO、アプリのスクリーンショット、アプリプレビュー、Play Store の掲載ページ。起動語句：App Store のスクリーンショット、ASO、アプリストア最適化、Play Store のスクリーンショット、アプリプレビュー、アプリ掲載、iOS スクリーンショット、Android スクリーンショット、アプリストア画像、アプリモックアップ、デバイスモックアップ、アプリギャラリー、ストア掲載
最新の Web 開発のベストプラクティスを検索するツール。必須：すべての HTML/CSS およびクライアントサイド JS のタスクで最初に実行してください。省略しないでください。Web API は急速に進化しており、学習データには古いパターンが含まれています。次の場合は直ちに使用：- UI/レイアウト：モーダル/ダイアログ/ポップオーバー、テーブル、ダークモード、アンカーポジショニング、コンテナクエリ、`:has()` など。- スクロール/モーション：View Transitions、スクロール駆動アニメーション、パララックス/リビールなど。- パフォーマンス：CWV（LCP、INP）、content-visibility、Fetch Priority、画像最適化など。- システム/API：セキュリティ、パスキー、HTML サニタイズ、Web Components、日付/タイムゾーン、組み込み AI、WebAssembly など。- フレームワーク：React、Vue、Angular などでの標準 HTML/CSS/DOM。- 一般的なフロントエンド：フォーム、検証（`:user-valid`）、自動入力、アクセシビリティ、カスタムセレクト、スクロールバーなど。次の場合は使用しない：- バックエンド：SQL、ORM、API ルートなど。- インフラ/スクリプト：CI/CD、Docker、Actions、Python/Go、Git など。- ツール/軽微な作業：Vite、tsconfig、ESLint、テスト、コピー/名前変更、サードパーティのドキュメントなど。
プラットフォームの正確な仕様に沿って App Store と Google Play のスクリーンショットを作成します。iOS/Android の寸法、ギャラリーの順序、デバイスモックアップ、プレビュー動画を扱います。用途：アプリストア最適化、ASO、アプリのスクリーンショット、アプリプレビュー、Play Store の掲載ページ。起動語句：App Store のスクリーンショット、ASO、アプリストア最適化、Play Store のスクリーンショット、アプリプレビュー、アプリ掲載、iOS スクリーンショット、Android スクリーンショット、アプリストア画像、アプリモックアップ、デバイスモックアップ、アプリギャラリー、ストア掲載
レイアウトのルール、ヒーローセクションのデザイン、CTA の心理学を用いてランディングページのコンバージョンを最適化します。ファーストビューの構成、ソーシャルプルーフの配置、モバイルデザイン、F 型の読み進め方を扱います。用途：スタートアップのランディングページ、製品ページ、SaaS マーケティング、コンバージョン最適化。起動語句：ランディングページ、ヒーローセクション、ファーストビュー、コンバージョン最適化、ランディングページデザイン、CTA ボタン、ヒーロー画像、ランディングページのレイアウト、SaaS ランディングページ、製品ページデザイン、コンバージョン率、ランディングページのベストプラクティス
iOS または macOS 向けの SwiftUI コードの作成、レビュー、リファクタリング時に使用します。状態と `@Observable` のデータフロー、ビューの構成、サイズ変更可能なレイアウト、セーフエリア、表示スケール、パフォーマンス、リスト、環境、ローカライズ、アニメーション、Liquid Glass、API 移行を扱います。iPhone Duo、折りたたみデバイス、大型ディスプレイのレイアウト（大型ディスプレイの `NavigationSplitView`、iPhone のタブサイドバー、2 列への再配置、折りたたみデバイスのグリッド、`ArrangementView`、`ReservedRegion`）、ヒンジ効果、縦型バー、`@State` の初期化や合成プロパティの診断、`@ContentBuilder` の曖昧さ、`reorderable` のドラッグ＆ドロップ、カスタム `AsyncImage` `URLSession`、List 外のスワイプアクション、項目にバインドされた `alert`/`confirmationDialog`、`ToolbarOverflowMenu`、`AnimatableValues`、Document API（`Document`/`DocumentReader`）、Instruments `.trace` の記録や分析にも使用します。
@expo/ui パッケージを使用してネイティブ UI を構築します。iOS では本物の SwiftUI、Android では Jetpack Compose を使用します。シート（BottomSheet）、ピッカー、スライダー、トグル、メニュー、グループ化されたフォームセクションには、標準で @expo/ui を使用します。Reanimated、@gorhom/bottom-sheet、RN 組み込みの Picker/Switch は使用せず、@expo/ui を使ってください。@expo/ui にコンポーネントがない場合のみ、RN 組み込みにフォールバックします。注意：@expo/ui List は iOS の設定画面のようなネイティブのグループ行を描画するもので、仮想化リストではありません。大規模なデータセットには FlatList/FlashList を使用してください。共通コンポーネント（Host、Column、Row、Button、Text、List、BottomSheet、FieldGroup、Switch、Slider、Picker、Menu）、RN コミュニティライブラリのドロップイン置き換え、プラットフォーム固有の SwiftUI/Jetpack Compose ツリーを扱います。Expo Router のナビゲーション、Reanimated、データ取得は対象外です。
包括的なデザインスキル：ブランドアイデンティティ、デザイントークン、UI スタイリング、ロゴ生成（55 種類のスタイル、Gemini または Atlas Cloud 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。
shadcn/ui コンポーネント（Radix UI + Tailwind ベース）、Tailwind CSS のユーティリティファーストなスタイリング、canvas ベースのビジュアルデザインを使って、美しくアクセシブルなユーザーインターフェースを作成します。ユーザーインターフェースの構築、デザインシステムの実装、レスポンシブレイアウトの作成、アクセシブルなコンポーネント（ダイアログ、ドロップダウン、フォーム、テーブル）の追加、テーマや色のカスタマイズ、ダークモードの実装、ビジュアルデザインやポスターの生成、複数のアプリにわたる一貫したスタイルパターンの確立に使用します。
ソーシャルメディア、広告、ウェブサイトのヒーロー画像、クリエイティブ素材、印刷物向けのバナーをデザインします。複数のアートディレクション案があり、ビジュアルは生成または提供されたものを任意で使用できます。アクション：デザイン、作成、バナー生成。プラットフォーム：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Google Display、ウェブサイトのヒーロー画像、印刷物。スタイル：ミニマリスト、グラデーション、大胆なタイポグラフィ、写真ベース、イラスト、幾何学、レトロ、グラスモーフィズム、3D、ネオン、デュオトーン、エディトリアル、コラージュ。
レイアウトのルール、ヒーローセクションのデザイン、CTA の心理学を用いてランディングページのコンバージョンを最適化します。ファーストビューの構成、ソーシャルプルーフの配置、モバイルデザイン、F 型の読み進め方を扱います。用途：スタートアップのランディングページ、製品ページ、SaaS マーケティング、コンバージョン最適化。起動語句：ランディングページ、ヒーローセクション、ファーストビュー、コンバージョン最適化、ランディングページデザイン、CTA ボタン、ヒーロー画像、ランディングページのレイアウト、SaaS ランディングページ、製品ページデザイン、コンバージョン率、ランディングページのベストプラクティス
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。