💡 Example: Full-Stack Next.js Project with VERSA

[alpha912]

💡 Example: Full-Stack Next.js Project with VERSA

I wanted to share my .ai/ folder setup for a full-stack Next.js project. It's been working great with Cursor and I thought others might find it useful!

📁 Project Structure

my-saas-app/
├── .ai/
│   ├── context.json
│   ├── profiles/
│   │   └── cursor.json
│   ├── rules/
│   │   ├── style.md
│   │   ├── testing.md
│   │   └── architecture.md
│   ├── prompts/
│   │   ├── code-review.json
│   │   └── test-generator.json
│   └── agents/
│       ├── frontend-expert.json
│       └── backend-expert.json
├── app/
├── components/
└── ...

⚙️ Configuration Highlights

1. Context File (context.json)

{
  "format": "versa",
  "version": "1.0",
  "project": {
    "name": "My SaaS App",
    "type": "web-application",
    "stack": ["Next.js 15", "TypeScript", "Tailwind", "Prisma", "PostgreSQL"]
  },
  "rules": {
    "attach": ["style.md", "testing.md", "architecture.md"],
    "scope": "all"
  },
  "prompts": {
    "attach": ["code-review.json", "test-generator.json"]
  },
  "agents": {
    "default": "frontend-expert"
  }
}

2. Style Rules (rules/style.md)

---
ai:meta:
  priority: high
  scope: all
  attach: always
---

# Code Style Guide

- Use TypeScript strict mode
- Prefer server components by default
- Use Tailwind utilities, avoid custom CSS
- Follow shadcn/ui patterns for components
- Use Zod for runtime validation

3. Specialized Agents

I created two specialized agents - one for frontend work and one for backend:

Frontend Expert focuses on:

• React components and hooks
• Tailwind styling
• Client-side state management
• Next.js routing

Backend Expert focuses on:

• API routes and server actions
• Database queries with Prisma
• Authentication and authorization
• Background jobs

🎯 Results

• Context switching eliminated - Agent always knows the project structure
• Consistent code style - All generated code follows our patterns
• Faster reviews - Code review prompt checks all our standards
• Test coverage improved - Test generator creates comprehensive tests

💬 What I Learned

1. Start with simple rules and iterate
2. Put the most important rules in context.json with scope: all
3. Use agents for different types of work
4. Profile overrides are great for tool-specific tweaks

Feel free to ask questions! Happy to share more details about any part of the setup.

---

Tools used: Cursor
Stack: Next.js 15, TypeScript, Tailwind, Prisma
VERSA Version: 1.0