base-app-setup

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

9 stars

Best use case

base-app-setup is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using base-app-setup should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/base-app-setup/SKILL.md --create-dirs "https://raw.githubusercontent.com/andrelandgraf/fullstackrecipes/main/skills/base-app-setup/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/base-app-setup/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How base-app-setup Compares

Feature / Agentbase-app-setupStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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 with better-env

Use better-env config modules for type-safe server/public env access, feature flags, and either-or credential constraints.

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

### Build-Time Environment Validation with better-env

Validate all env-backed config modules with better-env before build and in CI.

```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
```

Related Skills

workflow-setup

9
from andrelandgraf/fullstackrecipes

Install and configure the Workflow Development Kit for resumable, durable AI agent workflows with step-level persistence, stream resumption, and agent orchestration.

vercel-analytics-setup

9
from andrelandgraf/fullstackrecipes

Add privacy-focused web analytics with Vercel Web Analytics. Track page views, visitors, and custom events with zero configuration.

user-stories-setup

9
from andrelandgraf/fullstackrecipes

Create a structured format for documenting feature requirements as user stories. JSON files with testable acceptance criteria that AI agents can verify and track.

shadcn-ui-setup

9
from andrelandgraf/fullstackrecipes

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

sentry-setup

9
from andrelandgraf/fullstackrecipes

Configure Sentry for error tracking, performance monitoring, and log aggregation. Integrates with Pino to forward logs to Sentry automatically.

resend-setup

9
from andrelandgraf/fullstackrecipes

Configure Resend for transactional emails like password resets and email verification.

ralph-setup

9
from andrelandgraf/fullstackrecipes

Set up automated agent-driven development with Ralph. Run AI agents in a loop to implement features from user stories, verify acceptance criteria, and log progress for the next agent.

pino-logging-setup

9
from andrelandgraf/fullstackrecipes

Configure structured logging with Pino. Outputs human-readable colorized logs in development and structured JSON in production for log aggregation services.

nuqs-setup

9
from andrelandgraf/fullstackrecipes

Sync React state to URL query parameters for shareable filters, search queries, and deep links to modal dialogs. Preserves UI state on browser back/forward navigation.

neon-drizzle-setup

9
from andrelandgraf/fullstackrecipes

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

feature-flags-setup

9
from andrelandgraf/fullstackrecipes

Implement feature flags using the Vercel Flags SDK with server-side evaluation, environment-based toggles, and Vercel Toolbar integration.

better-auth-setup

9
from andrelandgraf/fullstackrecipes

Add user authentication using Better Auth with Drizzle ORM and Neon Postgres. Base setup with email/password authentication.