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.

4180Updated 1mo 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

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);
    });
  });
}
```