mcpField
B
base-app-setup

base-app-setup

github.com/andrelandgraf开发23122 次安装20 周前更新
代码仓库

关于 base-app-setup

base-app-setup 是一套按顺序编排的 Next.js 应用配置指南，涵盖 Shadcn UI、Neon Postgres、Drizzle ORM 和 AI SDK。它面向希望获得部署、代码质量、环境配置及流式聊天界面指导的开发者。

主要功能

  1. 01使用 Bun 的 Next.js 与 Vercel 部署
  2. 02配置 Prettier、TypeScript 和 Fallow
  3. 03AI 编码 Agent 与 MCP 配置
  4. 04Shadcn UI 主题和深色模式
  5. 05better-env 配置与验证
  6. 06Neon、Drizzle 和 AI SDK 指南

适用场景

  1. 01启动并部署 Next.js 应用
  2. 02使用 Drizzle 添加类型安全的数据访问
  3. 03为项目配置 AI 编码 Agent
  4. 04构建流式聊天界面

MCP 相关

其中的 AI 编码 Agent 配置指南包括 MCP 服务配置。

安装

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

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill base-app-setup

安装后在 Claude Code 中输入/base-app-setup确认已加载。

详细介绍

基础应用设置

Next.js 应用完整设置指南，涵盖 Shadcn UI、Neon Postgres、Drizzle ORM 和 AI SDK。

操作指南 - 按顺序完成这些步骤

Vercel 上的 Next.js

创建一个使用 Bun 运行的 Next.js 应用，配置开发环境，并部署到 Vercel，实现推送时自动部署。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
代码质量、Lint 和格式化

配置 Prettier 进行格式化，使用 TypeScript 进行类型检查，并使用 Fallow 检查代码质量（死代码、重复、复杂度、架构偏移）。为避免配置复杂性，不使用 ESLint/Biome。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/code-health-setup
AI 编码 Agent 配置

为 Cursor、GitHub Copilot 或 Claude Code 等 AI 编码 Agent 配置特定于项目的模式、编码指南和 MCP 服务，实现一致的 AI 辅助开发。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/agent-setup
Shadcn UI 与主题

添加支持深色模式的 Shadcn UI 组件，使用 next-themes。包括主题提供程序和 CSS 变量配置。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup
断言辅助函数

用于运行时类型收窄的 TypeScript 断言函数，提供描述性错误消息。基于 tiny-invariant。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/assert
使用 better-env 进行类型安全的环境配置

使用 better-env 配置模块，实现类型安全的服务端/公共环境变量访问、功能标志和二选一凭据约束。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup
使用 better-env 进行构建时环境验证

在构建前和 CI 中，使用 better-env 验证所有由环境变量支持的配置模块。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/env-validation
Neon + Drizzle 设置

使用 Drizzle ORM 将 Next.js 应用连接到 Neon Postgres，并针对 Vercel 无服务器函数优化连接池。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup
AI SDK 与简单聊天

安装 Vercel AI SDK 和 AI Elements 组件。使用 useChat hook 构建流式聊天界面。

curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/ai-sdk-setup
Drizzle 查询

使用 Drizzle ORM 编写类型安全的数据库查询。涵盖 select、insert、update、delete、关系查询以及添加新表。

bunx skills add andrelandgraf/fullstackrecipes/skills -s drizzle-queries

评论

支持 Markdown