Community程式設計與開發github.com

teefayb/claude-code-setup-demo

於 `src/app/api` 下新增一個 Next.js 路由處理器,包含 Zod 驗證、一致的錯誤處理與 Vitest 測試。當被要求新增或擴充 API 端點時使用。

claude-code-setup-demo 是什麼?

此技能提供一個結構化的方式來在 Next.js 專案中建立新的 API 路由。它強制遵循既有的模式,確保所有端點具有一致的錯誤處理、輸入驗證與測試覆蓋。支援的平台包含使用 Vitest 與 Zod 的 Next.js 應用程式。其工作流程包含:從現有路由、HTTP 輔助函式與模式檔案中讀取既有模式;將輸入驗證邏輯置於集中管理的 Zod 模式中;將資料存取邏輯隔離在 store 中,使路由處理器保持簡潔;並在路由檔案中實作特定的錯誤處理規則(例如格式錯誤的 JSON 拋出 400、ZodError 拋出驗證錯誤、找不到資源拋出 404)。該技能也會在路由旁建立一個 `route.test.ts` 測試檔案,利用 `useTempDataFile()` 與 `new Request()` 進行測試,並執行 `vitest run`、`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 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

新增此處描述的 API 路由:$ARGUMENTS

如果方法、路徑或行為不清楚,請在撰寫程式碼前先問一個簡短的問題。

步驟

  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 中。路由處理器僅負責解析、呼叫 store,並將結果對應為回應。
  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.

相關技能