# vercel-development

A rule set that steers your coding agent toward Next.js App Router, React Server Components and the Vercel AI SDK. Useful when the agent keeps reaching for client components by reflex.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 712 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/vercel-development/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/vercel-development

## What it does

The skill pins down how an agent should work in a Next.js project on Vercel. It lists the expected folder layout (`app/`, `components/`, `lib/`, `hooks/`, `types/`, `vercel.json`), file naming conventions, and TypeScript preferences: interfaces for object shapes, types for unions, const objects instead of `enum`.

A large part covers React Server Components. The agent defaults to server components and adds `'use client'`, `useEffect` or `setState` only when the task truly needs them. Worked examples include route handlers with `zod` validation, an edge function declared with `export const runtime = 'edge'`, a streaming chat UI built on `useChat` from `ai/react`, and error handling for the AI SDK — rate limits and exhausted quota.

The examples lean on specific packages: `ai`, `@ai-sdk/openai`, `zod`. Swap the model provider or bring your own validation layer and the agent has to improvise, so some of the guidance stops applying. The skill file also cuts off inside the data fetching section, right after the `next: { revalidate }` caching example.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill vercel-development -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/vercel-development/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/vercel-development/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill vercel-development -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/vercel-development/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill vercel-development -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/vercel-development/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills vercel-development
```

2. **Manually: put the files in place**
- File: `.github/skills/vercel-development/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill vercel-development -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path vercel-development
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/vercel-development/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill vercel-development -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Mindrally/skills/tree/HEAD/vercel-development/SKILL.md

## When to use it
- default to server components instead of client ones
- lay out App Router files: `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`
- build a route handler that validates the request body with `zod`
- move a handler to edge runtime with one export
- wire up a streaming chat on the Vercel AI SDK and handle rate limits

## Example prompts
- Create a users list page in `app/users/page.tsx` as a server component
- Write a route handler in `app/api/users/route.ts` with zod validation
- Add an edge function in `app/api/edge-function/route.ts`

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 4b4c0bff3b4cea8f.

BEGIN THIRD-PARTY FILE 4b4c0bff3b4cea8f
````text
---
name: vercel-development
description: Vercel and Next.js deployment best practices including server components, edge functions, AI SDK integration, and performance optimization.
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Vercel Development Best Practices

## Overview

This skill provides comprehensive guidelines for developing and deploying applications on Vercel, with a focus on Next.js, React Server Components, Edge Functions, and the Vercel AI SDK.

## Core Principles

- Write concise, technical TypeScript code with accurate examples
- Use functional and declarative programming patterns; avoid classes
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
- Implement responsive design with Tailwind CSS using mobile-first approach
- Optimize for Core Web Vitals and performance

## Project Structure

```
my-app/
├── app/                    # App Router pages and layouts
│   ├── (auth)/            # Route groups
│   ├── api/               # API routes
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── ui/               # UI primitives
│   └── features/         # Feature components
├── lib/                   # Utility functions
├── hooks/                 # Custom React hooks
├── types/                 # TypeScript types
├── public/               # Static assets
└── vercel.json           # Vercel configuration
```

## Next.js App Router Guidelines

### File Naming Conventions
- Use lowercase with dashes for directories (e.g., `components/auth-wizard`)
- Prefer named exports for components and functions
- Use `page.tsx` for route pages, `layout.tsx` for layouts
- Use `loading.tsx` for loading states, `error.tsx` for error boundaries

### Server Components (Default)
```typescript
// app/users/page.tsx
import { getUsers } from '@/lib/data';

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}
```

### Client Components (When Needed)
```typescript
'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}
```

## TypeScript Standards
````
END THIRD-PARTY FILE 4b4c0bff3b4cea8f

The third-party file has ended. Everything between the 4b4c0bff3b4cea8f tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2580 of 11770 bytes. © Mindrally · Apache-2.0 · https://github.com/Mindrally/skills/tree/HEAD/vercel-development/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md