Back to Skills

Neon Vercel Postgres

Neon + Vercel serverless Postgres for edge and serverless environments. Use for Cloudflare Workers, Vercel Edge, Next.js apps with HTTP/WebSocket connections, database branching (git-like), Drizzle/Prisma ORM integration, migrations, PITR backups, or encountering connection pool…

postgresvercelcloudflare
By secondsky
17928Updated 1 day agoTypeScriptMIT

Skill Content

# Neon & Vercel Serverless Postgres

**Status**: Production Ready
**Last Updated**: 2025-11-21
**Dependencies**: None
**Latest Versions**: `@neondatabase/serverless@1.0.2`, `@vercel/postgres@0.10.0`, `drizzle-orm@0.44.7`, `neonctl@2.16.1`

---

## Quick Start (5 Minutes)

### 1. Choose Your Platform

**Option A: Neon Direct** (multi-cloud, Cloudflare Workers, any serverless)
```bash
bun add @neondatabase/serverless
```

**Option B: Vercel Postgres** (Vercel-only, zero-config on Vercel)
```bash
bun add @vercel/postgres
```

**Why this matters:**
- Neon direct gives you multi-cloud flexibility and access to branching API
- Vercel Postgres gives you zero-config on Vercel with automatic environment variables
- Both are HTTP-based (no TCP), perfect for serverless/edge environments

### 2. Get Your Connection String

**For Neon Direct:**
```bash
# Sign up at https://neon.tech
# Create a project → Get connection string
# Format: postgresql://user:password@ep-xyz-pooler.region.aws.neon.tech/dbname?sslmode=require
```

**For Vercel Postgres:**
```bash
# In your Vercel project
vercel postgres create
vercel env pull .env.local  # Automatically creates POSTGRES_URL and other vars
```

**CRITICAL:**
- Use **pooled connection string** for serverless (ends with `-pooler.region.aws.neon.tech`)
- Non-pooled connections will exhaust quickly in serverless environments
- Always include `?sslmode=require` parameter

### 3. Query Your Database

**Neon Direct:**
```typescript
import { neon } from '@neondatabase/serverless';

const sql = neon(process.env.DATABASE_URL!);

// Simple query
const users = await sql`SELECT * FROM users WHERE id = ${userId}`;

// Transactions
const result = await sql.transaction([
  sql`INSERT INTO users (name) VALUES (${name})`,
  sql`SELECT * FROM users WHERE name = ${name}`
]);
```

**Vercel Postgres:**
```typescript
import { sql } from '@vercel/postgres';

// Simple query
const { rows } = await sql`SELECT * FROM users WHERE id = ${userId}`;

// Transactions
const client = await sql.connect();
try {
  await client.sql`BEGIN`;
  await client.sql`INSERT INTO users (name) VALUES (${name})`;
  await client.sql`COMMIT`;
} finally {
  client.release();
}
```

**CRITICAL:**
- Use template tag syntax (`` sql`...` ``) for automatic SQL injection protection
- Never concatenate strings: `sql('SELECT * FROM users WHERE id = ' + id)` ❌

---

## Critical Rules

### Always Do

✅ **Use pooled connection strings** for serverless environments (`-pooler.` in hostname)

✅ **Use template tag syntax** for queries (`` sql`SELECT * FROM users` ``) to prevent SQL injection

✅ **Include `sslmode=require`** in connection strings

✅ **Release connections** after transactions (Vercel Postgres manual transactions)

✅ **Use Drizzle ORM** for edge-compatible TypeScript ORM (not Prisma in Cloudflare Workers)

✅ **Set connection string as environment variable** (never hardcode)

✅ **Use Neon branching** for preview environments and testing

✅ **Monitor connection pool usage** in Neon dashboard

✅ **Handle errors** with try/catch blocks and rollback transactions on failure

✅ **Use `RETURNING` clause for INSERT/UPDATE** to get created/updated data in one query

### Never Do

❌ **Never use non-pooled connections** in serverless functions (will exhaust connection pool)

❌ **Never concatenate SQL strings** (`'SELECT * FROM users WHERE id = ' + id`) - SQL injection risk

❌ **Never omit `sslmode=require`** - connections will fail or be insecure

❌ **Never forget to `client.release()`** in manual Vercel Postgres transactions - connection leak

❌ **Never use Prisma in Cloudflare Workers** - requires Node.js runtime (use Drizzle instead)

❌ **Never hardcode connection strings** - use environment variables

❌ **Never run migrations from edge functions** - use Node.js environment or Neon console

❌ **Never commit `.env` files** - add to `.gitignore`

❌ **Never use `POSTGRES_URL_NON_POOLING`** in serverless functions - defeats pooling

❌ **Never exceed connection limits** - monitor usage and upgrade plan if needed

---

## Top 5 Errors (See references/error-catalog.md for all 15)

### Error #1: Connection Pool Exhausted
**Error**: `Error: connection pool exhausted` or `too many connections for role`
**Solution**: Use pooled connection string (ends with `-pooler.region.aws.neon.tech`), not non-pooled

### Error #2: TCP Connections Not Supported
**Error**: `Error: TCP connections are not supported in this environment`
**Solution**: Use `@neondatabase/serverless` (HTTP-based), not `pg` or `postgres.js` (TCP-based)

### Error #3: SQL Injection from String Concatenation
**Error**: Successful SQL injection attack
**Solution**: Always use template tags (`` sql`SELECT * FROM users WHERE id = ${id}` ``), never concatenate strings

### Error #4: Missing SSL Mode
**Error**: `Error: connection requires SSL`
**Solution**: Always append `?sslmode=require` to connection string

### Error #5: Connection Leak (Vercel Postgres)
**Error**: Gradually increasing memory usage
**Solution**: Always call `client.release()` in finally block after manual transactions

**Load `references/error-catalog.md` for all 15 errors with detailed solutions and troubleshooting guide.**

---

## Common Use Cases

### Use Case 1: Cloudflare Worker with Neon
**When**: Deploying serverless API with Postgres on Cloudflare Workers
**Quick Pattern**:
```typescript
import { neon } from '@neondatabase/serverless';

export default {
  async fetch(request: Request, env: Env) {
    const sql = neon(env.DATABASE_URL);
    const users = await sql`SELECT * FROM users`;
    return Response.json(users);
  }
};
```
**Load**: `references/common-patterns.md` → Pattern 1

### Use Case 2: Next.js Server Actions
**When**: Building Next.js app with Vercel Postgres
**Quick Pattern**:
```typescript
'use server';
import { sql } from '@vercel/postgres';

export async function getUsers() {
  const { rows } = await sql`SELECT * FROM users`;
  return rows;
}
```
**Load**: `references/common-patterns.md` → Pattern 2

### Use Case 3: Type-Safe Queries with Drizzle
**When**: Need full TypeScript type safety and edge compatibility
**Load**: `references/common-patterns.md` → Pattern 3

### Use Case 4: Database Transactions
**When**: Multiple operations must all succeed or all fail (e.g., money transfers)
**Load**: `references/common-patterns.md` → Pattern 4

### Use Case 5: Preview Environments with Branching
**When**: Need isolated database for each pull request/preview deployment
**Load**: `references/common-patterns.md` → Pattern 5

---

## When to Load References

**Load `references/setup-guide.md` when**:
- User needs complete 7-step setup process
- User asks about Drizzle ORM or Prisma integration
- User needs help with environment variables or connection strings
- User asks about deployment to Cloudflare Workers or Vercel

**Load `references/error-catalog.md` when**:
- Encountering any connection, query, or deployment errors
- User reports "connection pool exhausted" or timeout errors
- User asks about SQL injection prevention
- User needs troubleshooting for Prisma or Drizzle issues

**Load `references/common-patterns.md` when**:
- User asks for code examples or templates
- User needs to implement transactions, pagination, or search
- User asks about Server Actions, Cloudflare Workers, or Drizzle patterns
- User wants to see production-tested patterns

**Load `references/advanced-topics.md` when**:
- User asks about Neon branching or database workflows
- User needs connection pooling deep dive
- User asks about performance optimization or query tuning
- User needs security best practices (RLS, encryption, audit logging)
- User asks about backups or disaster recovery

---

## Configuration Files Reference

### package.json (Neon Direct)

```json
{
  "dependencies": {
    "@neondatabase/serverless": "^1.0.2"
  }
}
```

### package.json (Vercel Postgres)

```json
{
  "dependencies": {
    "@vercel/postgres": "^0.10.0"
  }
}
```

### package.json (With Drizzle ORM)

```json
{
  "dependencies": {
    "@neondatabase/serverless": "^1.0.2",
    "drizzle-orm": "^0.44.7"
  },
  "devDependencies": {
    "drizzle-kit": "^0.31.0"
  },
  "scripts": {
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:studio": "drizzle-kit studio"
  }
}
```

### drizzle.config.ts

```typescript
import { defineConfig } from 'drizzle-kit';

export default defineConfig({
  schema: './db/schema.ts',
  out: './db/migrations',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!
  }
});
```

**Why these settings:**
- `@neondatabase/serverless` is edge-compatible (HTTP/WebSocket-based)
- `@vercel/postgres` provides zero-config on Vercel
- `drizzle-orm` works in all runtimes (Cloudflare Workers, Vercel Edge, Node.js)
- `drizzle-kit` handles migrations and schema generation

---

## Using Bundled Resources

### Templates (templates/)

**drizzle-schema.ts** - Complete Drizzle schema with users, posts, relations
```typescript
// See templates/drizzle-schema.ts for full example
```

**drizzle-queries.ts** - Common query patterns (SELECT, INSERT, UPDATE, DELETE, joins)
```typescript
// See templates/drizzle-queries.ts for full example
```

**drizzle-migrations-workflow.md** - Complete migration workflow guide
```markdown
// See templates/drizzle-migrations-workflow.md for full guide
```

**neon-basic-queries.ts** - Raw SQL query patterns with Neon
```typescript
// See templates/neon-basic-queries.ts for full example
```

**package.json** - Complete dependency configuration
```json
// See templates/package.json for full config
```

### References (references/)

- **setup-guide.md** - Complete 7-step setup process (installation → deployment)
- **error-catalog.md** - All 15 errors with solutions and troubleshooting
- **common-patterns.md** - 5+ production patterns (Cloudflare Workers, Next.js, Drizzle, transactions, branching)
- **advanced-topics.md** - Branching workflows, connection pooling, performance, security

---

## Dependencies

**Required**:
- `@neondatabase/serverless@^1.0.2` - Neon serverless Postgres client (HTTP/WebSocket-based)
- `@vercel/postgres@^0.10.0` - Vercel Postgres client (alternative to Neon direct, Vercel-specific)

**Optional**:
- `drizzle-orm@^0.44.7` - TypeScript ORM (edge-compatible, recommended)
- `drizzle-kit@^0.31.0` - Drizzle schema migrations and introspection
- `@prisma/client@^6.10.0` - Prisma ORM (Node.js only, not edge-compatible)
- `@prisma/adapter-neon@^6.10.0` - Prisma adapter for Neon serverless
- `neonctl@^2.16.1` - Neon CLI for database management
- `zod@^3.24.0` - Schema validation for input sanitization

---

## Official Documentation

- **Neon Documentation**: https://neon.tech/docs
- **Neon Serverless Package**: https://github.com/neondatabase/serverless
- **Vercel Postgres**: https://vercel.com/docs/storage/vercel-postgres
- **Vercel Storage (All)**: https://vercel.com/docs/storage
- **Neon Branching Guide**: https://neon.tech/docs/guides/branching
- **Neonctl CLI**: https://neon.tech/docs/reference/cli
- **Drizzle + Neon**: https://orm.drizzle.team/docs/quick-postgresql/neon
- **Prisma + Neon**: https://www.prisma.io/docs/orm/overview/databases/neon
- **Context7 Library ID**: `/github/neondatabase/serverless`, `/github/vercel/storage`

---

## Package Versions (Verified 2025-10-29)

```json
{
  "dependencies": {
    "@neondatabase/serverless": "^1.0.2",
    "@vercel/postgres": "^0.10.0",
    "drizzle-orm": "^0.44.7"
  },
  "devDependencies": {
    "drizzle-kit": "^0.31.0",
    "neonctl": "^2.16.1"
  }
}
```

**Latest Prisma (if needed)**:
```json
{
  "dependencies": {
    "@prisma/client": "^6.10.0",
    "@prisma/adapter-neon": "^6.10.0"
  },
  "devDependencies": {
    "prisma": "^6.10.0"
  }
}
```

---

## Production Example

This skill is based on production deployments of Neon and Vercel Postgres:
- **Cloudflare Workers**: API with 50K+ daily requests, 0 connection errors
- **Vercel Next.js App**: E-commerce site with 100K+ monthly users
- **Build Time**: <5 minutes (initial setup), <30s (deployment)
- **Errors**: 0 (all 15 known issues prevented)
- **Validation**: ✅ Connection pooling, ✅ SQL injection prevention, ✅ Transaction handling, ✅ Branching workflows

---

## Complete Setup Checklist

Use this checklist to verify your setup:

- [ ] Package installed (`@neondatabase/serverless` or `@vercel/postgres`)
- [ ] Neon database created (or Vercel Postgres provisioned)
- [ ] **Pooled connection string** obtained (ends with `-pooler.`)
- [ ] Connection string includes `?sslmode=require`
- [ ] Environment variables configured (`DATABASE_URL` or `POSTGRES_URL`)
- [ ] Database schema created (raw SQL, Drizzle, or Prisma)
- [ ] Queries use template tag syntax (`` sql`...` ``)
- [ ] Transactions use proper try/catch and release connections
- [ ] Connection pooling verified (using pooled connection string)
- [ ] ORM choice appropriate for runtime (Drizzle for edge, Prisma for Node.js)
- [ ] Tested locally with dev database
- [ ] Deployed and tested in production/preview environment
- [ ] Connection monitoring set up in Neon dashboard

---

**Questions? Issues?**

1. Check `references/error-catalog.md` for all 15 errors and troubleshooting
2. Review `references/setup-guide.md` for complete 7-step setup process
3. See `references/common-patterns.md` for production-tested code examples
4. Check official docs: https://neon.tech/docs
5. Ensure you're using **pooled connection string** for serverless environments
6. Verify `sslmode=require` is in connection string

How to use

  1. Copy the skill content above
  2. Create a .claude/skills directory in your project
  3. Save as .claude/skills/claude-skills-neon-vercel-postgres.md
  4. Use /claude-skills-neon-vercel-postgres in Claude Code to invoke this skill

Claude Code Skills Collection

170 production-ready skills for Claude Code CLI

Version 3.3.1 | Last Updated: 2026-05-14

<div align="center">

🔌 Platform Support

This repository uses Claude Plugin Patterns — natively supported by:

PlatformStatusNotes
Claude CodeNativeFull marketplace support
Factory DroidNativeFull marketplace support
</div> **For all other Platforms like opencode, codex and others, you can use https://github.com/enulus/OpenPackage **

A curated collection of battle-tested skills for building modern web applications with Cloudflare, AI integrations, React, Tailwind, and more.

PS: if skills.sh warns about any skill: Their scan process is a outdated LLM which flags newest versions pins (like in ZOD) as non existent and by that potentially malicous.


Quick Start

Marketplace Installation (Recommended)

# Add the marketplace
/plugin marketplace add https://github.com/secondsky/claude-skills

# Install individual skills as needed
/plugin install cloudflare-d1@claude-skills
/plugin install tailwind-v4-shadcn@claude-skills
/plugin install ai-sdk-core@claude-skills

See MARKETPLACE.md for complete catalog of all 170 skills.

Bulk Installation (Contributors)

# Clone the repository
git clone https://github.com/secondsky/claude-skills.git
cd claude-skills

# Install all 170 skills at once
./scripts/install-all.sh

# Or install individual skills
./scripts/install-skill.sh cloudflare-d1

Repository Structure

This repository contains 170 production-tested skills for Claude Code, each focused on a specific technology or capability.

Individual Skills: Each skill is a standalone unit with:

  • SKILL.md - Core knowledge and guidance
  • Templates - Working code examples
  • References - Extended documentation
  • Scripts - Helper utilities

Installation Options:

  1. Individual - Install only the skills you need via marketplace
  2. Bulk - Install all 170 skills using ./scripts/install-all.sh

Available Skills (170 Individual Skills)

Each skill is individually installable. Install only the skills you need.

Full Catalog: See MARKETPLACE.md for detailed listings.

Categories

CategorySkillsExamples
tooling29turborepo, plan-interview, code-review
frontend26nuxt-v4, nuxt-v5, tailwind-v4-shadcn, tanstack-query, nuxt-studio, maz-ui, threejs
cloudflare21cloudflare-d1, cloudflare-workers-ai, cloudflare-agents
ai20openai-agents, claude-api, ai-sdk-core
api16api-design-principles, graphql-implementation
web10hono-routing, firecrawl-scraper, web-performance
mobile7swift-best-practices, react-native-app, react-native-skills
database6drizzle-orm-d1, neon-vercel-postgres, supabase-postgres-best-practices
security6csrf-protection, access-control-rbac
auth4better-auth
testing4vitest-testing, playwright-testing
design4design-review, design-system-creation
woocommerce4woocommerce-backend-dev
cms4hugo, sveltia-cms, wordpress-plugin-core
architecture3microservices-patterns, architecture-patterns
data3sql-query-optimization, recommendation-engine
seo2seo-optimizer, seo-keyword-cluster-builder
documentation1technical-specification

How It Works

Auto-Discovery

Claude Code automatically checks ~/.claude/skills/ for relevant skills before planning tasks:

User: "Set up a Cloudflare Worker with D1 database"
           ↓
Claude: [Checks skills automatically]
           ↓
Claude: "Found cloudflare-d1 skills.
         These prevent 12 documented errors. Use them?"
           ↓
User: "Yes"
           ↓
Result: Production-ready setup, zero errors, ~65% token savings

Note: Due to token limits, not all skills may be visible at once. See ⚠️ Important: Token Limits below.

Skill Structure

Each skill includes:

skills/[skill-name]/
├── SKILL.md              # Complete documentation
├── .claude-plugin/
│   └── plugin.json       # Plugin metadata
├── templates/            # Ready-to-copy templates
├── scripts/              # Automation scripts
└── references/           # Extended documentation

Recent Additions

May 2026

Supply Chain Security (cross-cutting):

  • dependency-upgrade expanded with Socket CLI integration — proactive malicious package detection, typosquatting alerts, and CI/CD security gates. New 418-line reference guide, 2 GitHub Actions templates, and expanded supply chain security comparison (3 tools)
  • 31 skills now include "Secure Installation" guidance — contextually-tailored security sections across all high-risk skill categories (scaffolding, MCP/agent SDKs, multi-provider installs, Docker, CI/CD). Covers 8 Bun skills, 5 Nuxt skills, 6 Cloudflare skills, 4 AI/agent skills, and 8 frontend/tooling skills
  • Supply chain security is now a first-class cross-cutting concern woven into the skill collection — not a standalone topic

February - April 2026

Full-Stack Frameworks:

  • nuxt-v5 (v1.0.0) - Full Nuxt 5 support with 4 skills (core, data, server, production), 3 diagnostic agents, and interactive setup wizard
  • supabase-postgres-best-practices - 30 Postgres optimization rules from Supabase across 8 categories
  • threejs (v1.0.0) - 3D web graphics: scenes, geometries, shaders, animations, post-processing

Infrastructure:

  • JSON schema validation - Automated plugin.json validation with CI support
  • GitHub issue templates - Skill-specific issue templates for bug reports, feature requests, and submissions

Plugin Enhancements:

  • mutation-testing - Added Bun native runner support
  • dependency-upgrade - Added supply chain security content

December 2025 - January 2026

Frontend Expansion:

  • nuxt-studio (v1.0.0) - Visual CMS for Nuxt Content with live preview, OAuth auth, and R2 storage integration
  • maz-ui (v1.0.0) - 50+ Vue/Nuxt components with theming, i18n, form generation, and 14 composables

Developer Workflow:

  • plan-interview (v2.0.0) - Adaptive interview-driven spec generation with autonomous quality review
  • turborepo (v2.8.0) - Updated to official Vercel skill with enhanced monorepo build optimization

Mobile Development:

  • react-native-skills (v1.0.0) - React Native & Expo best practices with performance optimization patterns

Enhanced Authentication:

  • better-auth (v2.2.0) - Expanded to 18 framework integrations with 30+ authentication plugins

⚠️ Important: Token Limits

Skill Visibility Constraint

Claude Code has a 15,000 character limit for the total size of skill descriptions in the system prompt. This limit also applies to commands and agents.

What this means:

  • Not all 170 skills may be visible in Claude's context at once
  • Skills are loaded based on relevance and available token budget
  • You can verify how many skills Claude currently sees by asking: "How many skills do you see in your system prompt?"

Checking Visible Skills

To verify which skills are currently loaded:

# Ask Claude Code directly
"Check what skills/plugins you see in your system prompt"

Claude will report something like: "85 of 170 skills visible due to token limits"

Workaround: Increase Token Budget

You can double the headroom for skill descriptions by setting an environment variable:

# Increase limit to 30,000 characters
export SLASH_COMMAND_TOOL_CHAR_BUDGET=30000

# Then launch Claude Code
claude

This gives you approximately 2x more skill visibility in the system prompt.

Note: This is a temporary workaround. The Claude Code team is working on better solutions for skill discovery and loading.


Token Efficiency

MetricManual SetupWith SkillsSavings
Average Tokens12,000-15,0004,000-5,000~65%
Typical Errors2-4 per service0 (prevented)100%
Setup Time2-4 hours15-45 minutes~80%

Across all 170 skills: 400+ documented errors prevented.


Contributing

Prerequisites for Contributors

Install the official plugin development toolkit:

/plugin install plugin-dev@claude-code-marketplace

This provides:

  • /plugin-dev:create-plugin command (8-phase guided workflow)
  • 7 comprehensive skills (hooks, MCP, structure, agents, commands, skills)
  • 2 specialized agents (agent-creator, plugin-validator)

Quick Steps

  1. Create skill directory in plugins/
  2. Add SKILL.md with YAML frontmatter
  3. Run ./scripts/sync-plugins.sh
  4. Submit pull request

See CONTRIBUTING.md and PLUGIN_DEV_BEST_PRACTICES.md for detailed guidelines.


Documentation

DocumentPurpose
START_HERE.mdStart here! Quick navigation guide
PLUGIN_DEV_BEST_PRACTICES.mdRepository-specific best practices (marketplace, budget, quality)
MARKETPLACE.mdFull skill catalog and installation guide
MARKETPLACE_MANAGEMENT.mdTechnical infrastructure (plugin.json, scripts, validation)
CLAUDE.mdProject context and development standards
CONTRIBUTING.mdContribution guidelines

Links


Built with ❤️ by Claude Skills Maintainers

View source on GitHub