Vibe Code

Real-time code monitoring tool that teaches you while you code. Features three powerful modes switchable with Shift+Tab: Diff Mode with teaching explanations, Rules Mode for CLAUDE.md compliance, and Chat Mode for interactive Q&A.

Quick Start

``bash
npx vibe-code-build
`

Or install globally:

`bash
npm install -g vibe-code-build
vibe-code
`

Features

$3

Switch between modes instantly using Shift+Tab:

#### 1. 🔍 Diff Mode - Code Changes with Teaching
- Shows exact git diff for every file change
- Provides AI-powered explanations of what changed
- Teaches programming concepts related to the changes
- Helps you understand the "why" behind code modifications

#### 2. 📋 Rules Mode - CLAUDE.md Compliance & Best Practices
- Monitors code against your project's CLAUDE.md guidelines
- Real-time security vulnerability detection
- Performance issue identification
- Best practice enforcement
- Architectural pattern checking

#### 4. 🔍 Checks Mode - Comprehensive Quality Monitoring
- Build & Compilation: TypeScript, linting, test validation
- Dependencies: Vulnerability scanning, outdated package detection
- Security: God mode patterns, exposed secrets, injection vulnerabilities
- CLAUDE.md: AI guideline compliance checking
- Performance: Bundle size analysis, image optimization
- SEO Analysis (NEW):
- Overall SEO score (0-100) with letter grades
- Technical SEO: robots.txt, sitemap.xml, HTTPS, mobile config
- Content SEO: Title tags, meta descriptions, heading hierarchy
- Social SEO: Open Graph, Twitter Cards
- Performance SEO: Core Web Vitals, image optimization
- Detailed explanations for each issue
- Priority-based recommendations with time estimates

#### 3. 💬 Chat Mode - Interactive Q&A
- Ask questions while coding
- Get explanations about recent changes
- Learn programming concepts on demand
- Context-aware responses based on your code

Usage

$3

`bash
npx vibe-code-build
`

Choose "Start Monitoring" from the menu, and the unified monitor will begin watching your files.

$3

Once monitoring starts, press Shift+Tab at any time to cycle through the three modes:

`
🎓 Vibe Code
─────────────────────────────────────────────────
🔄 Available Modes:
• Diff - Code changes with teaching explanations
• Rules - Monitor CLAUDE.md compliance
• Chat - Interactive Q&A
─────────────────────────────────────────────────

✨ Switched to: 🔍 Diff Mode - See code changes with teaching explanations
Press Shift+Tab to switch modes • Ctrl+C to exit
`

$3

`bash
npx vibe-code watch /path/to/project
`

$3

`bash
npx vibe-code init
`

Mode Examples

$3

`
🔍 Vibe Code - Diff Mode
══════════════════════════════════════════════════
📌 UPDATE #1 | 2:45:32 PM
══════════════════════════════════════════════════
📝 auth-service.js

Changes:
@@ -15,6 +15,8 @@
const existingUser = await this.userRepository.findByEmail(email);
if (existingUser) {
throw new ValidationError('User already exists');
}
+
+ // Add rate limiting
+ await this.checkRateLimit(email);

🎓 What this change does:
This change modifies auth-service.js with 2 additions and 0 deletions.
Key changes: Function implementation changed.

💡 Teaching: This uses async/await for handling asynchronous operations,
making the code more readable than callbacks or promise chains.
`

$3

`
📋 Vibe Code - Rules Mode
─────────────────────────────────────────────────
📝 payment-handler.js 2:46:15 PM

🚨 Rule Violations:
🚨 Hardcoded secrets detected! Use environment variables instead.
Line 5
🚨 SQL injection vulnerability! Use parameterized queries.
Line 12

💡 Suggestions:
💡 Use const/let instead of var for better scoping.
💡 Consider adding "use strict" for safer JavaScript.

🧙 Senior Dev Suggestions:
⚠️ Synchronous file operations block the event loop. Use async versions.
`

$3

`
🎓 Vibe Code - Chat Mode
─────────────────────────────────────────────────
📁 Recent Changes:
📝 auth-service.js 2:45:32 PM
✅ auth-service.test.js 2:46:15 PM

💬 Chat:
─────────────────────────────────────────────────
You: What changed in the auth service?

Teacher: File auth-service.js was modified.

This change modifies auth-service.js with 2 additions and 0 deletions.
Key changes: Function implementation changed.

💡 Teaching: This uses async/await for handling asynchronous operations,
making the code more readable than callbacks or promise chains.

You: What is rate limiting?

Teacher: Rate limiting is like a bouncer at a club - it controls how many
requests someone can make in a given time period. It prevents attackers
from trying thousands of passwords quickly!
─────────────────────────────────────────────────
💬
`

CLAUDE.md Integration

The Rules Mode automatically reads your project's CLAUDE.md file to understand:
- Project-specific commands
- Architecture patterns to enforce
- Security requirements
- Performance guidelines

If no CLAUDE.md exists, it uses sensible defaults for security and best practices.

Chat Commands

In Chat Mode, you can use these commands:
- /help - Show available commands
- /clear - Clear chat history
- /quit - Exit the program

Development

`bash


Clone the repo

git clone https://github.com/yourusername/vibe-code.git
cd vibe-code

Install dependencies

npm install

Run locally

npm start
`

SEO Analysis Features

The enhanced SEO checker in Checks Mode provides comprehensive search engine optimization analysis:

$3

- Technical SEO: robots.txt, sitemap.xml, structured data, HTTPS, mobile viewport
- Content SEO: Title optimization, meta descriptions, heading hierarchy, alt text
- Social SEO: Open Graph tags, Twitter Cards, social sharing optimization
- Performance SEO: Image optimization, lazy loading, Core Web Vitals factors

$3

Each SEO issue includes:
- What it is: Clear explanation of the SEO element
- Why it matters: Impact on search rankings and user experience
- How to fix: Step-by-step recommendations with code examples
- Priority level: Critical, High, Medium, or Low severity

$3

- Priority-sorted action items
- Time estimates for implementation
- Expected impact on SEO performance
- Real-world examples and best practices

$3

- Overall score from 0-100 with letter grades (A+ to F)
- Category-specific scores for targeted improvements
- Competitive benchmarking suggestions

Example output:
`
✅ SEO Analysis:
🎯 Score: 73/100 (B)
📊 Category Scores:
• Technical: 85/100
• Content: 62/100
• Social: 70/100
• Performance: 75/100
⚠️ Top Issues:
• No robots.txt file found
💡 Add a robots.txt file to control search engine crawling
• 5 pages missing meta descriptions
💡 Add compelling meta descriptions to improve CTR
``

License

MIT