Communityコーディング&開発github.com

teefayb/claude-code-setup-demo

Zod バリデーション、一貫性のあるエラー処理、Vitest テストを備えた新しい Next.js ルートハンドラを src/app/api に追加します。API エンドポイントの追加や拡張を依頼されたときに使用します。

claude-code-setup-demo とは?

このスキルは、Next.js アプリケーションに新しい API ルートハンドラを追加するためのものです。Zod スキーマによる入力バリデーション、既存のプロジェクトに準拠したエラーレスポンス形式、データアクセス層の分離、および Vitest を使用したテスト作成を自動化します。サポートするプラットフォームは Claude Code で、開発者が「API エンドポイントを追加して」といったリクエストをした際に動作します。このスキールは SKILL.md に従い、既存の src/app/api/links のパターンを読み取り、ルートハンドラ、Zod スキーマ、データストア、テストファイルを生成します。また、強制的に動的レンダリングを設定し、不正な JSON、Zod エラー、リソース未検出などのエラーケースを適切に処理します。テストは useTempDataFile ヘルパーを使用して統合テスト形式で記述され、成功ケースと複数の失敗ケースをカバーします。最後に vitest、npm run check、npm run build を実行して品質を保証します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/teefayb/claude-code-setup-demo/tree/HEAD/.claude/skills/add-api-route

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ここに説明されている API ルートを追加します: $ARGUMENTS

メソッド、パス、または動作が不明な場合は、コードを書く前に短い質問を 1 つ行ってください。

手順

  1. src/app/api/links/route.ts、src/lib/http.ts、src/lib/links/schema.ts を読み込み、既存のパターンに合わせてください。新しいエラーフォーマットを考案しないでください。
  2. 入力バリデーションは、ルート内にインラインで記述するのではなく、関連する src/lib/<domain>/schema.ts 内の Zod スキーマに配置してください。
  3. データアクセスは src/lib/<domain>/store.ts に配置してください。ルートハンドラは、パース、ストアの呼び出し、結果のレスポンスへのマッピングのみを行います。
  4. src/app/api/<path>/route.ts を作成してください:
    • export const dynamic = "force-dynamic";
    • 不正な JSON → errorResponse(400, "invalid_json")
    • ZodError → validationError(err)
    • 未検出 → errorResponse(404, "not_found")
    • 動的セグメント: { params }: { params: Promise<{ id: string }> } および await params。
  5. route.test.ts をルートの隣に作成してください。@/test/temp-data-file から useTempDataFile() を使用し、エクスポートされたハンドラを new Request(...) で呼び出してください。成功、各バリデーション失敗クラス、未検出、およびボディを受け付ける場合の不正な JSON をカバーします。
  6. npx vitest run <新しいテストファイル> を実行し、次に npm run check、そして npm run build を実行してください。
  7. 報告: エンドポイント契約 (メソッド、パス、リクエストボディ、ステータスコード付きレスポンス) と、実行したコマンドとその結果。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

関連スキル