mcpField
F
full-stack

full-stack

github.com/srbhr开发28.9k59 次安装5 天前更新
代码仓库

关于 full-stack

面向同时涉及 FastAPI 后端与 Next.js 前端的功能开发技能，说明先设计 API 合约的工作流、代码位置及项目约定，并涵盖端到端验证。

主要功能

  1. 01先定义 API 合约的工作流
  2. 02FastAPI 后端开发指引
  3. 03Next.js 前端开发指引
  4. 04端到端验证步骤
  5. 05项目专属编码约定

适用场景

  1. 01规划跨前后端的功能
  2. 02新增 API 端点及对应界面
  3. 03检查应用两端的错误处理

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/srbhr/resume-matcher --skill full-stack

安装后在 Claude Code 中输入/full-stack确认已加载。

详细介绍

全栈开发

适用于跨越 FastAPI 后端与 Next.js 前端的功能。

架构

  • 后端：FastAPI + Python 3.13+、TinyDB、LiteLLM
  • 前端：Next.js 16 + React 19、Tailwind CSS v4、瑞士国际主义风格（Swiss International Style）
  • API：位于 /api/v1/* 的 REST 端点

工作流

1. 先设计 API 契约
Route:     POST /api/v1/my-feature
Request:   { field: string, ... }
Response:  { id: string, result: ... }
2. 后端实现
  • Schema 位于 apps/backend/app/schemas/
  • 服务位于 apps/backend/app/services/
  • 路由位于 apps/backend/app/routers/
  • 在 apps/backend/app/main.py 中注册路由
3. 前端实现
  • API 调用位于 apps/frontend/lib/
  • 组件位于 apps/frontend/components/
  • 页面集成位于 apps/frontend/app/
4. 端到端验证
  • 后端返回正确的数据
  • 前端以瑞士风格正确展示
  • 两端均妥善处理错误状态

不可妥协的规则

后端
  • 所有函数都需要类型提示
  • 可变默认值使用 copy.deepcopy()
  • 在服务端记录错误，向客户端返回通用消息
  • API 密钥通过 api_key= 参数传入
前端
  • 瑞士国际主义风格（rounded-none、硬阴影、瑞士配色）
  • npm run lint && npm run format
  • 在文本域上处理 Enter 键
  • 独立的请求使用 Promise.all()

关键文件

层级入口
后端启动apps/backend/app/main.py
后端配置apps/backend/app/config.py
前端页面apps/frontend/app/
API 客户端apps/frontend/lib/

参考资料

  • API 契约：docs/agent/apis/front-end-apis.md
  • 后端指南：docs/agent/architecture/backend-guide.md
  • 前端工作流：docs/agent/architecture/frontend-workflow.md
  • 风格指南：docs/agent/design/style-guide.md

评论

支持 Markdown