### Install AI-Vibe-Prompts (New Project)

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Installs AI-Vibe-Prompts using a template for a new project. Includes creating the project, navigating into it, installing dependencies, and starting the development server.

```bash
npx ai-vibe-prompts create my-app --template=t3-stack
cd my-app
npm install
npm run dev
```

--------------------------------

### Quick Start: Manual Project Setup

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/next-enterprise/README.md

Provides steps for manually cloning the template, installing dependencies, configuring environment variables, and starting the development server.

```bash
git clone <this-template> my-enterprise-app
cd my-enterprise-app
npm install
cp .env.example .env.local
# Configure environment variables
npm run db:migrate
npm run dev
```

--------------------------------

### Pro Tip: Start with Analysis

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Recommends starting project work by using the RAG assistant to analyze the codebase and identify the best agents for a given task.

```bash
@agents/helpers/rag-assistant.md
"Analyze this project and recommend the best agents for adding [your feature]"
```

--------------------------------

### Development Setup

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/README.md

Instructions for setting up the development environment for the AI-Vibe-Prompts project. Includes cloning the repository, installing dependencies, and starting the development server.

```bash
git clone https://github.com/Atman36/AI-Vibe-Prompts.git
cd AI-Vibe-Prompts
npm install
npm run dev
```

--------------------------------

### Manual Setup and Development

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/t3-stack/README.md

Steps for manually cloning the template repository, installing dependencies, configuring environment variables, pushing the database schema, and starting the development server.

```bash
git clone <this-template> my-t3-app
cd my-t3-app
npm install
cp .env.example .env.local
# Configure your environment variables
npx prisma db push
npm run dev
```

--------------------------------

### Manual Project Setup

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/shadcn-vite/README.md

Clones the template repository, installs project dependencies using npm, and starts the development server. This is an alternative to using the CLI for project creation.

```bash
git clone <this-template> my-app
cd my-app
npm install
npm run dev
```

--------------------------------

### Initialize AI-Vibe-Prompts (Existing Project)

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Adds AI-Vibe-Prompts to an existing project. This command initializes the necessary configurations and files within your current project directory.

```bash
npx ai-vibe-prompts init
```

--------------------------------

### Quick Start with AI-Vibe-Prompts CLI

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/t3-stack/README.md

Instructions to create a new project using the AI-Vibe-Prompts CLI with the t3-stack template, followed by installation and development server startup.

```bash
npx ai-vibe-prompts create my-t3-app --template=t3-stack
cd my-t3-app
npm install
npm run dev
```

--------------------------------

### Create New Component Workflow

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Guides through the process of creating a new component. It involves using the design system agent for design and the developer agent for implementation.

```bash
# 1. Design the component
@agents/design/design-system.md
"Create a reusable Card component with variants for different use cases"

# 2. Implement the component
@agents/core/developer.md
"Implement the Card component according to the design system specifications"
```

--------------------------------

### Pro Tip: Monitor Quality

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Advises using the quality monitor agent to track progress and set up monitoring for code quality, performance, and security metrics.

```bash
@agents/helpers/quality-monitor.md
"Set up monitoring for code quality, performance, and security metrics"
```

--------------------------------

### Pro Tip: Chain Agents

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Demonstrates chaining agents for better results, showing a two-step process where the architect plans a feature and the developer implements it based on the previous output.

```bash
# Step 1: Plan
@agents/core/architect.md
"Design a chat feature for this SaaS app"

# Step 2: Implement (reference previous output)
@agents/core/developer.md
"Implement the chat feature based on the architecture from the previous step"
```

--------------------------------

### Pro Tip: Use Workflows for Complex Tasks

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Suggests using the workflow composer agent for multi-step features to break down tasks and coordinate multiple agents effectively.

```bash
@agents/helpers/workflow-composer.md
"Create a workflow for adding a payment system to this e-commerce app"
```

--------------------------------

### Implement Feature with Developer

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Employs the developer agent for feature implementation. It takes a prompt to write code based on the architecture and design provided by the architect.

```bash
# Use the developer for implementation
@agents/core/developer.md

# Prompt: "Implement the user authentication system designed by the architect."
```

--------------------------------

### Phase Initialization Example (Markdown/Templating)

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/system/state-align.md

Example of initializing a phase using a templating system. It demonstrates invoking a module with parameters like the current phase, available tools, objectives, and constraints.

```markdown
{{#invoke context/state-align.mdc 
  current_phase="planning"
  available_tools=["decompose", "analyze", "design"]
  objectives=["Break down authentication system", "Define security boundaries"]
  constraints=["No implementation", "Security-first approach"]
}}
```

--------------------------------

### Analyze Codebase with RAG Assistant

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Uses the RAG assistant to analyze your project's codebase. It takes a prompt to provide an overview of the architecture, tech stack, and patterns used.

```bash
# Use the RAG assistant to understand your project
@agents/helpers/rag-assistant.md

# Prompt: "Analyze this codebase and provide an overview of the architecture, tech stack, and patterns used."
```

--------------------------------

### Node.js Project Initialization and Setup

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/PROMPT_SPEC.md

Demonstrates the initial steps to set up a new Node.js project using npm. It covers initializing the project and installing the Express.js framework, a common web application framework.

```bash
npm init -y
```

```bash
npm install express
```

--------------------------------

### XML Tagged Instructions for Coding Agents

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/PROMPT_SPEC.md

Illustrates how to structure multi-step instructions for a coding agent using XML. The example shows initializing a Node.js project and installing dependencies.

```xml
<instructions>
  <step number="1">
    <description>Initialize a new Node.js project.</description>
    <code>npm init -y</code>
  </step>
  <step number="2">
    <description>Install Express.js.</description>
    <code>npm install express</code>
  </step>
</instructions>
```

--------------------------------

### Project Initialization Requirements Analysis (YAML)

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/project/init.md

Defines the project setup phases and quality gates for initialization. It outlines context loading steps and validation criteria to ensure a successful project start.

```yaml
project_analysis:
  context_loading:
    - "system/task-decompose.md"    # Break complex setup into phases
    - "system/rag-template.md"      # Research best practices
    - "templates/[selected-stack]/"  # Load appropriate template
  
  quality_gates:
    - "Architecture review completed"
    - "Technology stack justified with documentation"
    - "Development environment validated"
    - "Documentation standards established"
```

--------------------------------

### Add Feature Workflow

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Details the steps for adding a new feature to a project. This workflow includes analyzing requirements, planning architecture, implementing, and quality checking using various agents.

```bash
# 1. Analyze requirements
@agents/helpers/rag-assistant.md
"Analyze the existing user management system to understand how to add role-based permissions"

# 2. Plan architecture
@agents/core/architect.md
"Design a role-based permission system that integrates with the existing user management"

# 3. Implement
@agents/core/developer.md
"Implement the role-based permission system according to the architecture"

# 4. Quality check
@agents/core/analyst.md
"Review the implementation for security, performance, and best practices"
```

--------------------------------

### Quick Start: Create App with CLI

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/next-enterprise/README.md

Demonstrates how to use the ai-vibe-prompts CLI to create a new enterprise Next.js application and start the development server.

```bash
npx ai-vibe-prompts create my-enterprise-app --template=next-enterprise
cd my-enterprise-app
npm install
npm run dev
```

--------------------------------

### Create Project with shadcn/ui Vite Template

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/shadcn-vite/README.md

Installs the AI-Vibe-Prompts CLI and creates a new React project using the shadcn/ui Vite template. It then navigates into the project directory and starts the development server.

```bash
npx ai-vibe-prompts create my-app --template=shadcn-vite
cd my-app
npm run dev
```

--------------------------------

### Perform Project Audit

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Executes a comprehensive project audit using the audit agent. This process analyzes the project for technical debt, performance issues, and security vulnerabilities.

```bash
# Comprehensive project analysis
@agents/project/audit.md
"Audit this project for technical debt, performance issues, and security vulnerabilities"
```

--------------------------------

### Plan New Feature with Architect

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/QUICK_START.md

Utilizes the architect agent to plan a new feature. This involves designing the architecture and data flow for the proposed feature, such as user authentication.

```bash
# Use the architect for feature planning
@agents/core/architect.md

# Prompt: "I want to add user authentication with social login. Design the architecture and data flow."
```

--------------------------------

### Project Initialization Command

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/WORKFLOW.md

Example of initializing a new project using the orchestrator, specifying the phase and the primary agent role.

```bash
# Initialize with orchestrator
*orchestrator
*phase planning
*architect

# Request architectural guidance
I need to build a real-time collaboration platform for document editing.
Can you help me design the architecture?
```

--------------------------------

### Authentication Setup with NextAuth.js

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/t3-stack/README.md

Illustrates the configuration of NextAuth.js with multiple OAuth providers (Discord, Google, GitHub) and Prisma as the session adapter. Also shows a basic example of using session data in a React component.

```typescript
// Automatic authentication setup
// import { NextAuthOptions } from "next-auth";
// import DiscordProvider from "next-auth/providers/discord";
// import GoogleProvider from "next-auth/providers/google";
// import { PrismaAdapter } from "@next-auth/prisma-adapter";
// import { db } from "../server/db"; // Assuming db is exported from server/db
// import { env } from "../env.mjs"; // Assuming env variables are loaded

export const authOptions: NextAuthOptions = {
  providers: [
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
    // Add GitHubProvider if configured
  ],
  adapter: PrismaAdapter(db),
  session: { strategy: "jwt" },
};

// Use in components
// import { signIn, signOut, useSession } from "next-auth/react";
function LoginButton() {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        <p>Signed in as {session.user?.email}</p>
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    );
  }
  
  return <button onClick={() => signIn()}>Sign in</button>;
}
```

--------------------------------

### AI-Vibe-Prompts Agent Integration Examples

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/shadcn-vite/README.md

Demonstrates how to interact with AI-Vibe-Prompts agents for common development tasks. These commands are conceptual and point to specific agent documentation files.

```bash
# Analyze project structure
@agents/helpers/rag-assistant.md

# Create new components  
@agents/design/design-system.md

# Add new features
@agents/core/developer.md
```

--------------------------------

### Available Project Scripts

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/t3-stack/README.md

A list of common npm scripts provided for managing the development workflow, including starting servers, building, testing, linting, and database operations.

```bash
npm run dev           # Start development server
npm run build         # Build for production
npm run start         # Start production server
npm run test          # Run tests
npm run lint          # Lint code
npm run type-check    # TypeScript checking
npm run db:generate   # Generate Prisma client
npm run db:push       # Push schema to database
npm run db:migrate    # Create and run migrations
npm run db:studio     # Open Prisma Studio
npm run db:seed       # Seed database with sample data
```

--------------------------------

### Create Design System Workflow Step

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/README.md

Shows an example usage for creating a design system foundation, involving the Design System agent to generate tokens, components, and documentation for a SaaS dashboard.

```bash
@agents/design/design-system.md
"Create a comprehensive design system with tokens, components, and documentation for a SaaS dashboard"
```

--------------------------------

### YAML Front-matter Description Examples

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/PROMPT_SPEC.md

Provides sample 'description' fields for AI prompts, emphasizing outcome-oriented and concise explanations.

```yaml
description: Base rules for AI assistant in modern development environment
description: Comprehensive project auditing and optimization following complexity management principles
description: Transform design tool exports into production-ready components
```

--------------------------------

### Environment Configuration Variables

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/t3-stack/README.md

Example `.env.local` file structure for configuring database connections, NextAuth.js secrets and URLs, and optional OAuth provider credentials.

```env
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/mydb"

# NextAuth
NEXTAUTH_SECRET="your-secret-here"
NEXTAUTH_URL="http://localhost:3000"

# OAuth Providers (optional)
DISCORD_CLIENT_ID=""
DISCORD_CLIENT_SECRET=""

GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""
```

--------------------------------

### Add AI Agents to Existing Project

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/README.md

Integrates AI agents into an existing project by running the initialization command. It also suggests starting with a project analysis using the RAG assistant.

```bash
npx ai-vibe-prompts init

# Begin with project analysis
@agents/helpers/rag-assistant.md
"Analyze this codebase and provide development recommendations"
```

--------------------------------

### Example Task Decomposition Output

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/system/task-decompose.md

Presents a sample markdown output for a complex task, illustrating the detailed structure of a decomposed plan including overview and individual step breakdowns.

```markdown
# Task Decomposition: Build User Authentication System

## Overview
**Goal**: Implement secure user authentication with React 19 + Next.js 15
**Complexity**: Complex (8 steps)
**Estimated Duration**: 2-3 sprints

## Step 1: Authentication Architecture Design
**Objective**: Define auth flow and security boundaries
**Process**: Create architecture diagrams, define API contracts
**Output**: Architecture document with security review
**Verification**: Security team approval + peer review
**Dependencies**: None
**Risk**: Over-engineering, scope creep

## Step 2: Database Schema Design
**Objective**: Design user tables and security models
**Process**: Create Prisma schema, plan migrations
**Output**: Validated database schema
**Verification**: Schema passes security audit
**Dependencies**: Step 1 (architecture)
**Risk**: Missing edge cases, performance issues

[... continued for all 8 steps]
```

--------------------------------

### Available npm Scripts

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/shadcn-vite/README.md

Lists common npm scripts for managing the development lifecycle of the project. These include starting the dev server, building for production, previewing, testing, linting, and type checking.

```bash
npm run dev
npm run build
npm run preview
npm run test
npm run test:e2e
npm run lint
npm run type-check
```

--------------------------------

### AI-Driven Implementation with Quality Gates

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/next-enterprise/README.md

This snippet shows how to initiate the implementation process using AI agents, focusing on quality gates for enterprise standards. It guides users on composing workflows for development.

```bash
# Implement with quality gates
@agents/helpers/workflow-composer.md
```

--------------------------------

### Project Overview Template

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/project/init.md

Template for the project overview markdown file, including vision, BMAD philosophy, technology strategy, and success metrics.

```markdown
# Project Overview

## Vision Statement
[Clear vision emphasizing complexity management and user value]

## BMAD Architecture Philosophy
- **Deep Modules**: Components with simple interfaces, powerful implementations
- **Complexity Management**: Hide implementation details behind clean abstractions  
- **Strategic Programming**: Architecture decisions that reduce future complexity
- **Quality Focus**: Built-in quality gates and automated validation

## Technology Strategy (Quality-First)
- **Frontend**: Next.js 15 + React 19 for optimal performance and DX
- **Styling**: Tailwind CSS v4 with design system integration
- **State**: Clear separation of server state (TanStack Query) and client state
- **Quality**: TypeScript strict mode, comprehensive testing, accessibility-first

## Success Metrics (BMAD Standards)
- **Performance**: Lighthouse ≥ 90, LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1
- **Quality**: TypeScript strict mode, 90%+ test coverage, zero ESLint errors
- **Accessibility**: WCAG 2.2 AA compliance with automated testing
- **Maintainability**: Clear module boundaries, comprehensive documentation
```

--------------------------------

### State Transition Management Example (Markdown/Templating)

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/system/state-align.md

Illustrates managing a phase transition from 'Planning' to 'Implementation' using markdown and templating. It shows checking transition criteria and invoking the state alignment module with new phase configurations.

```markdown
# PHASE TRANSITION: Planning → Implementation

## Transition Criteria Met
- [ ] Architecture reviewed and approved
- [ ] Technical approach validated
- [ ] Resource requirements confirmed
- [ ] Risk mitigation strategies defined

## New Phase Configuration
**Phase**: implementation
**New Tools**: ["code", "test", "debug", "document"]  
**Updated Objectives**: ["Implement auth system", "Write comprehensive tests"]
**Additional Constraints**: ["Follow security patterns", "Maintain performance standards"]

{{#invoke context/state-align.mdc current_phase="implementation"}}
```

--------------------------------

### Project Scripts Configuration

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/project/init.md

Configures npm scripts for development, building, testing, quality checks, and analysis, leveraging tools like Next.js, Turbopack, ESLint, Vitest, Playwright, and Axe.

```json
{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    
    "quality:check": "npm run type-check && npm run lint && npm run test",
    "quality:fix": "npm run lint:fix && npm run format",
    
    "type-check": "tsc --noEmit",
    "lint": "next lint --max-warnings 0",
    "lint:fix": "next lint --fix",
    "format": "prettier --write .",
    
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest --coverage",
    "test:e2e": "playwright test",
    "test:a11y": "axe --react",
    
    "analyze": "ANALYZE=true next build",
    "audit": "npm audit --audit-level=moderate",
    
    "setup": "npm install && npm run build && npm run test",
    "validate": "npm run quality:check && npm run test:e2e"
  }
}
```

--------------------------------

### Technology Stack Specification Template

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/project/init.md

Template for the technology stack specification markdown file, detailing core framework decisions and module architecture principles.

```markdown
# Technology Stack Specification

## Core Framework Decisions

### Next.js 15 with App Router
- **Decision Rationale**: Server Components reduce client bundle, improved SEO
- **Quality Benefits**: Better Core Web Vitals, automatic optimizations
- **Documentation**: [Next.js 15 Docs](https://nextjs.org/docs)
- **Migration Strategy**: Incremental adoption, backward compatibility maintained

### React 19 with Concurrent Features  
- **Decision Rationale**: Enhanced Suspense, Server Components, automatic batching
- **Quality Benefits**: Improved user experience, better performance patterns
- **Documentation**: [React 19 Release](https://react.dev/blog/2024/04/25/react-19)
- **Risk Mitigation**: Comprehensive testing, gradual feature adoption

## Module Architecture (BMAD Principles)

### Component Layer Design
```typescript
interface ComponentArchitecture {
  // Simple interface - easy to use
  props: {
    variant?: 'primary' | 'secondary';
    size?: 'sm' | 'md' | 'lg';
    children: React.ReactNode;
  };
  
  // Complex implementation - hidden from consumers
  implementation: {
    accessibility: WCAG22AACompliant;
    animations: FramerMotionIntegrated;
    theming: TailwindTokens;
    errorHandling: GracefulDegradation;
  };
}
```

### Data Layer Abstraction
```typescript
// Simple interface for data access
export const useUser = (id: string) => {
  // Complex implementation hidden:
  // - TanStack Query caching
  // - Error handling
  // - Loading states
  // - Background updates
};
```

### 4. Advanced Project Structure (Deep Module Design)
```

--------------------------------

### Create New Project with AI Agents

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/README.md

Initializes a new project using the ai-vibe-prompts CLI with a specified template (e.g., t3-stack). It then navigates into the project directory and installs dependencies. Includes a reference to RAG assistant for initial codebase analysis.

```bash
npx ai-vibe-prompts create my-app --template=t3-stack
cd my-app
npm install

# Start with codebase analysis
@agents/helpers/rag-assistant.md
```

--------------------------------

### Code Example Language Specification

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/PROMPT_SPEC.md

Demonstrates the importance of specifying the language for code blocks in prompt examples for clarity and correctness.

```typescript
// Good: Include language specification
interface ExampleInterface {
  property: string;
}
```

--------------------------------

### YAML Front-matter Name Examples

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/PROMPT_SPEC.md

Illustrates valid examples for the 'name' field within the YAML front-matter, adhering to length and character constraints.

```yaml
name: System Prompt for AI Assistant
name: Project Analysis & Optimization
name: Design Tool Code Optimizer
```

--------------------------------

### Technology Research Strategy (Markdown)

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/project/init.md

Outlines the strategy for researching and validating technology choices. It emphasizes adherence to best practices, project requirements, and documentation standards.

```markdown
Research Strategy:
1. Load current React 19 + Next.js 15 best practices
2. Validate technology choices against project requirements
3. Document all major decisions with official documentation links
4. Establish quality metrics and performance targets
```

--------------------------------

### Protected Page Example

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/t3-stack/README.md

A TypeScript example demonstrating how to create a protected page that requires user authentication. It fetches session data and redirects unauthenticated users to the sign-in page.

```typescript
import { getServerAuthSession } from "~/server/auth";
import { redirect } from "next/navigation";

export default async function ProtectedPage() {
  const session = await getServerAuthSession();
  
  if (!session) {
    redirect("/api/auth/signin");
  }

  return <div>Protected content for {session.user.name}</div>;
}
```

--------------------------------

### Project Directory Structure

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/project/init.md

Lists the main directories and files within the project-docs folder, detailing the purpose of each markdown file.

```markdown
project-docs/
├── 00-overview.md              # Project vision with BMAD principles
├── 01-requirements.md          # Functional requirements with quality gates
├── 02-architecture.md          # System design with module boundaries  
├── 03-tech-stack.md           # Technology choices with justifications
├── 04-design-system.md        # Component architecture and design tokens
├── 05-user-flows.md           # User interaction patterns and AI workflows
├── 06-performance.md          # Core Web Vitals benchmarks and monitoring
├── 07-accessibility.md        # WCAG 2.2 compliance standards and testing
├── 08-security.md             # Security standards and vulnerability management
├── 09-testing.md              # Testing strategy with coverage requirements
├── 10-deployment.md           # CI/CD pipeline and environment management
└── 99-progress.md             # Development roadmap with quality milestones
```

--------------------------------

### CI/CD Pipeline for Quality Gates

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/project/init.md

Defines the GitHub Actions workflow for continuous integration and delivery, enforcing quality gates for type safety, code linting, test coverage, E2E tests, accessibility, performance, and security.

```yaml
# .github/workflows/quality-gates.yml
name: BMAD Quality Gates
on: [push, pull_request]

jobs:
  quality-gate:
    runs-on: ubuntu-latest
    steps:
      - name: Type Safety Check
        run: npx tsc --noEmit
        
      - name: Code Quality Gate
        run: npx eslint . --max-warnings 0
        
      - name: Unit Test Coverage
        run: npx vitest --coverage --reporter=verbose
        
      - name: E2E Test Suite
        run: npx playwright test
        
      - name: Accessibility Audit
        run: npx axe-playwright
        
      - name: Performance Budget
        run: npx lighthouse-ci --preset=desktop
        
      - name: Security Scan
        run: npm audit --audit-level=moderate
        
      - name: Bundle Analysis
        run: npx @next/bundle-analyzer
```

--------------------------------

### Agent Workflow Orchestration Interface and Example

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/helpers/rag-assistant.md

Defines a TypeScript interface for structuring multi-agent workflows, including agent roles, inputs, outputs, and dependencies. Includes an example object demonstrating a complex feature workflow for payment processing.

```typescript
interface WorkflowRecommendation {
  scenario: string;
  agents: {
    agent: string;
    role: string;
    inputs: string[];
    outputs: string[];
    duration: string;
  }[];
  dependencies: {
    agent: string;
    dependsOn: string[];
  }[];
}

const complexFeatureWorkflow = {
  scenario: "Adding payment processing to e-commerce app",
  agents: [
    {
      agent: "architect",
      role: "Design payment flow and security architecture", 
      inputs: ["business requirements", "existing auth system"],
      outputs: ["payment architecture", "security specifications"],
      duration: "1-2 hours"
    },
    {
      agent: "developer", 
      role: "Implement payment integration",
      inputs: ["payment architecture", "API specifications"],
      outputs: ["payment components", "API integration"],
      duration: "4-6 hours"
    },
    {
      agent: "analyst",
      role: "Validate security and performance",
      inputs: ["implemented payment system"],
      outputs: ["security audit", "performance report"],
      duration: "1-2 hours"
    }
  ]
};
```

--------------------------------

### Initialize AI-Vibe-Prompts Project CLI

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/README.md

This script provides a command-line interface for initializing new AI-Vibe-Prompts projects. It automates setup tasks, potentially including project structure creation and initial configuration based on selected templates.

```JavaScript
ai-vibe-prompts/scripts/avp-init.js
```

--------------------------------

### Code Example Extraction Function (TypeScript)

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/helpers/rag-assistant.md

A TypeScript function designed to extract relevant code patterns and examples from a codebase analysis based on a given task. It filters components and API implementations to provide context for AI agents.

```typescript
// Extract relevant code patterns for AI agents
function extractRelevantExamples(task: string, codebase: CodebaseAnalysis) {
  const examples = {
    components: [],
    patterns: [],
    utilities: [],
    tests: []
  };
  
  // Find similar components for UI tasks
  if (task.includes('component') || task.includes('UI')) {
    examples.components = codebase.areas.components
      .filter(comp => comp.type === 'UI')
      .slice(0, 3); // Most relevant examples
  }
  
  // Find API patterns for backend tasks
  if (task.includes('API') || task.includes('endpoint')) {
    examples.patterns = codebase.areas.apis
      .map(api => api.implementation)
      .slice(0, 2);
  }
  
  return examples;
}
```

--------------------------------

### Vercel Deployment

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/t3-stack/README.md

Command to deploy the project to Vercel, the recommended hosting platform. Includes instructions for setting environment variables and configuring the database connection.

```bash
# Deploy to Vercel
npm run deploy

# Set environment variables in Vercel dashboard
# Configure database connection
```

--------------------------------

### Prompt Core Philosophy Structure

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/PROMPT_SPEC.md

Specifies the markdown format for articulating the core principles and sub-principles guiding the AI's behavior.

```markdown
# Core Philosophy: [MAIN_PRINCIPLE]

## [Principle 1]
- **[Sub-principle]**: [Description]

## [Principle 2]  
- **[Sub-principle]**: [Description]
```

--------------------------------

### Mid-Project Handoff Command

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/docs/WORKFLOW.md

Demonstrates commands for completing a project phase, initiating a handoff between agents, and starting implementation with contextual information.

```bash
# Complete current phase and transition
*quality-check
*handoff architect developer

# Begin implementation with context
Begin implementing the user authentication system using the architecture plan.
```

--------------------------------

### Button Component Specification

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/design/design-system.md

Defines the properties for a reusable Button component, including variants, sizes, states, and provides usage examples.

```typescript
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost' | 'destructive';
  size: 'sm' | 'md' | 'lg';
  state: 'default' | 'hover' | 'active' | 'disabled' | 'loading';
  children: React.ReactNode;
  icon?: React.ReactNode;
  fullWidth?: boolean;
  onClick?: () => void;
}

// Usage Examples
<Button variant="primary" size="md">Save Changes</Button>
<Button variant="secondary" icon={<Plus />}>Add Item</Button>
<Button variant="destructive" state="loading">Deleting...</Button>
```

--------------------------------

### Project Directory Structure

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/agents/project/init.md

Defines the hierarchical organization of the project files and directories, including source code, documentation, tests, and configuration.

```tree
project-name/
├── project-docs/                 # BMAD-style comprehensive documentation
├── src/
│   ├── app/                      # Next.js App Router (public interface)
│   │   ├── (auth)/              # Route groups for organization
│   │   ├── api/                 # API routes with validation
│   │   ├── globals.css          # Global styles with design tokens
│   │   └── layout.tsx           # Root layout with error boundaries
│   ├── components/               # Deep module components
│   │   ├── ui/                  # Atomic components (simple interfaces)
│   │   │   ├── button.tsx       # Example: 30+ props → 3 required props
│   │   │   ├── input.tsx        # Built-in validation, accessibility
│   │   │   └── index.ts         # Clean export interface
│   │   └── features/            # Feature-specific compositions
│   ├── lib/                     # Utility abstractions
│   │   ├── utils.ts             # General utilities with type safety
│   │   ├── validations.ts       # Zod schemas for runtime safety
│   │   ├── api.ts               # API client with error handling
│   │   └── constants.ts         # Type-safe application constants
│   ├── hooks/                   # Custom React hooks (deep modules)
│   ├── types/                   # TypeScript definitions
│   └── styles/                  # Design system implementation
├── tests/                       # Comprehensive testing setup
│   ├── __mocks__/              # Test doubles and fixtures
│   ├── e2e/                    # Playwright E2E tests
│   ├── unit/                   # Vitest unit tests
│   └── setup.ts               # Test environment configuration
└── config/                     # Configuration abstractions
    ├── database.ts             # Database connection abstraction
    ├── auth.ts                 # Authentication configuration
    └── monitoring.ts           # Performance monitoring setup
```

--------------------------------

### Server Actions: Create Project Example

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/next-enterprise/README.md

Shows a type-safe Server Action for handling form submissions, validating data using a schema, and persisting it to the database.

```tsx
// Type-safe server actions
async function createProject(formData: FormData) {
  'use server';
  
  const data = await createProjectSchema.parseAsync({
    name: formData.get('name'),
    description: formData.get('description'),
  });
  
  return await db.project.create({ data });
}
```

--------------------------------

### Server Components: Data Fetching Example

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/templates/next-enterprise/README.md

Illustrates fetching user and project data directly within a Next.js Server Component to render UI elements.

```tsx
// Fetch data directly in server components
async function DashboardPage() {
  const user = await getCurrentUser();
  const projects = await getProjects(user.id);
  
  return (
    <div>
      <UserProfile user={user} />
      <ProjectList projects={projects} />
    </div>
  );
}
```

--------------------------------

### AI-Vibe-Prompts CLI Commands

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/README.md

Provides essential command-line interface commands for interacting with the AI-Vibe-Prompts project. Covers project creation, initialization, listing resources, and accessing help.

```bash
# Project creation
npx ai-vibe-prompts create <name> --template=<template>

# Add to existing project
npx ai-vibe-prompts init [directory]

# List available resources
npx ai-vibe-prompts list-templates
npx ai-vibe-prompts list-agents

# Help and documentation
npx ai-vibe-prompts help
```

--------------------------------

### Module Invocation Example

Source: https://github.com/atman36/ai-vibe-prompts/blob/main/system/task-decompose.md

Demonstrates how to invoke the task decomposition module using a custom templating syntax, passing the task goal and complexity level as parameters.

```custom-templating
{{#invoke context/task-decompose.mdc goal="Build user authentication system" complexity_level="complex"}}
```