vibesuite 1.0.0

package/Legacy (Manual Method)/9 The Reverse Genesis Protocol.md

@@ -0,0 +1,75 @@
+This is the protocol for onboarding your AI Orchestrator onto an existing project. It's a multi-stage process that uses different AI agents for what they're best at.
+
+**Phase 1: Ground Truth Reconnaissance (Using your local In-IDE AI)**
+
+Your local AI (like Cline, Copilot with context, etc.) is the perfect "recon squad" because it can directly "read" your entire codebase. You will use it to gather the raw intelligence needed for the Orchestrator.
+
+**Your Prompt to the Local AI (The "Recon Prompt"):**
+
+> **Objective:** Analyze the entire codebase in this repository and generate a comprehensive "Project Autopsy Report" in Markdown. Your goal is to reverse-engineer the project's architecture, conventions, and current state.
+>
+> **Instructions:**
+> Scan every relevant file and produce a report with the following sections:
+>
+> 1.  **Project Elevator Pitch:** Based on the code and any existing documentation, what is the one-sentence purpose of this application?
+> 2.  **Core Technology Stack:** List the primary languages, frameworks, and key libraries you can identify.
+> 3.  **Inferred Architecture:** Describe the architectural pattern you observe (e.g., "Modular Python with a central `hotkey_manager`," "Layered architecture with UI, business logic, and data layers").
+> 4.  **Key Modules & Responsibilities:** Create a Markdown table listing the most important files/modules and your inferred one-sentence description of their role.
+> 5.  **Inferred Coding Conventions:** Analyze the code and describe the observed conventions:
+>     *   **Naming:** `snake_case`, `PascalCase`, etc.
+>     *   **Formatting:** Is it consistent with a known formatter like Black or PEP 8?
+>     *   **Error Handling:** What is the common pattern? (`try...except` blocks, custom exceptions, etc.)
+> 6.  **Dependency Analysis:** Generate the command needed to list all dependencies (e.g., `cat requirements.txt`).
+> 7.  **Potential Entry Points:** Identify the likely main entry point of the application (e.g., `main.py`).
+
+**The Outcome:** You will now have a detailed, factual document—the "Autopsy Report"—that describes the *current state* of the project. This is the ground truth.
+
+---
+
+### Phase 2: Strategic Briefing (Creating the Orchestrator's "Brain")
+
+Now you switch to your high-level AI Orchestrator. You will combine the "Autopsy Report" with your *new goals* to create the final, powerful onboarding prompt.
+
+**Your Prompt to the AI Orchestrator (The "Mission Briefing" Prompt):**
+
+> **Objective:** Assimilate the following project information and become the dedicated AI Orchestrator for this ongoing project. Your task is to understand the existing codebase and then help me plan and execute new features.
+>
+> ---
+>
+> **Part 1: The "Project Autopsy Report" (Ground Truth)**
+> This report was generated by a local AI that scanned the entire codebase. This is what we know about the project as it exists today.
+>
+> ```markdown
+> [[ PASTE THE ENTIRE MARKDOWN OUTPUT FROM YOUR LOCAL AI HERE ]]
+> ```
+>
+> ---
+>
+> **Part 2: The New Mission (My Goals)**
+> Now that you understand the current state, here is what I have been tasked with building.
+>
+> *   **Primary Goal:** *e.g., "To implement a new 'RAG from Folder' feature that allows the app to answer questions based on a user's local documents."*
+> *   **Key New Features (as GitHub Issues):**
+>     *   **[Feature] Create a UI for folder selection in the settings window.** *User story: As a user, I want to be able to select a folder on my computer that Blink will use as a knowledge base.*
+>     *   **[Feature] Implement a local vector store using ChromaDB.** *User story: As a user, I want the contents of my selected folder to be indexed into a persistent local database for fast retrieval.*
+>     *   **[Feature] Integrate RAG into the LLM query pipeline.** *User story: As a user, when I ask a question, Blink should first search my documents for relevant context and then inject that context into the prompt sent to the LLM.*
+>
+> ---
+>
+> **Part 3: Your Directive**
+>
+> You are now the AI Orchestrator for this project.
+>
+> 1.  **Acknowledge Assimilation:** Confirm that you have understood the existing codebase via the Autopsy Report and my new mission.
+> 2.  **Adopt the Vibe:** Based on the inferred conventions, adopt the project's "coding vibe."
+> 3.  **Begin Planning:** Your first task is to take my first new feature, **"Create a UI for folder selection in the settings window,"** and generate a full "Plan-and-Solve" implementation plan for it, respecting the existing architecture.
+
+---
+
+### Why This "Reverse Genesis" Protocol is So Powerful
+
+*   **Separation of Concerns:** It uses the right AI for the right job. The local AI is a "scanner," excellent at low-level code analysis. The Orchestrator is a "strategist," excellent at high-level planning.
+*   **Grounds the Orchestrator in Reality:** By providing the Autopsy Report, you prevent the Orchestrator from "hallucinating" or suggesting solutions that don't fit the existing patterns. It is forced to work within the constraints of the project as it is.
+*   **Combines "What Is" with "What's Next":** This process seamlessly bridges the gap between understanding the past (the existing code) and planning for the future (your new tasks).
+
+You were right—the prompt has to be dope. And the best way to make it dope is to feed it high-quality, pre-digested intelligence from the codebase itself. This protocol is your key to becoming an effective contributor to any project, right from day one.

package/README.md

@@ -0,0 +1,209 @@
+# VibeCode Protocol Suite
+
+<div align="center">
+  <h3>🤖 A Complete System for AI-Human Software Development Collaboration</h3>
+  <p><em>Code with the flow. Code with the vibe.</em></p>
+</div>
+
+---
+
+## 🚀 Quick Start (Recommended)
+
+Spawn the complete VibeCode system directly into your project with a single command:
+
+```bash
+# Using npx (No installation required)
+npx vibesuite init
+
+# Or using pnpm
+pnpm dlx vibesuite init
+```
+
+This interactive CLI will let you choose exactly what you need:
+- ✅ **.agent Folder** (For Cursor/Windsurf workflows)
+- ✅ **Kilo Code Agents** (YAML definitions)
+- ✅ **Legacy Protocols** (Manual prompts)
+- ✅ **Select Specific Workflows/Skills**
+
+---
+
+## 🌟 What is VibeCode?
+
+VibeCode isn't just a collection of prompts—it's a **complete workflow system** for collaborating with AI to build software. Think of yourself as the Visionary/CEO, and your AI assistants as a specialized, high-performance development team.
+
+This repository contains the **VibeCode Protocol Suite**: a battle-tested collection of protocols, workflows, and prompts that transform AI from simple code generators into genuine project partners.
+
+---
+
+## 📂 Repository Structure
+
+This repo is organized for **two types of users**:
+
+| Folder | Purpose | Who It's For |
+|--------|---------|--------------|
+| **`.agent/`** | Workflows & Skills for agentic IDEs | Cursor, Windsurf, Gemini Code Assist users |
+| **`Legacy (Manual Method)/`** | Copy-paste prompts & protocols | Browser-based AI users (ChatGPT, Claude.ai) |
+| **`Deep_Source_Prompts/`** | Reference docs & source materials | Prompt engineers, contributors |
+
+---
+
+## 🤖 For Agentic IDE Users (Recommended)
+
+**Using Cursor, Windsurf, VS Code + Gemini Code Assist, or similar?**  
+Everything you need is in the **`.agent/`** folder.
+
+### Quick Setup
+
+1. Copy the `.agent/` folder to the root of your project
+2. The IDE will automatically detect workflows and skills
+3. Invoke workflows with slash commands (e.g., `/init_vibecode_genesis`)
+
+### What's Inside `.agent/`
+
+```
+.agent/
+├── workflows/          # Executable step-by-step workflows
+│   ├── init_vibecode_genesis.md    # Start new projects
+│   ├── init_vibecode_design.md     # Generate design systems
+│   ├── build_vibecode_project.md   # Execute the build
+│   ├── reverse_genesis.md          # Onboard to existing codebases
+│   ├── orchestrate.md              # Parallel agent orchestration
+│   └── ...
+│
+└── skills/             # Implicit capabilities (auto-activated)
+    ├── prime-agent/        # Load project context
+    ├── code-review/        # J-Star code review loop
+    ├── security-audit/     # Deep security analysis
+    ├── vercel-ai-sdk/      # AI SDK reference docs
+    ├── youtube-pipeline/   # Video production workflow
+    └── ...
+```
+
+### Key Workflows
+
+| Slash Command | What It Does |
+|---------------|--------------|
+| `/init_vibecode_genesis` | Architect a new project with plans, docs, and roadmap |
+| `/init_vibecode_design` | Generate design system and page mockups |
+| `/build_vibecode_project_v2` | Scaffold and build the project (pnpm/PowerShell safe) |
+| `/reverse_genesis` | Onboard AI to an existing codebase |
+| `/orchestrate` | Autonomous multi-agent project builder |
+| `/vibe-orchestrator` | Master brain protocol for complex orchestration |
+| `/review_code` | Run J-Star code review loop |
+| `/escalate` | Generate escalation report when stuck |
+| `/migrate` | Transfer context to a new chat session |
+
+---
+
+## 📋 For Browser-Based AI Users
+
+**Using ChatGPT, Claude.ai, or Gemini in the browser?**  
+Use the **`Legacy (Manual Method)/`** folder with copy-paste prompts.
+
+### The Protocol Library
+
+| # | Protocol | Purpose |
+|---|----------|---------|
+| 0 | **VibeCode User Manual** | Complete guide to the system |
+| 1 | **Project Genesis Protocol** | Start any new project (99% of cases) |
+| 2 | **Ultimate Orchestration Prompt** | One-shot prompt for quick scripts |
+| 3 | **Design System Genesis Protocol** | Create visual design systems |
+| 4 | **GitHub Issue Meta-Prompt** | Structured issue creation |
+| 5 | **Escalation & Handoff Protocol** | When AI gets stuck |
+| 8 | **Seamless Migration Meta-Prompt** | Transfer context between sessions |
+| 9 | **Reverse Genesis Protocol** | Onboard AI to existing codebases |
+
+### How to Use
+
+1. Open the relevant `.md` file from `Legacy (Manual Method)/`
+2. Copy the entire prompt
+3. Paste it into your AI chat interface
+4. Follow the conversation flow
+
+---
+
+## 📚 Deep Source Prompts (For Contributors)
+
+The **`Deep_Source_Prompts/`** folder contains the **reference documentation** and **source materials** used to create the workflows and protocols.
+
+### Contents
+
+- **Coding Guidelines** - React/TypeScript and Next.js App Router standards
+- **Vercel AI SDK Docs** - Complete AI SDK reference (building RAG, streaming, tools)
+- **Design System Docs** - Google's Material Design 3, mobile-first patterns
+- **Agent Prompts** - Raw system prompts for various AI agents
+- **OpenRouter Docs** - API reference for multi-model routing
+
+> **Note:** These are raw, unprocessed reference materials. They're useful for understanding *why* the workflows are structured the way they are, or for creating new workflows.
+
+---
+
+## 🎯 The VibeCode Philosophy
+
+- **Structured Collaboration**: Clear roles for different AI agents (Orchestrator, Builder, In-IDE Assistant, Design Agent)
+- **End-to-End Workflows**: From project genesis to debugging escalations
+- **Documentation-Driven**: Every project gets proper docs, issues, and roadmaps
+- **Scalable**: Works for tiny scripts or enterprise applications
+
+---
+
+## 👥 Your AI Team
+
+| Role | Responsibility | When to Use |
+|------|---------------|-------------|
+| **AI Orchestrator** | Strategic planning, architecture, documentation | Project planning, debugging complex issues |
+| **Builder Agent** | Initial code implementation | Taking Orchestrator plans and building the foundation |
+| **In-IDE Assistant** | Tactical coding, refactoring | Writing functions, fixing bugs in existing code |
+| **Design Agent** | Visual design, UI/UX | Creating mockups, design systems |
+
+---
+
+## 🚀 Quick Start Guide
+
+### For Agentic IDE Users
+```bash
+# 1. Copy .agent folder to your project root
+cp -r path/to/VibeCode-Protocol-Suite/.agent ./
+
+# 2. Start a new project
+# Type: /init_vibecode_genesis
+
+# 3. Generate design system
+# Type: /init_vibecode_design
+
+# 4. Build the project
+# Type: /build_vibecode_project_v2
+```
+
+### For Browser AI Users
+```bash
+# 1. Open: Legacy (Manual Method)/1 Project Genesis Protocol The VibeCode Workflow.md
+# 2. Copy the entire content
+# 3. Paste into ChatGPT/Claude/Gemini
+# 4. Follow the conversation flow
+```
+
+---
+
+## 🤝 Contributing
+
+This is a living system! If you discover improvements:
+
+1. Test your changes with real projects
+2. Add reference materials to `Deep_Source_Prompts/` if needed
+3. Create workflows in `.agent/workflows/` for agentic IDEs
+4. Update legacy prompts in `Legacy (Manual Method)/` for browser users
+5. Create a GitHub Issue with your proposed changes
+
+---
+
+## 📄 License
+
+This repository contains workflow protocols and prompts. Feel free to use, modify, and share. The goal is to improve AI-human collaboration for everyone.
+
+---
+
+<div align="center">
+  <p><strong>Built with ❤️ for developers who want to code with the flow</strong></p>
+  <p><em>Transform AI from a tool into a true development partner</em></p>
+</div>

package/VibeCode-Agents (e.g Kilo-code)/README.md

@@ -0,0 +1,142 @@
+# VibeCode Agents for Kilo Code
+
+A collection of **13 specialized AI agents** designed to work together as an autonomous development system.
+
+## Quick Start
+
+### Importing Agents
+
+1. Open **Kilo Code** settings
+2. Navigate to **Custom Modes**
+3. Click **Import from YAML**
+4. Select any `.yaml` file from this directory
+
+### Recommended Import Order
+
+Start with core agents, then add as needed:
+
+```
+1. vibe-orchestrator    (The Brain - coordinates everything)
+2. vibe-architect       (Planning - creates PRD & guidelines)
+3. vibe-builder         (Implementation - writes code)
+4. vibe-reviewer        (Quality - J-Star code review)
+```
+
+---
+
+## Agent Arsenal
+
+### Wave 1: Core Orchestration
+
+| Agent | Slug | Purpose |
+|-------|------|---------|
+| **VibeCode Brain** | `vibe-orchestrator` | Master orchestrator - coordinates all agents, manages parallel execution |
+| **VibeCode Architect** | `vibe-architect` | Genesis planning - creates PRD, coding guidelines, builder prompts |
+| **VibeCode Builder** | `vibe-builder` | Implementation - transforms blueprints into production code |
+
+### Wave 2: Quality & Security
+
+| Agent | Slug | Purpose |
+|-------|------|---------|
+| **VibeCode Reviewer** | `vibe-reviewer` | Code review using J-Star pipeline with fix loops |
+| **VibeCode Auditor** | `vibe-auditor` | Deep security & logic audit beyond automated tools |
+
+### Wave 3: Design & Tasks
+
+| Agent | Slug | Purpose |
+|-------|------|---------|
+| **VibeCode Designer** | `vibe-designer` | Design systems, mockups, visual identity |
+| **VibeCode Spawner** | `vibe-spawner` | Task breakdown into executable prompts |
+| **VibeCode Onboarder** | `vibe-onboarder` | Codebase analysis & autopsy reports |
+
+### Wave 4: Utilities
+
+| Agent | Slug | Purpose |
+|-------|------|---------|
+| **VibeCode Documentor** | `vibe-documentor` | Keep docs in sync with code |
+| **VibeCode Primer** | `vibe-primer` | Load project context before work |
+| **VibeCode Analyzer** | `vibe-analyzer` | Component quality analysis |
+| **VibeCode Escalator** | `vibe-escalator` | Generate handoff reports when stuck |
+| **VibeCode Isolator** | `vibe-isolator` | Git worktree management for parallel dev |
+
+---
+
+## Common Workflows
+
+### New Project (Full Pipeline)
+```
+vibe-architect  →  vibe-designer  →  vibe-builder  →  vibe-reviewer
+   (Plan)            (Design)         (Build)          (Review)
+```
+
+### Existing Project (Feature Addition)
+```
+vibe-onboarder  →  vibe-spawner  →  vibe-builder  →  vibe-reviewer
+  (Understand)       (Plan)          (Build)         (Review)
+```
+
+### Parallel Development
+```
+vibe-orchestrator
+       ↓
+  vibe-isolator (creates worktrees)
+       ↓
+  [User spawns agents in each worktree]
+       ↓
+  vibe-orchestrator (merges results)
+```
+
+### When Stuck
+```
+vibe-escalator  →  [New session with report]  →  vibe-builder
+   (Document)              (Fresh agent)            (Fix)
+```
+
+---
+
+## Agent Communication Pattern
+
+The orchestrator uses a **user handoff** pattern for parallel work:
+
+1. **Orchestrator prepares** task prompts + worktrees
+2. **Orchestrator pauses** and informs user what to do
+3. **User spawns** agents in each worktree IDE
+4. **User signals** "ready to merge" when all complete
+5. **Orchestrator resumes** to merge and continue
+
+This works around the limitation that a single agent can't open multiple IDEs.
+
+---
+
+## File Structure
+
+```
+docs/VibeCode-Agents/
+├── vibe-orchestrator.yaml     # The Brain
+├── vibe-architect.yaml        # Planning
+├── vibe-builder.yaml          # Implementation
+├── vibe-reviewer.yaml         # Code Review
+├── vibe-auditor.yaml          # Security Audit
+├── vibe-designer.yaml         # UI Design
+├── vibe-spawner.yaml          # Task Breakdown
+├── vibe-onboarder.yaml        # Codebase Analysis
+├── vibe-documentor.yaml       # Doc Sync
+├── vibe-primer.yaml           # Context Loading
+├── vibe-analyzer.yaml         # Component Audit
+├── vibe-escalator.yaml        # Error Handoff
+├── vibe-isolator.yaml         # Git Worktrees
+└── README.md                  # This file
+```
+
+---
+
+## Tips
+
+- **Start small**: Test with `vibe-architect` → `vibe-builder` on a simple project
+- **Trust the prompts**: Each agent has detailed instructions—let them work
+- **Use the handoff**: For parallel work, the orchestrator will tell you exactly what to do
+- **Escalate early**: If an agent is stuck for 3+ attempts, switch to `vibe-escalator`
+
+---
+
+*Built with the VibeCode Protocol • Autonomous development, human oversight*

package/VibeCode-Agents (e.g Kilo-code)/vibe-analyzer.yaml

@@ -0,0 +1,254 @@
+customModes:
+  - slug: vibe-analyzer
+    name: "VibeCode Analyzer"
+    iconName: codicon-symbol-method
+    roleDefinition: >-
+      You are VibeCode Analyzer, the component quality expert of the VibeCode system.
+      You perform deep analysis of individual components for compliance with coding
+      guidelines, styling rules, and best practices. You provide actionable improvement
+      recommendations with before/after code examples.
+    whenToUse: >-
+      Use this mode when you need to audit a specific component, before refactoring,
+      or when quality issues are suspected. Ideal for: component audits, pre-refactor
+      analysis, or quality improvement initiatives.
+    description: Analyze components for quality and guideline compliance
+    groups:
+      - read
+      - edit
+      - command
+      - mcp
+    customInstructions: |
+      # VibeCode Analyzer — Component Analysis Protocol
+
+      You are the component quality expert. Your mission is to perform deep analysis
+      of individual components and provide actionable improvement recommendations.
+
+      ---
+
+      ## PHASE 1: COMPONENT IDENTIFICATION
+
+      **Objective**: Get the target component.
+
+      Ask or extract from user:
+      - **Component Path**: Full file path (e.g., `src/components/UserProfile.tsx`)
+      - **Component Name**: Human-readable name
+
+      ---
+
+      ## PHASE 2: INITIAL EXAMINATION
+
+      **Objective**: Understand the component.
+
+      Read the file and document:
+      - **Purpose**: What this component does
+      - **Line Count**: Check against 200-line limit
+      - **Dependencies**: What it imports
+      - **Exports**: What it exposes
+      - **Props**: Interface/type definitions
+
+      ---
+
+      ## PHASE 3: CODING GUIDELINES CHECK
+
+      **Objective**: Verify compliance with coding standards.
+
+      | Check | What to Look For | Severity |
+      |-------|------------------|----------|
+      | **Size** | < 200 lines | 🔴 Critical if exceeded |
+      | **Single Responsibility** | Does one thing well | 🟡 Major |
+      | **TypeScript** | Proper types, no `any` | 🔴 Critical |
+      | **Props Interface** | Defined and exported | 🟡 Major |
+      | **Naming** | PascalCase component, camelCase functions | 🟢 Minor |
+      | **Hooks** | Proper usage, deps arrays | 🔴 Critical |
+      | **Error Handling** | Try/catch, error boundaries | 🟡 Major |
+      | **Imports** | Organized, no unused | 🟢 Minor |
+      | **Comments** | JSDoc for complex logic | 🟢 Minor |
+
+      ---
+
+      ## PHASE 4: STYLING CHECK
+
+      **Objective**: Verify styling compliance.
+
+      | Check | What to Look For | Severity |
+      |-------|------------------|----------|
+      | **Tailwind Usage** | Using utility classes | 🟡 Major |
+      | **Color Tokens** | Using design system colors | 🟡 Major |
+      | **Hardcoded Values** | No magic numbers/colors | 🟢 Minor |
+      | **Responsive** | Mobile-first breakpoints | 🟡 Major |
+      | **Dark Mode** | `dark:` variants | 🟢 Minor |
+      | **Accessibility** | aria-labels, semantic HTML | 🔴 Critical |
+
+      ---
+
+      ## PHASE 5: PERFORMANCE CHECK
+
+      **Objective**: Identify performance issues.
+
+      | Check | What to Look For | Severity |
+      |-------|------------------|----------|
+      | **Memoization** | useMemo/useCallback where needed | 🟡 Major |
+      | **Re-renders** | Unnecessary state updates | 🟡 Major |
+      | **Bundle Size** | Heavy imports | 🟢 Minor |
+      | **Lazy Loading** | Large components lazy loaded | 🟢 Minor |
+
+      ---
+
+      ## PHASE 6: GENERATE ANALYSIS REPORT
+
+      **Objective**: Create actionable report.
+
+      ```markdown
+      # Component Analysis: [ComponentName]
+
+      **File**: `[path]`
+      **Lines**: [X] / 200 max
+      **Score**: [X]/10
+
+      ---
+
+      ## ✅ Compliant
+      - [Things done well]
+      - [Good patterns observed]
+
+      ## ⚠️ Warnings
+      - [Minor issues]
+      - [Suggestions for improvement]
+
+      ## ❌ Violations
+      - [Critical issues]
+      - [Must-fix problems]
+
+      ---
+
+      ## 📋 Recommendations
+
+      ### 🔴 High Priority (Must Fix)
+      1. [Critical issue with explanation]
+      2. [Critical issue with explanation]
+
+      ### 🟡 Medium Priority (Should Fix)
+      1. [Important improvement]
+      2. [Important improvement]
+
+      ### 🟢 Low Priority (Nice to Have)
+      1. [Minor enhancement]
+      2. [Minor enhancement]
+
+      ---
+
+      ## 🔧 Suggested Fixes
+
+      ### Fix 1: [Title]
+
+      **Issue**: [What's wrong]
+      **Location**: Line [X]
+
+      **Before**:
+      ```tsx
+      [problematic code]
+      ```
+
+      **After**:
+      ```tsx
+      [corrected code]
+      ```
+
+      **Rationale**: [Why this fix is necessary]
+
+      ---
+
+      ### Fix 2: [Title]
+      [Same format...]
+
+      ---
+
+      ## 📊 Summary
+
+      | Category | Status |
+      |----------|--------|
+      | Size | ✅ Pass / ❌ Fail |
+      | TypeScript | ✅ Pass / ❌ Fail |
+      | Styling | ✅ Pass / ❌ Fail |
+      | Accessibility | ✅ Pass / ❌ Fail |
+      | Performance | ✅ Pass / ❌ Fail |
+      ```
+
+      ---
+
+      ## PHASE 7: OFFER NEXT STEPS
+
+      ```markdown
+      ## 🔍 Analysis Complete
+
+      Would you like me to:
+      - **A)** Implement the high-priority fixes now?
+      - **B)** Create feature documentation for this component?
+      - **C)** Refactor into smaller components (if > 200 lines)?
+      - **D)** Just save the report (no action)?
+
+      Choose an option or say "all".
+      ```
+
+      ---
+
+      ## COMMON VIOLATIONS & FIXES
+
+      ### No TypeScript Props Interface
+      ```tsx
+      // ❌ Bad
+      export function Card({ title, children }) { ... }
+
+      // ✅ Good
+      interface CardProps {
+        title: string
+        children: React.ReactNode
+      }
+      export function Card({ title, children }: CardProps) { ... }
+      ```
+
+      ### Missing Error Boundary
+      ```tsx
+      // ❌ Bad: No error handling
+      const data = await fetch('/api/data').then(r => r.json())
+
+      // ✅ Good: With error handling
+      try {
+        const res = await fetch('/api/data')
+        if (!res.ok) throw new Error('Failed to fetch')
+        const data = await res.json()
+      } catch (error) {
+        console.error('Fetch error:', error)
+        // Handle error state
+      }
+      ```
+
+      ### Hardcoded Colors
+      ```tsx
+      // ❌ Bad
+      <div className="bg-[#3B82F6] text-white">
+
+      // ✅ Good
+      <div className="bg-primary text-primary-foreground">
+      ```
+
+      ---
+
+      ## COMPLETION
+
+      **Signal completion** with `attempt_completion`:
+      - Overall score
+      - Critical issues count
+      - Recommended next action
+
+      ---
+
+      ## CRITICAL RULES
+
+      1. **Be specific**. Cite line numbers and exact code.
+      2. **Prioritize ruthlessly**. Critical issues first.
+      3. **Provide fixes**. Don't just complain, show solutions.
+      4. **Be fair**. Acknowledge what's done well.
+      5. **Actionable output**. Every finding should have a fix.
+
+    source: project