Skills
エージェント向けにパッケージ化された専門スキルと手順を 98,284 件掲載。コマンド 1 行でインストールできます。
開発
App Router、Server Components/Actions、Cache Components（"use cache"）、非同期ルートパラメータで Next.js 16 アプリを構築。proxy.ts（middleware.ts を置き換え）と React 19.2 を含む。使用場面：Next.js 16 プロジェクトの構築、または非同期パラメータ（Promise 型）、"use cache" ディレクティブ、パラレルルートの 404（default.js の欠落）、proxy.ts の CORS のトラブルシューティング。
2025 年のモダンなアプローチで Next.js の Progressive Web App（PWA）を構築するための包括的ガイド。Next.js アプリでインストール可能性、オフライン対応、Service Worker、Web アプリマニフェスト、キャッシュ戦略、プッシュ通知などの PWA 機能を実装する場合や、既存の Next.js アプリを PWA に変換する場合に使用する。ネイティブの Next.js PWA サポート（依存関係ゼロ、App Router）と Serwist パッケージ（高度なオフライン機能、Service Worker 管理）の両方を扱う。PWA の問題のトラブルシューティング、PWA パフォーマンスの最適化、next-pwa などの非推奨パッケージからの移行にも使用する。
`better-sqlite3` を使わずに TypeScript でベクトル / RAG ストレージ向けに Node 24+ 内蔵の `node:sqlite` とロード可能な `sqlite-vec` 拡張をセットアップする場合、または vec0 の BigInt rowid、sqlite-vec での vitest のハング、`node:sqlite` 配下の `.ts` インポートエラー、"sqlite extension not loadable" をデバッグする場合に使用します。拡張のロード、vitest の非互換性（`node --test` を使用）、tsconfig のフラグ、CLI の shebang を扱います。`node:sqlite`、`sqlite-vec`、vec0 / ベクトルストレージでトリガーし、ユーザーが better-sqlite3 に言及していない場合でも対応します。
タスクがプロダクトのフロントエンドの可視インターフェース、インタラクション動作、フロントエンドの状態とデータフロー、コンポーネントやスタイルの構成の実装、変更、リファクタリング、レビューを必要とするときに、ユーザーの指名なしで積極的に使用する。これらのフロントエンド動作のテストと検証戦略にも用いる。ページ、フォーム、リスト、モーダル、レスポンシブ、スタイルとモーションの実装、フロントエンドコードの帰属調整に適用。ビジュアルスタイル、配色、タイポグラフィ、デザインの方向性といった設計判断には使用せず、純粋なバックエンド、ビルドとデプロイ、依存関係のアップグレード、インポートパスを直すだけの機械的な変更、既存サイトの操作のみ、デザイン画像の生成のみ、この skill に関する議論にも使用しない。ユーザーが明示的に使用しないよう求めた場合はトリガーしない。
OpenAI のステートレス API で構築 —— Chat Completions（GPT-5、GPT-4o）、Embeddings、Images（DALL-E 3）、Audio（Whisper + TTS）、Moderation。Node.js SDK と、Cloudflare Workers 向けの fetch ベースの手法を含む。使用場面：GPT-5/GPT-4o でのチャット補完の実装、SSE によるストリーミング応答、function calling/tools の使用、JSON スキーマによる構造化出力の作成、RAG 用の embedding 生成（text-embedding-3-small/large）、DALL-E 3 による画像生成、GPT-Image-1 による画像編集、Whisper による音声の文字起こし、TTS による音声合成（11 種類の声）、コンテンツのモデレーション（11 の安全性カテゴリ）、またはレート制限（429）、無効な API キー（401）、function calling の失敗、ストリーミング解析エラー、embedding の次元不一致、トークン上限超過のトラブルシューティング。
OpenDesign ビルドスクリプトツールの使用ガイド。@opensig/open-scripts CLI を使ってアイコン生成、SVG クリーンアップ、コンポーネントビルド、スタイルコンパイル、デザイントークン生成を行う必要があるときにこのスキルを使用する。5 つのコマンドに対応：gen:icon（SVG から Vue アイコンコンポーネントへ変換）、clean:svg（SVG のクリーンアップと最適化）、build:component（Vue コンポーネントライブラリのビルド）、build:style（SCSS スタイルのコンパイル）、gen:token（デザイントークンの CSS 変数生成）。使用シーン：(1) ビルドスクリプトの設定と実行、(2) アイコン/トークン設定ファイルの作成、(3) ビルドプロセスとコマンドの使用方法の理解
ユーザーが「opsx バッチ修正」「batch opsx-jira-fix」「opsx-jira-fix-batch」「batch OpenSpec Jira fix」と言ったときにトリガーする。薄いトリガーシェル：Jira ID/URL を解析し、Engine opsx-jira-fix-workflow で goal-driven-batch にエンキューする。修正やマージは実行しない。単一 issue（opsx-jira-fix-workflow）や Jira 以外のキュー（goal-driven-batch）には使用しないこと。
`orca-np` CLI を使って、Orca 管理下の worktree、フォルダーコンテキスト、ターミナル、リポジトリ、自動化、アーティファクト、スキル共有、worktree コメント、Orca の組み込みブラウザーを操作します。ユーザーが「$orca-cli」「Orca worktree」「child worktree」「worktree で codex/claude を起動」「Orca ターミナルを読む／待機する／送信する」「handoff」／「handover」／「別のエージェントに渡す」「Orca browser」「orca artifacts」「share skills」と言った場合に使用します。Orca の状態が関係する場合は、生の git worktree、アドホックな PTY、Computer Use よりもこのスキルを優先してください。CLI、ファイルシステム、API では実行できず、表示中のウィンドウを GUI で操作する必要がある場合に限り、Computer Use を使用してください
Web アニメーションやレンダリング性能の作業を最適化・監査・出荷準備するときに使用する：フレームループ、スクロール／ビューポート表示、マウント／アンマウント遷移、canvas／WebGL のライフサイクル、モーションの低減、遅延レンダリング、画面外の遅延処理など。ジャンク、フレームごとのアロケーション、強制リフロー、レンダリングループ、画面外で一時停止しないアニメーション、content-visibility、requestIdleCallback、アニメーションやレンダリング問題のための Chrome DevTools パフォーマンストレース分析、ブラウザ駆動の CSS／WAAPI・最小限の JS・phase・Motion／GSAP の選択に使用する。ユーザーが phase の API や挙動について明示的に尋ねたときに使用する。探索的なアニメーションの構想、プロトタイピング、視覚的な反復、バリアントの試行には使用しない。コードがすでに phase を import していても同様であり、ユーザーが性能ガイダンス、監査、本番実装、出荷準備レビュー、または phase 自体について求めるまで待つ。
Prisma Composer（`@prisma/composer`）でアプリを記述、テスト、デプロイする方法：`compute()` と型付き依存関係でサービスを宣言し、RPC コントラクトを定義し、Module を合成し、サービスの入力を宣言し（設定とシークレットを 1 つのスキーマとして扱い、`input()` で読み戻す）、既製の cron/storage/streams Module を合成し、`bucket()` で生の S3 互換オブジェクトストアバケットをプロビジョニングし、拡張機能（`prisma-composer-*` という名前の npm パッケージ）を探し、`mockService`/`bootstrapService` でテストし、`prisma-composer dev` でアプリ全体をローカル実行して `prisma-composer log` でログを追跡し、`prisma-composer deploy`（stage、destroy）でデプロイする。Prisma App の構築、サービスの依存関係の配線、Postgres データベースの追加、スケジュールジョブ / blob ストレージ / イベントストリーム / 生バケットの追加、合成されたサービスのテスト作成、アプリのローカル実行、ログの確認、環境のデプロイ／破棄を行うときに使用。トリガーは "prisma composer"、"@prisma/composer"、"prisma app"、"compute()"、"service.load()"、"module()"、"contract()"、"mockService"、"bootstrapService"、"prisma-composer dev"、"prisma-composer log"、"prisma-composer deploy"、"--stage"、"--fresh"、"--tail"、"prisma-composer destroy"、"prisma-composer-"、"bucket()"。
AI エージェント向けにプロジェクトのコンテキストとコードベースのドキュメントを生成する。`.agents/` ディレクトリを作成し、プロジェクト概要と詳細なコードベース分析(アーキテクチャ、規約、テスト、インテグレーション、チェックリスト、ワークフロー、垂直スライシングが検出された場合の機能、レビュー)を含める。プロジェクトの作業を始める、既存のコードベースにオンボーディングする、エージェント向けのプロジェクトドキュメントを生成する、コードベースのパターンを把握する、最近の git 変更からインデックスを増分更新する場合に使用。トリガー: "initialize .agents"、"setup project index"、"index project"、"map codebase"、"analyze codebase"、"project overview"、"codebase summary"、"onboarding to this repo"、"integrate feedback"、"sync knowledge"、"refresh codebase"、"sync codebase"、"patch index"。機能開発、Obsidian のセッションノート、prettier や eslint などの開発ツールのセットアップには使用しない。
Web アプリケーションプロジェクト向けの包括的な計画ドキュメントを生成し、作業を検証基準を組み込んだコンテキストセーフなフェーズに構造化する。プロジェクトのニーズに応じて IMPLEMENTATION_PHASES.md、DATABASE_SCHEMA.md、API_ENDPOINTS.md、ARCHITECTURE.md などの計画ドキュメントを作成する。Cloudflare Workers + Vite + React スタックに最適化。新規プロジェクトの開始、主要機能の追加、既存作業を管理可能なフェーズへの再編成時に使用する。キーワード：project planning、planning documentation、IMPLEMENTATION_PHASES.md、DATABASE_SCHEMA.md、API_ENDPOINTS.md、ARCHITECTURE.md、UI_COMPONENTS.md、TESTING.md、AGENTS_CONFIG.md、phased development、context-safe phases、verification criteria、exit criteria、planning docs generator、web app planning、Cloudflare Workers planning、Vite React planning、project structure、project phases、major features planning、new project setup
コードプロジェクトを Obsidian ナレッジベースに変換する。ユーザーが obsidian、プロジェクトドキュメント、ナレッジベース、プロジェクト分析、プロジェクト変換に言及したときに起動。【起動後に必ず実行】： 1. まず本 SKILL.md ファイルを最後まで読む 2. AI 書き込みルール（デフォルトは 00_Inbox/AI/、追記式、統一 Schema）を理解する 3. STEP 0 を実行：AskUserQuestion を使ってユーザーに確認を求める 4. ユーザーの確認後に STEP 1 のプロジェクトスキャンを開始する 5. STEP 0 → 1 → 2 → 3 → 4 の順序を厳守する 【禁止事項】： - SKILL.md を読まずにプロジェクト分析を始めること - STEP 0 のユーザー確認をスキップすること - 30_Resources に直接作成すること（まず 00_Inbox/AI/ へ） - 出力場所を独断で決めること
FMC TanStack Start アプリ向けの React 19 + TypeScript：型付きコンポーネント、イベント、ジェネリクス、ref-as-prop、Compiler 優先のメモ化、useEffect の規律（命名、Effect を使うべきでない場合、代替手段）。React のコンポーネント／フック／イベントに型を付ける場合や、useEffect、useEffectEvent、派生状態、データ取得 effect、oxlint React Compiler / Rules of React の effect ルールを書いたりレビューしたりする場合に使用。ルーティング／サーバー境界には対象外（tanstack-start-* スキルを参照）。
React Bits UI コンポーネントフレームワークの専門家。フロントエンドページを開発するときは、常に react-bits フレームワークのコンポーネントを優先して標準化されたコードを出力する。自然言語での要件記述に対応し、最適なコンポーネントの組み合わせを自動でマッチングする。トリガーワード：react-bits、reactbits、アニメーションコンポーネント、ランディングページ、landing page、hero section、animated component、フロントエンドページ開発、ページを作る。
コードベース全体を読み分析したうえで、大規模ソフトウェアリポジトリ向けの独立した複数ページの Markdown wiki パッケージを構築する。リポジトリ wiki ドキュメント、オンボーディング資料、アーキテクチャガイド、コードベースツアー、メンテナーハンドブック、あるいはコード学習者や新しいメンテナー向けにモジュール、コアコードパス、アルゴリズム、設計判断、トレードオフ、テスト、ツーリング、運用を深く解説することを求められたときに使用する。数十万行のコードを持ち、メンテナーが広範な網羅性とサブシステムの深いドキュメントを必要とする大規模リポジトリに最適化されている。生成された wiki は独立したパッケージ（通常は `wiki/` または `maintainer-wiki/`）に置く必要があり、ユーザーが明示的に上書きしない限り、既存の `docs/`、`website/`、製品ドキュメントアプリに混在させてはならない。ユーザーが生成された wiki の公開やデプロイを明示的に求めた場合は、任意で Rspress／静的ドキュメントサイトのセットアップにも対応する。Markdown 出力に対応し、有用な場合は Mermaid、Graphviz、KaTeX を使用する。
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。