March 25, 2026·10 min read

TurboRepo workflow that leverages both Antigravity/Agent Kit and Claude Code together.

How to create a consistent workflow to develop a Turborepo app with React/NextJS, Fastify, BetterAuth, Prisma, PostgreSQL, Tailwind v4, and Shadcn/ui stack. Be aware that Claude Code has overlapping tools with Antigravity.

Creating a consistent workflow when you have overlapping tools. The ag-kit init command from Antigravity Agent Kit is the key to unifying everything. Let me show you how to set up a cohesive TurboRepo workflow that leverages both Agent Kit and Claude Code together.

Understanding the Overlap (and How They Fit Together)

First, let's clarify the roles of each tool:

Tool	Role	How It Fits
Antigravity Agent Kit	Workflow orchestration, expert agents, slash commands	The "glue" that structures your development process
Claude Code	Code generation, implementation, analysis	The "engine" that writes code
Antigravity IDE	Visual interface, agent management	The "control center" where you orchestrate everything

The key insight: Agent Kit gives you the structure; Claude Code does the work. You don't choose one—you use them together.

Step 1: Initialize Agent Kit in Your TurboRepo

First, set up Agent Kit in your TurboRepo project:

# Navigate to your TurboRepo root
cd your-turborepo

# Initialize Agent Kit (this creates the .agent/ directory)
ag-kit init

# For Antigravity specifically, use:
aikit init antigravity

This creates the .agent/ directory structure :

.agent/
├── agents/          # Expert agents (planner, builder, reviewer, etc.)
├── skills/          # Specialized skills for your stack
├── commands/        # Slash commands (/plan, /implement, etc.)
├── rules/           # Behavior rules (gemini.md, agent.md)
└── workflows/       # Custom workflow definitions

Step 2: Configure Agents for Your TurboRepo Stack

Agent Kit comes with 20+ expert agents . For your stack (React + Fastify + Prisma + PostgreSQL), here's how to configure them:

Create Stack-Specific Agents

Create .agent/agents/nextjs-frontend.md:

---
name: nextjs-frontend
description: Expert in Next.js 16.2.1 App Router, React Server Components, and Tailwind v4
model: sonnet
---

# Next.js Frontend Expert

You are an expert in Next.js 16.2.1 with App Router, React Server Components, and Tailwind CSS v4.

## Stack Rules
- Use `"use client"` only for interactive components
- Default to Server Components for data fetching
- Use Tailwind v4 CSS-first config (no tailwind.config.js)
- Import shadcn/ui from `@/components/ui`
- Use `@/` import aliases for all imports

## Component Generation
When creating a new component:
1. Determine if it needs client-side interactivity
2. Use shadcn/ui primitives for base components
3. Style with Tailwind v4 utilities
4. Export types for props
5. Add JSDoc comments

## File Structure
- `apps/web/app/` - App Router pages
- `apps/web/components/` - React components
- `packages/ui/` - Shared UI components

Create .agent/agents/fastify-backend.md:

---
name: fastify-backend
description: Expert in Fastify API development with Prisma ORM
model: sonnet
---

# Fastify Backend Expert

You are an expert in Fastify for API development with Prisma ORM.

## Stack Rules
- Use Fastify with TypeScript
- Implement Zod validation for all routes
- Use Prisma for database access
- Follow REST conventions
- Add proper error handling with Fastify error handlers

## Route Pattern
```typescript
import { FastifyInstance } from 'fastify';
import { z } from 'zod';

export default async function (fastify: FastifyInstance) {
  fastify.get('/posts', {
    schema: {
      querystring: z.object({
        page: z.number().default(1),
        limit: z.number().default(10)
      })
    }
  }, async (request, reply) => {
    const { page, limit } = request.query;
    const posts = await fastify.prisma.post.findMany({
      skip: (page - 1) * limit,
      take: limit
    });
    return { posts };
  });
}


Create `.agent/agents/prisma-expert.md`:

```markdown
---
name: prisma-expert
description: Expert in Prisma ORM with PostgreSQL, migrations, and optimization
model: sonnet
---

# Prisma Expert

You are an expert in Prisma ORM with PostgreSQL.

## Guidelines
1. Always include proper relations and indexes
2. Add ownership checks (userId) to all queries
3. Use `include`/`select` to prevent N+1 queries
4. Run `pnpm db:generate` after schema changes
5. Run `pnpm db:migrate` before committing

## Query Pattern with Ownership
```typescript
const post = await prisma.post.findFirst({
  where: { 
    id: postId,
    userId: session.userId 
  },
  include: {
    author: true,
    comments: {
      take: 10,
      orderBy: { createdAt: 'desc' }
    }
  }
});
if (!post) throw new Error('Not found or unauthorized');


---

## Step 3: Install Essential Skills for Your Stack

### Install from jezweb/claude-skills (51 skills, Tailwind v4 support) :

```bash
# Add the marketplace
/plugin marketplace add jezweb/claude-skills

# Install frontend skills (includes Tailwind v4 + shadcn/ui)
/plugin install frontend@jezweb-skills

# Install dev tools (includes git workflows, docs generation)
/plugin install dev-tools@jezweb-skills

Key skills you'll use :

tailwind-theme-builder - Tailwind v4 CSS variables + dark mode
shadcn-ui - Component installation and customization
landing-page - Marketing pages
project-health - Permissions and config audit
git-workflow - PR preparation and branch cleanup

Install from Jeffallan/claude-skills (66 skills) :

/plugin marketplace add jeffallan/claude-skills

/plugin install fullstack-dev-skills@jeffallan

This includes specialized skills for:

API Design with Fastify
Database Design with Prisma
React Expert for Next.js
Fullstack Guardian for end-to-end features

Install Prisma MCP Server :

Prisma CLI v6.6.0+ includes a built-in MCP server. Add to your MCP config:

{
  "mcpServers": {
    "prisma": {
      "command": "npx",
      "args": ["prisma", "mcp"]
    }
  }
}

This enables Claude to :

Create and manage Prisma Postgres instances
Brainstorm data models naturally
Run migrations automatically

Step 4: Create TurboRepo-Specific Slash Commands

Create .agent/commands/turbo-new-app.md:

# Create New TurboRepo App

Create a new app in this TurboRepo:

1. Run `pnpm turbo gen app --name $ARGUMENTS`
2. Configure the app based on type:
   - For web apps: Next.js with Tailwind v4 + shadcn/ui
   - For API apps: Fastify with Prisma
3. Add to turbo.json pipeline if needed
4. Update root package.json scripts

## App Types
- `web` - Next.js frontend app
- `api` - Fastify backend service
- `shared` - Shared package (UI components, utilities)

Create .agent/commands/db-add-model.md:

# Add Prisma Model

Add a new model to the Prisma schema:

1. Add model to `packages/database/prisma/schema.prisma`
2. Include proper relations and indexes
3. Add userId ownership if user-owned
4. Run `pnpm db:generate`
5. Create migration with `pnpm db:migrate --name add_model`
6. Update seed script if needed

## Model Template
```prisma
model $ARGUMENTS {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  
  // Add your fields here
  userId    String
  user      User     @relation(fields: [userId], references: [id])
  
  @@index([userId])
}


Create `.agent/commands/component.md`:

```markdown
# Generate shadcn/ui Component

Generate a new component using shadcn/ui:

1. Check if base component exists in shadcn/ui
2. If yes, use `npx shadcn@latest add $ARGUMENTS`
3. If custom component:
   - Create in `packages/ui/src/components/`
   - Export from `packages/ui/src/index.ts`
   - Use Tailwind v4 utilities
   - Use TypeScript with proper props typing
   - Add JSDoc comments

## Component Template
```tsx
import * as React from "react";
import { cn } from "../utils";

export interface ComponentProps extends React.HTMLAttributes<HTMLDivElement> {
  // Add your props here
}

export const Component = React.forwardRef<HTMLDivElement, ComponentProps>(
  ({ className, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn("base-styles", className)}
        {...props}
      />
    );
  }
);

Component.displayName = "Component";


---

## Step 5: Configure Rules for Consistency

Create `.agent/rules/turborepo.md`:

```markdown
# TurboRepo Rules

## Package Management
- Always use `pnpm` (no npm or yarn)
- Run `pnpm install` at root for all dependencies
- Use workspace protocols: `"package": "workspace:*"`

## Workspace Structure
- `apps/web` - Next.js frontend
- `apps/api` - Fastify backend
- `packages/database` - Prisma client and schemas
- `packages/ui` - Shared UI components (shadcn/ui)
- `packages/utils` - Shared utilities
- `packages/types` - Shared TypeScript types

## Build Pipeline
- `build` - Build all apps and packages
- `dev` - Run all apps in development
- `lint` - Lint all packages
- `test` - Run all tests
- `db:generate` - Generate Prisma client
- `db:migrate` - Run migrations
- `db:studio` - Open Prisma Studio

## Import Rules
- `@/` imports within apps point to app root
- `@ui/` for UI components
- `@db/` for database client
- `@utils/` for utilities
- `@types/` for shared types

Create .agent/rules/stack-standards.md:

# Stack Standards

## Next.js 16.2.1
- App Router only (no Pages Router)
- Server Components by default
- Metadata API for SEO
- Turbopack for development

## Tailwind CSS v4
- CSS-first configuration
- Use `@theme` in `app.css`
- No `tailwind.config.js` unless necessary
- Dark mode via `dark:` variant

## shadcn/ui
- Installed via `npx shadcn@latest add`
- Components in `packages/ui/src/components`
- Theme via CSS variables in `app.css`

## Prisma
- Schema in `packages/database/prisma/schema.prisma`
- Client exported from `@db` package
- Migrations in `packages/database/prisma/migrations`
- Seed script in `packages/database/seed.ts`

## Fastify
- Plugin-based architecture
- Register routes with `fastify.register()`
- Use Zod for validation
- Error handling with `fastify.setErrorHandler()`

## Better Auth
- Session management
- OAuth providers
- Database adapter for Prisma

Step 6: Create a Validation Workflow

Boris Cherny (creator of Claude Code) emphasizes: "Give Claude a way to verify its work" . Create a verification workflow:

Create .agent/workflows/feature-complete.md:

# Feature Complete Workflow

This workflow runs after feature implementation to ensure quality.

## Step 1: Type Check
```bash
pnpm type-check

Fix any TypeScript errors.

Step 2: Lint

pnpm lint

Fix any linting issues.

Step 3: Database

pnpm db:generate
pnpm db:migrate

Ensure schema is in sync.

Step 4: Test

pnpm test

Ensure all tests pass. If new functionality, add tests.

Step 5: Build

pnpm build

Ensure production build succeeds.

Step 6: Verify

Check that feature works in dev
Verify no console logs
Ensure proper error handling
Check ownership verification in database queries

Output

Report any failures with fix suggestions.


---

## Step 7: Set Up Permissions for TurboRepo

Create `.agent/settings.local.json`:

```json
{
  "permissions": {
    "allow": [
      "Bash(pnpm:*)",
      "Bash(pnpm install*)",
      "Bash(pnpm run dev*)",
      "Bash(pnpm run build*)",
      "Bash(pnpm db:*)",
      "Bash(npx prisma:*)",
      "Bash(npx shadcn@latest:*)",
      "Bash(git status:*)",
      "Bash(git diff:*)",
      "Bash(turbo:*)"
    ],
    "deny": [
      "Bash(rm -rf /)",
      "Bash(sudo *)"
    ]
  }
}

Step 8: Optional - Reverse Proxy for Claude Models

If you want to use Claude models within Antigravity (free tier), you can set up the Antigravity Tool reverse proxy :

Download and install Antigravity Tool
Log in via OAuth

In your Claude Code terminal:

export ANTHROPIC_API_KEY="sk-antigravity"
export ANTHROPIC_BASE_URL="http://127.0.0.1:8045"
claude

This gives you Claude models within Antigravity at no additional cost .

Your Complete Workflow Summary

Here's how your workflow will look with everything configured:

Step	Action	Tool
1	Start session	`/session:start "Feature description"`
2	Plan	`/plan` → Planner agent creates architecture plan
3	Implement	`/implement` → Agents (frontend/backend/db) execute
4	Verify	Run validation workflow
5	Review	`/code-review` → Code quality agent checks
6	Create PR	`/commit-push-pr` → Git workflow
7	Document	`/project-docs` → Generate documentation

Quick Reference: Commands You'll Use

Command	Purpose
`/plan`	Plan a feature with architecture spec
`/implement`	Implement from plan
`/turbo-new-app`	Create new TurboRepo app
`/db-add-model`	Add Prisma model with ownership
`/component`	Generate shadcn/ui component
`/code-review`	Run code quality review
`/commit-push-pr`	Git workflow + create PR
`/project-health`	Audit permissions and config
`/session:start`	Start tracked development session

Your TurboRepo with React (Next.js), Fastify, Prisma, PostgreSQL, Tailwind v4, and shadcn/ui now has a consistent workflow that leverages both Agent Kit's structure and Claude Code's implementation power. The .agent/ directory is portable—commit it to your repo so your team benefits from the same workflow.