Comp AI

BunやTypeScript、データ取得、状態管理などの実装ルールを示し、プロジェクト内のコード変更を一貫した方法で進めるためのスキルです。

• TypeScript機能を既存ルールで追加したいとき
• 外部データを型安全に扱いたいとき
• データ取得や状態管理の方法を確認したいとき

目的や評価基準を先に定め、指示の明確化、例示、XMLタグ、役割設定などを使って、AIの回答を望む形式に近づけるプロンプトを設計するスキルです。

• AIへの指示を具体化したいとき
• 回答形式を例で示したいとき
• 複雑な依頼の背景や条件を整理したいとき

Stripeを使うサブスクリプションや決済、利用枠、請求Webhookの実装方針を確認し、SKUごとの状態管理や重複イベントへの対応を支援します。

• 請求SKUや価格を追加・変更したいとき
• サブスクリプション決済を実装したいとき
• 請求Webhookの再送に対応したいとき

OpenAPI仕様からSpeakeasyでTypeScript製MCPサーバーを生成し、API操作をAIアシスタントが使うツールとして公開するための設定を案内します。

• APIをAIアシスタントから使えるようにしたいとき
• OpenAPIからMCPサーバーを生成したいとき
• 公開するAPI操作やスコープを設定したいとき

Trigger.dev v4のタスク実行状況や進捗、ストリームをバックエンドやReact画面でリアルタイムに購読する方法を案内します。

• タスクの進捗を画面に表示したいとき
• Runの状態変化を購読したいとき
• ストリーム出力を逐次表示するとき

Trigger.dev v4のタスク作成、入力検証、定期実行、他タスクの起動や待機を実装する基本ルールとコード例を案内します。

• 入力検証付きタスクを作りたいとき
• 定期実行タスクを設定したいとき
• 別タスクの実行結果を扱いたいとき

Trigger.devでcronによる定期実行タスクを定義し、タイムゾーンや環境、ユーザーごとのスケジュールを設定・管理する方法を案内します。

• cronで定期タスクを定義したいとき
• タイムゾーンに合わせて実行時刻を設定したいとき
• 利用者ごとのリマインダーを予約したいとき

Cursorの`.mdc`ルールの書き方や適用範囲の設定、手動呼び出し、競合の確認方法を、具体例とともに案内します。

• プロジェクト用ルールを作りたいとき
• ルールの適用対象を絞りたいとき
• Cursorにルールを手動適用したいとき

OpenAPI仕様と生成時のエラーを調べ、SDK生成が止まった原因を分類し、オーバーレイで直すか仕様の修正や判断を求めるかを整理します。

• SDK生成エラーの原因を調べたいとき
• OpenAPIの問題を修正方針ごとに整理したいとき
• 生成SDKとAPIの型のずれを確認したいとき

連携チェックが保存したユーザーやリソースごとの結果を、共通サービス経由で機能に取り込み、必要な項目を検証して画面向けのデータに整える方法を案内します。

• 従業員ごとの2FA状況を表示したいとき
• 連携チェックの結果を機能で再利用したいとき
• タスクに使える連携元を調べたいとき

OpenAPIの元仕様を直接変更せず、JSONPathで対象を指定するOverlayの作成・適用・検証を案内します。SDKの命名やグループ化、リトライ、ページネーションなどを設定できます。

• SDK生成用のOverlayを作りたいとき
• 既存のOverlayを適用・検証したいとき
• リトライやページネーションを設定したいとき

Trigger.dev v4の`trigger.config.ts`で、タスクの実行環境や再試行、ビルド拡張、ライフサイクル処理を設定する方法を案内します。

• Trigger.devの実行環境を設定したいとき
• ビルドにPrismaやPythonを追加したいとき
• ブラウザー自動化をタスクで使いたいとき

React Hook FormとZodを使ったフォームの設計、入力チェック、エラー表示、動的な項目追加などの実装方針を確認できるスキルです。

• 入力チェック付きフォームの実装
• 複数項目をまたぐ入力検証
• 動的に増減するフォーム項目の実装

既存コードのデザインシステム利用状況を調べ、旧UI部品やlucide-reactのアイコンを@trycompai/design-systemの部品・Carbonアイコンへ置き換えるスキルです。

• 旧UI部品を移行したいとき
• アイコンをCarbonに置き換えたいとき
• 画面のデザインシステム準拠を確認するとき

新機能や修正の作業用ブランチを始める際に、worktreeごとの環境変数、データベース、依存関係、開発サーバーの準備手順を案内します。

• 新機能用のworktreeを準備したいとき
• Linearチケットの作業を始めたいとき
• 複数worktreeで開発環境を分けたいとき

作業中の変更を誤って失わないよう、Git worktreeや対応する不要なPostgresデータベースを調査・分類し、確認後に整理するスキルです。

• 古いworktreeを整理したいとき
• 孤立した開発用DBを探したいとき
• 削除前に未コミット変更を確認したいとき

APIエンドポイントの追加・変更で、DTO、入力検証、OpenAPI仕様、MCPツールの説明や公開範囲を揃え、エージェントからも扱いやすいAPIに整えます。

• APIエンドポイントを追加したいとき
• DTOと入力検証を整えたいとき
• MCPツールとしてAPIを公開したいとき

TypeScriptとReactの実装で、型安全なデータ処理、コンポーネント設計、状態管理、ファイル配置、アクセシビリティの基本方針を確認できます。

• Reactの状態管理を見直したいとき
• TypeScriptの型安全性を高めたいとき
• 画面やコンポーネントの構成を決めたいとき

Better Authを使ったTypeScript認証の設定を支援し、データベース接続、セッション管理、メール認証、OAuth、プラグインやセキュリティ項目を整理します。

• Better Authで認証を導入したいとき
• DBやORMアダプターを接続したいとき
• セッションの保存方法を設定したいとき

コード変更後に差分を見直し、冗長な処理や不統一な書き方、未使用コードを整理して読みやすさを確かめる手順を示します。

• 実装後に変更ファイルを整理したいとき
• 修正差分の冗長さを確認したいとき
• コミット前にコードを見直したいとき

画面の新規作成や変更時に、スマートフォンから大画面まで使いやすいレイアウトを設計するための指針を示し、幅ごとの崩れや操作上の問題を防ぎます。

• スマートフォン対応の画面を作りたいとき
• 表やフォームの幅ごとの崩れを防ぎたいとき
• 既存画面を複数の画面幅で確認したいとき

APIや認証、データベース、ファイル処理などの変更を確認し、アクセス制御や入力処理に関わる重大な脆弱性を特定して、確認できた問題を修正します。

• APIや認証の変更をレビューしたいとき
• Prismaクエリの権限漏れを確認したいとき
• アップロードやWebhookを点検したいとき

サーバーで取得した初期データをクライアントに渡し、SWRとapiClientで再検証や更新を行うデータ取得の構成を、コンポーネントやフックの例とともに示します。

• 初期データ付きの一覧ページを作りたいとき
• SWRでAPI取得や更新を実装したいとき
• 組織ごとにキャッシュを分けたいとき

指定されたファイルのフックやAPI利用を点検し、禁止パターンをSWRやapiClientなどの指定方式へ修正するための監査手順と実装規約をまとめています。

• 既存コードのAPI利用を点検したいとき
• 生のfetchをapiClientに置き換えたいとき
• 更新処理をSWRのmutateにそろえたいとき