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.

TypeScript

8

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

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

SKILL.md2.9 KB

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

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.