home / skills / andrelandgraf / fullstackrecipes / base-app-setup

base-app-setup skill

This skill guides you through setting up a scalable Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK for rapid AI-powered development.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill base-app-setup

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

3.0 KB

---
name: base-app-setup
description: Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK.
---

# Base App Setup

Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK.

## Cookbook - Complete These Recipes in Order

### Next.js on Vercel

Create a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
```

### Editor and Linting Setup

Configure Prettier for code formatting and TypeScript for typechecking. Includes VSCode settings and EditorConfig for consistent code style. Skips ESLint/Biome to avoid config complexity.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/code-style-setup
```

### AI Coding Agent Configuration

Configure AI coding agents like Cursor, GitHub Copilot, or Claude Code with project-specific patterns, coding guidelines, and MCP servers for consistent AI-assisted development.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/agent-setup
```

### Shadcn UI & Theming

Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup
```

### Assertion Helper

TypeScript assertion function for runtime type narrowing with descriptive error messages. Based on tiny-invariant.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/assert
```

### Type-Safe Environment Configuration

Type-safe environment variable validation using Zod with a Drizzle-like schema API. Supports server/public fields, feature flags, either-or constraints, and client-side protection.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup
```

### Build-Time Environment Variable Validation

Validate environment variables on server start and before builds. Catch missing or invalid variables early with clear error messages.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/env-validation
```

### Neon + Drizzle Setup

Connect a Next.js app to Neon Postgres using Drizzle ORM with optimized connection pooling for Vercel serverless functions.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup
```

### AI SDK & Simple Chat

Install the Vercel AI SDK with AI Elements components. Build a streaming chat interface with the useChat hook.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/ai-sdk-setup
```

### Working with Drizzle

Write type-safe database queries with Drizzle ORM. Covers select, insert, update, delete, relational queries, and adding new tables.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/using-drizzle-queries
```

Overview

This skill provides a complete, opinionated setup guide for a Next.js app using Shadcn UI, Neon Postgres, Drizzle ORM, and an AI SDK. It bundles step-by-step recipes for development, deployment, type-safe config, database integration, and a streaming AI chat UI. The goal is a production-ready starter with consistent patterns for teams building AI-enabled web apps.

How this skill works

The guide walks through sequential recipes: project scaffolding and Vercel deployment, editor and linting setup, UI theming with Shadcn, environment validation, database wiring to Neon via Drizzle, and integrating an AI SDK for chat. Each recipe includes commands, config samples, and pragmatic notes for serverless environments like Vercel. It also supplies TypeScript helpers (assertions, Zod schemas) and Drizzle query patterns to keep runtime behavior predictable.

When to use it

Starting a new Next.js project that will include AI features and a Postgres database
You want production-ready defaults for deployment on Vercel with Bun support
Need type-safe environment variables and early validation before build/runtime
Integrating Shadcn UI with theming and accessibility in mind
Adding streaming chat or other AI interactions using a standard SDK

Best practices

Follow the recipes in order to avoid configuration conflicts and missing prerequisites
Use Zod-based, type-safe environment schemas and validate at build/start time
Prefer the provided Drizzle patterns for serverless-friendly connection pooling on Vercel
Keep editor and formatting configs (Prettier, TS) consistent across the team
Limit client exposure of secrets: mark server-only vs public fields in config schemas

Example use cases

Deploy a Next.js AI chat demo with Neon Postgres backing conversation state
Bootstrap a multi-developer repo with consistent code style and editor settings
Add Shadcn UI with dark mode and a theme provider to an existing app
Migrate an existing Postgres-backed API to Drizzle for type-safe queries
Implement an AI coding agent configuration to accelerate feature development

FAQ

Can I use this setup with providers other than Neon or Vercel?

Yes. The recipes target Neon and Vercel for serverless optimizations, but the principles (Drizzle ORM, Zod env validation, Shadcn UI, AI SDK integration) apply to other Postgres hosts and deployment platforms with minor adjustments.

Does this require ESLint?

No. The recommended editor setup focuses on Prettier and TypeScript for consistent formatting and type safety. ESLint or Biome can be added later if you need linting rules.