Community编程与开发github.com

teefayb/claude-code-setup-demo

在 src/app/api 下添加一个新的 Next.js 路由处理器,集成 Zod 验证、一致错误处理和 Vitest 测试。当被要求添加或扩展 API 端点时使用。

claude-code-setup-demo 是什么?

该技能为 Next.js 项目添加标准化的 API 路由处理器,强制遵循项目约定。它通过预定义的目录结构(schema.ts、store.ts、route.ts)以及错误处理模式(如 400 状态码用于无效 JSON、ZodError 用于验证失败),确保新创建的端点与现有代码库保持一致。该技能支持所有使用动态 `params` 的 HTTP 方法,并指导开发者编写涵盖成功、各类验证失败、未找到资源以及请求体为畸形 JSON 等场景的 Vitest 测试。通过在 `route.test.ts` 中使用 `useTempDataFile()` 测试工具并执行 `npx vitest run`,该技能帮助 Claude Code、Cursor 或 Codex 等 AI 代理生成可直接集成到项目中的代码,包括最终测试验证和构建检查。

兼容平台✓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 schema 中,而不是内联在路由里。
  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.

相关技能