vibe-annotations

🥈Silver

AI-powered annotations for localhost development. Create visual feedback on your apps and let AI coding agents automatically implement fixes via MCP integration. Benefits developers by speeding up debugging and reducing manual coding tasks.

7080Updated 2mo ago

Intermediate30min to implementautomation

Saves ~110 min per use

Quick InstallView Source

git clone https://github.com/RaphaelRegnier/vibe-annotations.git

Works with:

Claude

Overview

About This Skill

Vibe Annotations is a Chrome browser extension that enables developers to visually annotate elements on localhost pages and share that feedback with AI coding agents like Claude Code and Cursor. The tool works by installing a browser extension, running a local server, and either copying annotations to your AI agent or connecting via MCP protocol for direct implementation. It solves the problem of manual back-and-forth communication between design feedback and code changes by letting AI agents read annotations and apply fixes automatically. Developers can annotate multiple pages, make direct design tweaks that persist, and collaborate with teammates through export and import features. The MCP integration allows seamless workflows where annotations trigger automated code updates without leaving your development environment.

How to Use

Install the Vibe Annotations Chrome extension, then run `npx vibe-annotations-server init` to set up the server and configure your AI coding agent. Open a localhost page, click Annotate to mark elements, and either copy annotations to paste into your AI agent or use the MCP integration for automatic implementation. The server runs in the background and supports multiple pages and collaborative workflows.

Use Cases

Annotate UI elements and have AI agents automatically implement CSS or design fixes

Speed up debugging by marking issues visually and sharing them with Claude Code or Cursor

Collaborate with teammates by exporting and importing annotations across localhost pages

Make persistent design tweaks directly on running apps while developing

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/RaphaelRegnier/vibe-annotations

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

I'm a developer working on a [COMPANY] app in the [INDUSTRY] sector. I need to add AI-powered annotations to my localhost development environment. Here's the [DATA] I'm working with: [INSERT DATA]. Please generate visual feedback annotations and suggest fixes that can be implemented via MCP integration.

Example Output

# AI-Powered Annotations for [COMPANY] App

## Visual Feedback

- **Button Alignment Issue**: The 'Submit' button on the checkout page is misaligned with the form fields. Suggested fix: Adjust the CSS grid layout to ensure consistent spacing.

- **Loading Indicator**: The loading spinner during API calls is not visible. Suggested fix: Add a loading state indicator using the existing spinner component.

- **Mobile Responsiveness**: The navigation menu collapses incorrectly on mobile devices. Suggested fix: Implement a responsive navigation pattern using a hamburger menu.

## MCP Integration Fixes

```javascript
// Adjust CSS grid layout for 'Submit' button
.mcp-apply-css {
  .checkout-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

// Add loading state indicator
.mcp-apply-js {
  const apiCalls = document.querySelectorAll('.api-call');
  apiCalls.forEach(call => {
    call.addEventListener('click', () => {
      const spinner = document.createElement('div');
      spinner.className = 'spinner';
      call.appendChild(spinner);
    });
  });
}
```

Apply to these tools

Browse all tools

Autom

Your one-stop shop for church and ministry supplies.

Automa

Automate your browser workflows effortlessly

IronCalc

IronCalc is a spreadsheet engine and ecosystem

Supahub

Customer feedback management made simple

ServiceNow

Enterprise workflow automation and service management platform

GPT for work

Automate your spreadsheet tasks with AI power

Compatible MCP servers

Browse all MCP servers

Find the right skills for your stack

Take a free 3-minute scan and get personalized AI skill recommendations.

Take free scan