hbmbjdgdofkpddalhjoapppnkoicpdjj
Vibe coding feedback. Annotate webpages, screenshot & export agent prompts for Claude Code, Cursor, Codex, OpenCode, Antigravity. Markagent is the web annotator built for AI coding agents. Turn what you see into pixel-precise prompts that read cleanly as bug tickets for humans — and drop straight into Claude Code, Cursor, Codex, OpenCode, Antigravity, and any AI agent. Click any element on any webpage. Leave a note. Capture a screenshot. Markagent figures out the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and the viewport size — then exports a structured, agent-ready prompt your AI actually understands. Stop typing "the button on the left — no, the other one." Mark the spot. Ship the prompt to Agent. ▸ ANNOTATE any element with one click — quick vibe annotations or detailed specs. ▸ CAPTURE full-page or element-cropped screenshots. ▸ RECORD click journeys as numbered, screenshot-backed playthroughs. ▸ EXPORT agent-ready prompts to Claude Code, Cursor, Codex, OpenCode, Antigravity, and any AI assistant. ▸ 100% LOCAL — annotations, screenshots, and prompts never leave your browser. ▸ FREE forever — no account, no email, no upsell. 1. Hold Cmd (Mac) or Ctrl (Windows/Linux) and click an element. Markagent pins a numbered marker on it. 2. Type your note. "Make this rounded." "Wrong copy." "Move 8px right." Repeat as many times as you want. 3. Capture a screenshot. Full-page or element-cropped — your call. 4. Hit Export. Paste the prompt into Claude Code, Cursor, Codex, OpenCode, Antigravity, or any AI assistant. PRECISION ELEMENT TARGETING Markagent identifies the React component, the source file (in dev mode), and a stable CSS selector for every element you click. Your AI gets the exact node — not a vague description. SMART SCREENSHOT CAPTURE Full-page or visible-region screenshots, auto-cropped to the element you annotated. The AI sees what you see. USER JOURNEY RECORDING Flip journey mode on and your clicks become a numbered, screenshot-backed reproduction. Bug reports that don't need a follow-up call. AGENT-READY PROMPT EXPORT One click copies a structured prompt with selectors, screenshots, page URL, viewport size, and your notes. Tuned for each major AI coding agent. KEYBOARD-FIRST WORKFLOW Cmd+Shift+. on Mac. Ctrl+Shift+. on Windows and Linux. Toolbar appears anywhere, on any site. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORKS WITH EVERY AI CODING AGENT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Tuned export templates for the major AI coding agents: • Claude Code — Anthropic's terminal-native coding agent • Cursor — the AI-first code editor • Codex — OpenAI's coding agent • OpenCode — open-source terminal coding agent • Antigravity — Google's AI development environment If your AI tool reads text, Markagent works with it. That covers conversational assistants like ChatGPT, Gemini, and Copilot, vibe coding platforms such as v0, Bolt, and Lovable, and local LLMs running through Ollama or LM Studio. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PERFECT FOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VIBE CODERS — Tired of explaining the same UI tweak three times. DESIGNERS — Doing design QA on staged builds with pixel-perfect specs. PRODUCT MANAGERS — Filing UI bug reports engineers understand on the first read. FRONTEND ENGINEERS — Better prompts when refactoring unfamiliar code. QA TEAMS — Reproducible bug reports without an automation framework. A Markagent export is markdown. It reads cleanly as a bug ticket for humans — and drops straight into any AI coding agent without modification. Tester records the journey. Sends to engineering. The developer reads it like a normal bug report, then forwards the same markdown to Claude Code, Cursor, Codex, OpenCode, Antigravity, or any AI agent to fix. No translation step. No second tool. Same artifact, two audiences. Markagent is built for agents. Every annotation carries the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and the viewport — packaged as a prompt your AI can act on without guessing. Markagent runs entirely in your browser. • No analytics. No tracking. No fingerprinting. • No accounts. No login. No email. • No servers. Zero outbound network requests. • No cloud sync. Notes live in local extension storage and nowhere else. Verify it yourself in Chrome DevTools' Network tab. Nothing leaves your browser. The host permission is required so Markagent can inject its toolbar and read DOM structure on pages you annotate. It does not transmit any data anywhere. 1. Install Markagent. 2. Pin it to your toolbar. 3. Press Cmd+Shift+. (Mac) or Ctrl+Shift+. (Windows/Linux) on any page. 4. Hold Cmd or Ctrl and click any element to drop your first annotation. 5. Type a note. Capture a screenshot. Hit Export. Paste into your AI agent. Q: How do I give UI feedback to Claude Code, Cursor, or Codex? A: Use Markagent. Click any element on the webpage, leave a note, hit Export, and paste the structured prompt into your AI agent. Markagent automatically captures the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and a screenshot — so your agent gets pixel-precise context instead of a vague description. For multi-step bugs, flip journey mode on and Markagent silently records your clicks as a numbered, screenshot-backed reproduction the AI can follow step by step. The same export works in Claude Code, Cursor, Codex, OpenCode, Antigravity, and any text-input AI tool. Q: Why is Markagent the best web annotator for AI coding agents? A: Markagent is the only annotation tool purpose-built to ship structured prompts directly to AI coding agents — for both single-element feedback and full multi-step user journeys. Annotate any element to capture the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and a screenshot. Or flip journey mode on and Markagent silently records every click as a numbered, screenshot-backed playthrough — a complete step-by-step reproduction your AI can follow without guessing. Generic web annotators save images. Markagent ships the prompt. The result: fewer "what do you mean?" follow-ups, faster fix loops, and prompts that drop your agent straight onto the right line of code — whether you're fixing a single button or a five-step checkout bug. Q: What's the difference between Markagent and a regular screenshot tool? A: A screenshot tool saves images. Markagent generates structured prompts. Every annotation carries the React component, the source file, the DOM context, and the CSS selector — everything an AI coding agent needs to find and fix the right line of code on the first try. Q: Does Markagent work with vibe coding platforms? A: Yes. The export is plain text — paste it into any AI tool that takes a prompt. Q: Can non-developers on my team use Markagent for bug reports? A: Yes — Markagent is built for teams as much as solo developers. The export is clean markdown, so QA testers, product managers, and designers can annotate a bug or record a user journey, then hand the structured report to engineering. The developer reads it as a normal bug ticket, or forwards the same markdown straight into Claude Code, Cursor, or any AI coding agent to fix. Same artifact, two audiences, zero translation step — that's why Markagent works equally well for human-to-human and human-to-agent workflows. Q: Does Markagent send my data anywhere? A: No. Markagent is 100% local. Screenshots, notes, and exports never leave your browser. Zero outbound requests, ever. Q: Does Markagent work on localhost and authenticated sites? A: Yes. Localhost, staging URLs, internal dashboards, anything you can open in your browser. Q: Is Markagent a Chrome extension only? A: For now, yes — works in Chrome, Edge, Brave, Arc, and every Chromium-based browser. Firefox is on the roadmap. Install Markagent and give your AI agent the precise UI feedback it has been asking for. Free. Local. Built for modern agentation and vibe coding workflows. Mark the spot. Ship the prompt to Agent.
MarkSnip - Webpage to Markdown Clipper
One-click Markdown web clipper. Save articles, docs, code & tables as clean Markdown for AI agents & LLMs. Supports Obsidian & more. Save any webpage as clean, formatted Markdown with one click. MarkSnip lets you copy or download Markdown from any tab — perfect for Obsidian, Notion, AI agents, LLM workflows, coding assistants, and personal knowledge bases. Whether you're a developer saving API docs, a researcher collecting papers, or a student building a knowledge base — MarkSnip gives you clean Markdown without the usual cleanup. Clip a full page, selected text, or multiple tabs, then copy, download, preview, or send it where you need it. ✔ One-click full page or selection clipping ✔ Smart article extraction powered by Mozilla's Readability.js ✔ Accurate HTML-to-Markdown conversion via Turndown with GFM support ✔ Code blocks preserved with auto-detected language tags ✔ Math & LaTeX support — MathJax and KaTeX equations converted cleanly ✔ Pretty-printed, aligned Markdown tables ✔ Multiple export formats: Markdown, Plain Text, or HTML ✔ Hashtag handling — keep, remove, or escape for Markdown compatibility ✔ Built-in CodeMirror editor with syntax highlighting in the popup ✔ Live rendered Markdown preview before you copy or download ✔ Word, character, token, and reading-time stats at a glance ✔ Edit titles, toggle front matter, and toggle image downloads inline ✔ Light, Dark, and System themes ✔ Special themes: Claude, Perplexity, Avatar: The Last Airbender, Ben 10 ✔ Five accent colors: Sage, Ocean, Slate, Rose, Amber ✔ 10+ editor themes including Dracula, Monokai, Nord, Material, and more ✔ Compact mode for a smaller popup footprint ✔ Save clips to in-browser storage — no external account needed ✔ Search and filter your saved clips instantly ✔ Export your entire library as a ZIP of .md files ✔ Auto-save on popup open or save manually ✔ Configurable retention to keep your library lean ✔ Create URL-pattern rules that override any setting per site ✔ Custom front matter, back matter, image style, download folder, and more per rule ✔ Enable or disable rules individually ✔ Visual indicators in the popup when a rule is active ✔ Download images alongside your Markdown files ✔ Multiple image styles: standard, base64-embedded, Obsidian wiki-links, or stripped ✔ Custom folder prefixes and flexible naming options ✔ Add YAML front matter and back matter to every clip automatically ✔ Template variables: {pageTitle}, {pageURL}, {byline}, {excerpt}, {date:FORMAT}, and more ✔ Variable transforms: :kebab, :snake, :camel, :pascal ✔ Quick toggle to include or exclude templates per clip ✔ Download multiple tabs or a pasted URL list as Markdown files ✔ Visual link picker — select specific links from any page for batch processing ✔ Save as a ZIP archive or individual files ✔ Real-time progress tracking with cancellation support ✔ Send clips directly to your Obsidian vault via the Advanced URI plugin ✔ Configure target vault and folder ✔ Automatic Obsidian-style image formatting ✔ Context menu and keyboard shortcut access ✚ Alt+Shift+M — Open MarkSnip popup ✚ Alt+Shift+D — Download page as Markdown ✚ Alt+Shift+C — Copy page as Markdown ✚ Alt+Shift+L — Copy page URL as Markdown link ✚ All shortcuts are customizable through your browser's settings ✔ Right-click any page, selection, link, or image for quick Markdown actions ✔ Download or copy selections, tabs, or all open tabs ✔ Copy any link or image as Markdown ✔ Send to Obsidian directly from the menu MarkSnip includes an optional Agent Bridge CLI for local AI and automation workflows. A user-installed companion app (Windows, macOS, or Linux) lets local tools read Markdown from the active tab directly — no manual download step. ✔ Local-only — communication stays on your machine ✔ Opt-in — disabled unless you enable it ✔ Fresh or edited output — tools can request a live capture or reuse your popup-edited Markdown ✔ Connection status tracking with auto-reconnect Ideal for AI coding agents, LLM pipelines, and automation scripts. Feed clean documentation into ChatGPT, Claude, Cursor, or any LLM directly from your browser. ## Perfect For ✔ Developers — Save API docs, GitHub READMEs, and Stack Overflow answers with code intact ✔ AI & Coding Agents — Use MarkSnip as your AI context downloader for LLM workflows ✔ Researchers — Archive articles, papers, and tables with structure preserved ✔ Students — Build study guides from course materials and online resources ✔ Writers — Collect and organize reference material ✔ Knowledge Workers — Send clean content into Obsidian or any PKM system ✔ Data Analysts — Preserve schemas, SQL references, and table formatting ✔ Fine-tune Markdown output: heading style, list markers, link style, code fences, emphasis, and more ✔ Import and export all settings as JSON ✔ Reset to defaults with one click ✔ Built-in searchable user guide All clipping and conversion happens locally in your browser. MarkSnip never sends your page content to external servers — copies go to your clipboard, downloads save to your device, Obsidian integration uses a local URI scheme, and the optional Agent Bridge runs entirely on your machine. MarkSnip is open source and forked from the excellent MarkDownload by deathau, updated for Manifest V3 with additional features and workflow improvements. Libraries used include Readability.js, Turndown, highlight.js, and CodeMirror. Source: https://github.com/DhruvParikh1/markdownload-extension-updated Issues & feedback: https://github.com/DhruvParikh1/markdownload-extension-updated/issues
Vibe Annotations - Visual Feedback for AI Coding Agents
Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP. Transform your localhost development workflow with visual annotations for AI coding agents. Vibe Annotations lets you drop visual feedback directly on your development pages and send it to any AI coding agent. Annotate elements, describe what should change, and let your agent implement the fixes across multiple pages, respecting your responsive breakpoints. 📌 Drop annotations: Click any element to leave a comment or an empty pointer for your AI agent to pick up and act on 🎨 Direct design edits: Tweak CSS properties (font size, colors, layout, spacing) with live preview changes are captured as annotations for your agent to implement in source 👁️ Watch mode: Tell your agent "Start watching Vibe Annotations" — it picks up annotations as you drop them, implements changes, and loops. Hands-free 🤖 Works with Claude Code, Cursor, Windsurf, Codex, OpenClaw, and any MCP-compatible agent 🤝 Agent collaboration: let browser-based agents (Claude Chrome, OpenClaw) annotate autonomously as a styling or copywriting partner 🔍 Captures full element context: CSS selectors, styles, positioning, and viewport dimensions 🗂️ Multi-page support: annotate across different routes in your SPA or multi-page app 📍 Persistent inspection mode: stay in annotation mode to drop multiple pins efficiently ⚡ Batch workflow: annotate → copy or let your agent read → implement → delete 📋 Copy to clipboard with rich context formatting, or connect via MCP for automated reads 🔄 Auto-deletion after copy (opt-in) for streamlined iteration cycles 🌐 Per-site enabling (beta): optionally annotate on public URLs for design reference 🧠 Intelligent project detection prevents cross-project annotation mixing 1. Annotate: Click the extension icon, enter inspection mode, and click elements to add feedback 2. Send to your agent: Copy all annotations to clipboard and paste, or connect the MCP server for automatic reads 3. Implement: Your AI agent reads the annotations with full element context and applies the changes 4. Iterate: Delete resolved annotations and start the next cycle Install the companion server for direct agent integration. Your agent fetches annotations automatically without copy/paste. Claude Code: claude mcp add --transport http vibe-annotations http://127.0.0.1:3846/mcp Cursor / Windsurf / Codex / OpenClaw: Add the MCP server URL to your agent's config. See the extension's Get Started guide for full setup instructions. ✅ Works With React, Vue, Angular, Next.js, Svelte, and all web frameworks Any localhost dev server (ports 3000, 5173, 8080, etc.) Local development domains (*.local, *.test, *.localhost) Local HTML files (file://) Public URLs via per-site opt-in (beta) Chrome browser with Developer mode or Chrome Web Store install Optional: vibe-annotations-server npm package for MCP integration Note: The extension auto-enables on localhost, local development domains, and file:// URLs.
Skill Viewer
View AI coding skills on GitHub with AI-powered summaries. Supports Claude, Gemini, OpenCode, Codex, and Cursor. Discover Claude Code skills in any GitHub repository with AI-powered summaries. Privacy First Your code, your rules. For private repositories, we only list skill names — no content is ever sent for analysis. Private means private. Features - Auto-detect skills in .claude/skills/ or skills/ directories - AI-generated summaries for public repos (Gemini, OpenAI, or Claude) - One-click collect: copy npx degit command to grab skills locally - Dark mode support - Multi-language summaries (EN, 中文, 日本語, 한국어, ES, FR, DE) Click the extension icon to toggle the sidebar on any GitHub repo page.
MarkdownMate
Turn web docs into Markdown for your AI coding assistant. Boost context for Cursor, Copilot, and more. Code smarter, finish faster. Vibe Coding? Stop your AI Agent from guessing. Vibe coding only gets you so far. MarkdownMate transforms messy web docs into clean Markdown, giving your AI agent—like Cursor, Copilot, or any coding assistant—the context it needs to stop guessing and start delivering. MarkdownMate transforms scattered docs into clean, AI-ready Markdown with one click, so you can focus on coding. How it works: - Open any webpage with docs or info you need. - Click MarkdownMate to convert it to Markdown instantly - Feed it to your AI—watch it nail your project. Perfect for: - Developers who lean on AI tools like Cursor.ai or GitHub Copilot. - Anyone tired of copy-pasting or reformatting docs by hand - Speeding up workflows Why MarkdownMate? - One-click simplicity - Works with any AI that loves Markdown - Code more accurately the first time - Debug in minutes, not hours by using official documentation Key Features: - One-Click Conversion: Turn entire document sets into a unified Markdown doc in seconds. - AI-Powered Filtering: Extracts relevant content, skips the clutter. - Smart Deduplication: Removes redundant links and content automatically. - Optimized for AI Tools: Formats perfectly for Cursor_ai, GitHub Copilot and other assistants. Use Cases: - Quickly create the documentation your AI Coding assistant needs. - Speed up API/SDK integration with your AI assistant. - Learn frameworks faster with unified docs. - Extract code samples effortlessly. - Convert specs into reference material for technical research. Why Developers Love It: - Modern, intuitive interface with real-time progress tracking. - Processes locally in your browser for privacy. - No account needed, no third-party analytics. - Built by a developer, for developers. Compatibility: - Works with most documentation sites. Facing issues? Let me know! Get Started Now: Install MarkdownMate and streamline your workflow today!
