Configure Claude Code within Antigravity

I'll show you how to set up and configure Claude Code within Antigravity for your Next.js 16.2.1, Prisma, PostgreSQL, TypeScript, Tailwind CSS, and shadcn/ui stack.

---

Overview: Claude Code in Antigravity

Antigravity is a VS Code fork by Google DeepMind, which means you can install the official Claude Code extension directly into it . This gives you the best of both worlds: Gemini in Antigravity for high-level planning and Claude Code for high-quality implementation .

Here's the complete configuration stack you'll need:

Component	Purpose
CLAUDE.md	Project rules and memory (loaded automatically)
Skills	Reusable expertise for specific tasks (Prisma, shadcn/ui, etc.)
MCP Servers	External tool connections (database, browser, GitHub)
Slash Commands	Custom shortcuts for repetitive tasks
Agents	Specialized reviewers for quality checks

Step 1: Install Claude Code Extension in Antigravity

1. Open Antigravity
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Claude Code" or "Claude Code for VS Code"
4. Install the official Anthropic extension
5. Open Claude Code via the Spark icon in the sidebar

Authentication Options

You have two ways to authenticate Claude Code :

• Claude Pro/Max subscription – Sign in with your Claude account
• Anthropic API key – Get one from console.anthropic.com (requires billing setup with ~$5 minimum)

Use /log in the Claude Code panel to sign in.

Step 2: Create Your CLAUDE.md File

The CLAUDE.md file is your project's "memory" – Claude reads this automatically when you start from the project root . Create this file in your project root with your specific stack configuration:

# Next.js Project with Prisma & PostgreSQL

## Tech Stack
- Next.js 16.2.1 (App Router)
- TypeScript (strict: true)
- Tailwind CSS v4 (CSS-first config, no tailwind.config.js)
- shadcn/ui (default style, slate base color, CSS variables)
- Prisma (PostgreSQL)
- Better Auth for authentication

## Directory Structure
- `src/app/` — App Router routes
- `src/components/` — UI components (shadcn/ui)
- `src/lib/` — Utility functions
- `src/server/` — Server actions and services
- `prisma/` — Database schema and migrations

## Coding Rules
- All components must be TypeScript with strict mode
- No `any` types – use proper types or `unknown`
- Default to Server Components; add `"use client"` only when necessary
- Use `@/` import aliases for all imports
- Prefer `type` over `interface` for type definitions

## Database Rules
- Always verify ownership (userId/organizationId) before writes
- Use Prisma's `include`/`select` to prevent N+1 queries
- Run `pnpm db:generate` after schema changes
- Run `pnpm db:migrate` before committing migrations

## Off-Limits
- No CSS-in-JS (use Tailwind exclusively)
- No `console.log` in committed code
- No direct database queries outside Prisma
- No hardcoded secrets – use environment variables

Important: Keep CLAUDE.md under 100 lines – it's included in every interaction and consumes tokens .

Step 3: Set Up MCP Servers for External Tools

MCP (Model Context Protocol) servers let Claude Code interact with external services . For your stack, you'll want:

Chrome DevTools MCP (Browser Testing)

Add this to your Antigravity MCP config. According to Chrome DevTools MCP documentation , the config should be:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "-y"
      ]
    }
  }
}

To use it: Click the Chrome icon in Antigravity's top right corner to start the browser first .

Supabase MCP (If Using Supabase with PostgreSQL)

Add Supabase MCP to let Claude query your database schema and run migrations. Use /mcp in Claude Code to manage MCP servers .

GitHub MCP

Enables Claude to create PRs, comment on issues, and browse repositories.

MCP Tip: Use the /mcp command in Claude Code to manage servers. You'll need to restart Claude Code/Antigravity after adding new MCP servers .

Step 4: Install Essential Skills

Skills are reusable prompts that give Claude specialized expertise . Install them via Claude Code's plugin system:

1. Frontend Design (Anthropic Official) – Install First

claude plugin add anthropic/frontend-design

This skill makes Claude pick an actual aesthetic direction (brutalist, editorial, retro-futuristic) instead of defaulting to "AI slop" – the generic purple gradients and rounded cards .

2. UI/UX Pro Max – 240+ Styles, Font Pairings, UX Guidelines

claude plugin add nextlevelbuilder/ui-ux-pro-max-skill

3. Tailwind CSS Kit (v4)

For Tailwind v4's CSS-first configuration :

claude plugin add blencorp/tailwind-css-kit

4. Prisma Expert Skill (Custom Setup)

Create this skill file at .claude/skills/prisma-expert/SKILL.md :

---
name: prisma-expert
description: Expert in Prisma ORM, PostgreSQL schemas, and database optimization
---

# Prisma Expert

You are an expert in Prisma ORM with PostgreSQL.

## Guidelines
1. Always include proper relations and indexes in schema design
2. Add ownership checks (userId/organizationId) to all queries
3. Use Prisma's `include`/`select` to prevent N+1 queries
4. For testing, use PgLite with Vitest
5. Run `pnpm prisma:generate` after schema changes

## Schema Template
```prisma
model Post {
  id        String   @id @default(cuid())
  title     String
  content   String?
  published Boolean  @default(false)
  authorId  String
  author    User     @relation(fields: [authorId], references: [id])
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([authorId])
  @@index([published])
}

Query Pattern

Always verify ownership:

const post = await prisma.post.findFirst({
  where: { id, authorId: session.user.id }
});
if (!post) throw new Error("Not found or unauthorized");

### 5. Server Actions Expert Skill

Create at `.claude/skills/server-actions-expert/SKILL.md` :

```markdown
---
name: server-actions-expert
description: Expert in Next.js server actions with validation and error handling
---

# Server Actions Expert

You are an expert in Next.js server actions with proper validation and error handling.

## Stack
- next-safe-action with Zod validation
- Service pattern for business logic
- Proper error handling with `isRedirectError`

## Pattern Template
```typescript
"use server";

import { z } from "zod";
import { action } from "@/lib/safe-action";
import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";

const schema = z.object({
  title: z.string().min(1),
  content: z.string().optional(),
});

export const createPost = action(schema, async ({ title, content }) => {
  const session = await getSession();
  if (!session) throw new Error("Unauthorized");

  const post = await prisma.post.create({
    data: {
      title,
      content,
      authorId: session.user.id,
    },
  });

  revalidatePath("/posts");
  return post;
});

### 6. React Form Builder Skill

Create at `.claude/skills/react-form-builder/SKILL.md` :

```markdown
---
name: react-form-builder
description: Expert in building forms with react-hook-form and shadcn/ui
---

# React Form Builder

You are an expert in building forms with react-hook-form and shadcn/ui.

## Stack
- react-hook-form for form state
- zod for validation
- @kit/ui/form components

## Pattern Template
```tsx
"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

export function LoginForm() {
  const form = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" },
  });

  async function onSubmit(values: z.infer<typeof schema>) {
    // server action call
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}

### 7. Frontend Design Toolkit

For better-looking UI beyond default "AI slop" :

```bash
claude plugin add claudekit/frontend-design-pro-demo

This gives you access to 11 named aesthetics like Dark OLED Luxury, Brutalism, and Glassmorphism – you can say "use the Dark OLED Luxury style" and Claude knows what you mean.

Step 5: Create Custom Slash Commands

Slash commands eliminate repetitive typing. Drop these markdown files in .claude/commands/ :

/component – Generate shadcn/ui Component

.claude/commands/component.md:

# Generate Component

Create a component named $ARGUMENTS with shadcn/ui styling:

- File: `src/components/$ARGUMENTS.tsx`
- Use TypeScript with strict mode
- Use shadcn/ui components from `@/components/ui`
- Include a Props type definition
- Add proper export (default for page components, named for UI components)
- Use Tailwind CSS for all styling
- Include `"use client"` only if using hooks or browser APIs

/page – Generate App Router Page

.claude/commands/page.md:

# Generate Page

Create a page for $ARGUMENTS following Next.js App Router conventions:

- Create `src/app/$ARGUMENTS/page.tsx`
- Implement as a Server Component (no "use client" unless needed)
- Include metadata export
- Generate loading.tsx if data fetching is involved
- Use Tailwind CSS for styling

/db – Generate Prisma Query

.claude/commands/db.md:

# Generate Database Query

Create a Prisma query for $ARGUMENTS:

- File: `src/lib/queries/$ARGUMENTS.ts`
- Include ownership verification (userId/organizationId check)
- Use Prisma's include/select to prevent N+1
- Add proper error handling
- Export typed return types
- Include JSDoc comments explaining the query's purpose

Step 6: Create a Code Quality Reviewer Agent

Create .claude/agents/code-quality-reviewer.md :

---
name: code-quality-reviewer
description: Reviews code for security, performance, and convention violations
model: sonnet
---

# Code Quality Reviewer

You review code against the project's standards.

## What to Check

### Security
- [ ] Ownership verification before database writes (userId/organizationId)
- [ ] Input validation with Zod for all server actions
- [ ] No hardcoded secrets or API keys
- [ ] Proper session checks in server components

### TypeScript
- [ ] No `any` types
- [ ] Proper type exports for shared utilities
- [ ] Strict mode compliance

### Database
- [ ] No N+1 queries (check includes/select)
- [ ] Proper indexes on frequently queried fields
- [ ] Transactions for multi-step operations

### Conventions
- [ ] Follows patterns in CLAUDE.md
- [ ] Uses `@/` imports consistently
- [ ] No console.log statements
- [ ] Proper error messages (user-friendly, not stack traces)

## Output Format
List violations with severity:
- 🔴 Critical: Must fix before merge
- 🟡 Warning: Should fix
- 🔵 Suggestion: Nice to have

Step 7: Set Up Permissions

Create .claude/settings.local.json (this file is git-ignored) :

{
  "permissions": {
    "allow": [
      "Bash(pnpm:*)",
      "Bash(git diff:*)",
      "Bash(git status:*)",
      "Bash(npx prisma:*)",
      "Bash(npx shadcn@latest:*)"
    ],
    "deny": []
  }
}

Important: Don't allow Bash(*) – scope permissions narrowly to prevent unwanted commands .

Step 8: Package-Level Rules (Optional)

For monorepo setups or to scope rules to specific parts of your app, create AGENTS.md in subdirectories :

prisma/AGENTS.md:

# Database Package Rules

- All schemas go in `schema.prisma`
- Run `pnpm db:generate` after schema changes
- Run `pnpm db:migrate` to create migrations
- Use `prisma` client from `@/lib/prisma` in app code
- Never query database directly – always use Prisma

src/components/AGENTS.md:

# UI Components Rules

- Use shadcn/ui components from `@/components/ui`
- Create new components in `src/components/`
- All components must be client components (add `"use client"`)
- Use Tailwind CSS for styling – no CSS files
- Follow shadcn/ui theming conventions

Step 9: Verification Scripts

Add these to your package.json to verify AI-generated code :

{
  "scripts": {
    "healthcheck": "pnpm type-check && pnpm lint",
    "type-check": "tsc --noEmit",
    "lint": "next lint",
    "db:generate": "prisma generate",
    "db:migrate": "prisma migrate dev",
    "db:studio": "prisma studio"
  }
}

Always run pnpm healthcheck after Claude generates code to catch issues early .

Summary: What to Install

Component	Location	Purpose
CLAUDE.md	Project root	Project rules and memory
AGENTS.md	Root + subfolders	Additional context (auto-read)
Skills	.claude/skills/	Reusable expertise for specific tasks
Commands	.claude/commands/	Custom slash commands
Agents	.claude/agents/	Specialized reviewers
MCP config	Antigravity settings	External tool connections

---

Quick Start Checklist

• Install Claude Code extension in Antigravity
• Authenticate with API key or Claude Pro
• Create CLAUDE.md with your stack rules
• Install essential skills (frontend-design, UI/UX Pro Max, Tailwind CSS Kit)
• Create Prisma Expert and Server Actions Expert skills
• Set up Chrome DevTools MCP for browser testing
• Create slash commands: /component, /page, /db
• Configure permissions in settings.local.json
• Run /init in Claude Code to load your codebase

With this setup, Claude Code in Antigravity will understand your Next.js 16.2.1, Prisma, PostgreSQL, Tailwind v4, and shadcn/ui stack – and follow your rules consistently across sessions.