Skills
エージェント向けにパッケージ化された専門スキルと手順を 96,981 件掲載。コマンド 1 行でインストールできます。
デザイン・UI
iOS/macOS アプリ向けの App Store スクリーンショットのリサーチ、競合分析、作成、アップロードツール。次のいずれかのタスクで App Store スクリーンショットを扱う場合にこのスキルを使用する：(1) 自分のカテゴリの競合スクリーンショットを見つけて分析する、(2) 参照用に競合スクリーンショットをローカルにダウンロードする、(3) スクリーンショット戦略（スタイル、キャプション、機能）を分析する、(4) スクリーンショットのキャプション用に ASO キーワードを調査する、(5) スクリーンショットの順序と訴求内容を計画する、(6) HTML/CSS エクスポートツールを使ってスクリーンショットを作成する、(7) スクリーンショットを閲覧・比較するためのローカルプレビューサイトを生成する、(8) ブラウザまたは Puppeteer で正しいサイズのスクリーンショットをエクスポートする、(9) 複数の App Store ロケール向けにスクリーンショットをローカライズする、(10) API 経由で App Store Connect にスクリーンショットをアップロードする。
アラビア語の Web アプリおよびモバイルアプリ向けに右から左 (RTL) レイアウトを実装する。RTL レイアウト、アラビア語のテキスト方向、双方向 (bidi) テキスト、アラビア語 CSS、"right to left" についてユーザーが尋ねる場合、またはアラビア語 UI を構築する必要がある場合に使用。CSS 論理プロパティ、Tailwind RTL、React/Next.js の RTL 設定、アラビア語のタイポグラフィ、フォント選択を扱う。ユーザーが共有の RTL パターンを明示的に求めない限り、Arabic RTL（タイポグラフィは似ているが異なる）には使用しない。
React、Vue、Solid、Svelte、Preact 向けのゼロコンフィグアニメーション。@formkit/auto-animate（3.28kb）を使用する。10 件以上の既知のエラーを防ぐ：SSR/Next.js のインポート、条件付き親要素、key の欠落、flexbox の幅、テーブルの display、Jest/esbuild の設定、CSS position の競合、Vue/Nuxt の登録、Angular ESM。次の場合に使用する：リスト/アコーディオン/トースト/フォームのアニメーション、SSR アニメーションエラーのトラブルシューティング、アクセシブルなアニメーションが必要（prefers-reduced-motion を自動で尊重）、あるいは Motion のオーバーヘッドなしでそのまま使えるトランジションを求める場合。
AI アシスタントに MCP ツールを使った FlutterFlow アプリの開発方法を教える。FlutterFlow プロジェクトの操作、FF YAML の編集、ページやコンポーネントの作成・確認、プロジェクト設定の読み取り、FlutterFlow ウィジェットツリーの操作を行うときにこのスキルを使用する。検出・読み取り・編集・設定のための 25 個の MCP ツールすべてを扱う。トリガー：FlutterFlow、FF YAML、FF page、FF component、FF widget、FF theme、FF project。
CodeSpring の計画を、クライアントが実際に見られるクリック可能なローカルモックアップに変えます。コア機能ごとに 1 画面、実際のコピー、もっともらしいデータ、ライトモードとダークモードを備えた適切なトークン駆動のデザインシステム、ブランディングを示すスタイルガイドページを含みます。次に、書面の計画では示せなかったもの——画面の順序、階層、位置、そして不完全であると判明した選択——を浮き彫りにするレビューを実行します。すべての修正を CodeSpring のノートとタスクにフィードバックします。マップとノートが存在した後、PRD が生成される前に実行します。トリガー：「make a mockup」、「mock up the UI」、「show me what it looks like」、「build a prototype」、「design the screens」、「what would this app look like」、「create a UI mockup for this plan」、「I want to show the client something」。
ユーザーが "create a diagram"、"make a flowchart"、"generate a .drawio file"、"draw.io diagram"、"diagrams.net"、"architecture diagram"、"sequence diagram"、"ER diagram"、"class diagram"、"network diagram"、"org chart"、"workflow diagram"、"UML diagram"、"ArchiMate diagram"、"C4 diagram"、"C4 model"、"enterprise architecture" を求めたり、"drawio"、"mxGraph"、図の可視化に言及したときに、このスキルを使用する。実運用に耐える DrawIO XML ファイルを作成するための包括的な知識を提供する。
コードベースの学習ガイドを洗練されたインタラクティブな Web 体験に変える。ユーザーが完成した学習ガイドの markdown ファイル（codebase-study-guide などから）を持ち、それをインタラクティブな教育アプリにしたい場合にこのスキルを使用する。「この学習ガイドをインタラクティブにして」「これをインタラクティブな体験にして」「この学習ガイドを可視化して」「インタラクティブ版を作成して」といったリクエスト、またはユーザーが学習ガイドの .md ファイルを持ち、よりリッチな提示を望む場合にトリガーされる。スクロール駆動のストーリーテリング、インタラクティブなアーキテクチャ図、アニメーション付きのコードウォークスルー、段階的な開示を備えた Vite 配信のシングルページアプリを生成する。
長文の markdown（仕様書、RFC、レポート、計画書、解説）を、固定目次、スクロール位置表示、検索フィルター、コードコピーボタン、デザインシステムに基づくブランドトークンを備えた、軽いインタラクティブ機能付きの単一ファイル HTML ドキュメントに変換します。markdown-html-orchestrator が入力を DOCUMENT と分類した場合、または /cs-md-document から直接呼び出した場合に起動します。config_loader.py でデザインシステム設定を読み込み、ユーザーの派生 CSS カスタムプロパティ 12 個をインライン化します。オンボーディングが未実施の場合はレンダリングを拒否します。出力は単一ファイルで、外部依存は Google Fonts と Prism.js CDN のみです。フレームワークランタイムもビルド工程も不要です。オーケストレーターによるルーティング後、またはデザインシステムのオンボーディング確認後に使用します。
製品・ナレッジポイント・コピーを「スマホのシステム UI 風」のシネマティックな Web デモアニメーションにする——視聴者は本物のスマホを丁寧に演出して録画した画面を見ているような感覚になる。ロック画面の通知、チャット、設定画面、コントロールセンター、アプリ画面をカットごとに提示し、HyperOS/MIUI 級の操作感のモーションエフェクト + バーチャル時計プレイヤーを備え、全画面録画して完成動画にできる。ユーザーが、スマホ UI デモ、スマホ録画風アニメーション、アプリデモ Web ページ、製品をスマホ内のデモにする、ロック画面通知アニメーション、システム UI 風デモページ、またはスマホ風デモページの一括改修・アップグレードを求めたら、本 Skill を使用する。内容は完全にオープンで制限なし：あらゆる製品機能、講座のナレッジ、サイエンスの語りを「スマホの中で起きていること」に変換できる。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。