Frontend Design Loop MCP

Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.

ray

Generate code screenshots via ray.tinte.dev API. Use when user asks for code screenshots, code images, code snippets as images, or says "ray". Calls POST https://ray.tinte.dev/api/v1/screenshot and saves the PNG result.

gamekit-cli

Capture game view screenshots for visual verification

Io.Github.Digital Defiance/Mcp Screenshot

Screenshot capture with PII masking and cross-platform support for AI agents

compose_driver

Drive the Compose Driver sample app to test UI logic. Use it whenever you need to verify that Composables work as expected or to capture screenshots of a composable.

ark-dashboard-testing

Test Ark Dashboard with Playwright and create PRs with screenshots. Use when testing dashboard UI, taking screenshots for PRs, or reviewing dashboard changes.

capture-usage4claude-screenshots

Automate Usage4Claude interface screenshots with CleanShot X on macOS. Use when Codex needs to capture localized Usage4Claude menu-bar popover screenshots, switch Usage4Claude display/language settings, save files such as [email protected], or troubleshoot CleanShot/window-capture automation that depends on macOS Accessibility, osascript, CoreGraphics mouse movement, and the Usage4Claude Debug app.

dev-browser

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", or any browser interaction request.

launch

Launch and automate VS Code (Code OSS) using agent-browser via Chrome DevTools Protocol. Use when you need to interact with the VS Code UI, automate the chat panel, test UI features, or take screenshots of VS Code. Triggers include 'automate VS Code', 'interact with chat', 'test the UI', 'take a screenshot', 'launch Code OSS with debugging'.

Io.Github.Pedro Rivas/Android Puppeteer Mcp

MCP server for Android automation with UI interaction, screenshots, and device control

phoneagent

Control a connected iPhone, iOS simulator, Android emulator, or Android device from macOS through PhoneAgent's JSON-RPC bridge. Use when users ask to automate mobile UI actions, inspect accessibility trees, toggle Settings switches, navigate apps, or capture screenshots by sending RPC methods like get_tree, get_screen_image, get_context, tap_element, enter_text, scroll, swipe, and open_app.

Io.Github.User0856/Snaprender

Screenshot any website as PNG, JPEG, WebP, or PDF. Device emulation, dark mode, ad blocking.

flet-release-announcement

Create or update a Flet release announcement blog post from changelog notes, matching existing /blog style. Use when asked to draft, plan, or revise posts like "Flet X.Y.Z release announcement" with major feature sections, screenshots, code samples, upgrade instructions (pip and uv/pyproject.toml), and a compact "other changes" summary.

ShipScreens MCP Server

Deterministic App Store and Google Play screenshot pipeline with CLI and stdio MCP tools.

Screen Buffer Mcp

MCP server for fast Android screenshots via scrcpy frame buffer (~50ms latency).

design-compare

Compare Figma designs against implementation screenshots, identifying layout, typography, color, and sizing discrepancies. Generates a structured visual review table and an interactive HTML comparison page with swipe and side-by-side modes. Use when the user asks to compare design with preview, compare Figma with screenshot, check design implementation, or provides a Figma URL alongside a screenshot.

Desktop control

`kaizen computer <verb>` reads the accessibility tree of a running app and acts on it. No screenshots, no pixel clicks, no keyboard shortcuts. Linux only (AT-SPI). It refuses every verb until the user turns this skill on.

ab-test-store-listing

When the user wants to A/B test App Store product page elements to improve conversion rate. Also use when the user mentions "A/B test", "product page optimization", "test my screenshots", "test my icon", "conversion rate optimization", "CPP", or "custom product pages". For screenshot design, see screenshot-optimization. For metadata optimization, see metadata-optimization.

OpenGraph.io MCP Server

MCP server for OpenGraph.io API - fetch OG data, screenshots, scrape, and generate images

vibe-check

Browser automation for AI agents. Use when the user needs to navigate websites, read page content, fill forms, click elements, take screenshots, or manage browser pages.

Iphone Mirroir Mcp

Control a real iPhone through macOS iPhone Mirroring: screenshot, tap, swipe, type.

/social-captions — Algorithm-Optimized Social Media Captions (v2)

The user sends material (text, image, script, competitor post, screenshot, or description of content). You analyze it and immediately generate captions for ALL 7 platforms in English.

axe

Provides agent-ready AXe CLI usage guidance for iOS Simulator automation. Use when asked to "use AXe", "automate a simulator", "tap/swipe/type on simulator", "describe UI", "take a screenshot", "record video", "batch steps", or "interact with an iOS app". Covers all commands including touch, gestures, text input, keyboard, buttons, accessibility, screenshots, video, and batch workflows.

rename-with-dates

Rename documents and files (PDFs, images, screenshots, etc.) by reading their content to extract the effective/publication date, then renaming them with a "YYYY-MM-DD - Clear descriptive title.ext" format. Use when the user wants to organize files with date prefixes based on document content.

Io.Github.Serkan Ozal/Browser Devtools Mcp

Playwright browser & Node.js MCP. ARIA refs, screenshots, ref-based interactions.

browser-automation

Local Python-based browser automation toolkit using Playwright. Provides command-line tools for navigating, interacting with, and testing web applications without using MCP protocols. Supports clicking, typing, hovering, screenshots, content extraction, and JavaScript execution.

PageShot MCP

Capture webpage screenshots with format, viewport, and dark mode options

AginxBrowser — a browser engine for agents

14 tools cover everything an agent needs on the web: read, search, screenshot, download files, and interact. When a task involves reading/searching/screenshotting a web page or driving a multi-step interaction, prefer this skill's tools over hand-rolled `curl` + HTML parsing.

excalidraw-skill

Programmatic canvas toolkit for creating, editing, and refining Excalidraw diagrams via MCP tools with real-time canvas sync. Use when an agent needs to (1) draw or lay out diagrams on a live canvas, (2) iteratively refine diagrams using describe_scene and get_canvas_screenshot to see its own work, (3) export/import .excalidraw files or PNG/SVG images, (4) save/restore canvas snapshots, (5) convert Mermaid to Excalidraw, or (6) perform element-level CRUD, alignment, distribution, grouping, duplication, and locking. Requires a running canvas server (EXPRESS_SERVER_URL, default http://localhost:3000).

gui

Cross-driver GUI actuation for CAE solvers running under sim-cli. Use to click buttons, fill fields, dismiss dialogs, and capture window screenshots against GUI-capable driver windows through `sim exec`.

Context management plugin for Claude Code. Your AI remembers your projects, people, and decisions across every session. Plain files on your machine.

Use when external content arrives in the session — emails, transcripts, screenshots, documents, files, or in-session research worth keeping. Also use when there's nothing obvious to capture — the skill checks 03_Inputs/ for unrouted files and enters inbox scan mode. Stores raw content, routes to capsules, extracts tasks and insights into the stash.

Native DevTools

MCP server for desktop, browser (CDP), and Android automation. Screenshot, OCR, click, type.

Kane CLI — Browser Automation Skill

Use `kane-cli` for **any task that requires a real browser**: navigating websites, clicking elements, filling forms, searching, testing web UI, taking screenshots, or verifying deployments.

laravel-screenshot

Take screenshots of web pages in Laravel using spatie/laravel-screenshot. Covers taking screenshots of URLs and HTML, customizing viewport and format, saving to disks, queued generation, testing, and configuring drivers (Browsershot, Cloudflare).

maui-ai-debugging

End-to-end workflow for building, deploying, inspecting, and debugging .NET MAUI and MAUI Blazor Hybrid apps as an AI agent. Use when: (1) Building or running a MAUI app on iOS simulator, Android emulator, Mac Catalyst, macOS (AppKit), or Linux/GTK, (2) Inspecting or interacting with a running app's UI (visual tree, tapping, filling text, screenshots, property queries), (3) Debugging Blazor WebView content via CDP, (4) Managing simulators or emulators, (5) Setting up MauiDevFlow in a MAUI project, (6) Completing a build-deploy-inspect-fix feedback loop, (7) Handling permission dialogs and system alerts, (8) Managing multiple simultaneous apps via the broker daemon. Covers: maui-devflow CLI, androidsdk.tool, appledev.tools, adb, xcrun simctl, xdotool, and dotnet build/run for all MAUI target platforms including macOS (AppKit) and Linux/GTK.

abx-dl

Use this when you need to scrape websites, extract page content, download media, or run the ArchiveBox extractors without a full ArchiveBox install. abx-dl can save many kinds of web content including txt, md, html, json, pdf, png, jpg, mp4, mp3, srt, screenshots, favicons, headers, DOM snapshots, mirrored sites, and more using the same plugin ecosystem that powers ArchiveBox.

HTML/CSS to Image

An MCP server for generating images from HTML & CSS or screenshots of URLs using htmlcsstoimage.com.

Screenshot Debugging Skill

cvfit

Use when someone points at a job, hackathon, fellowship or program application and wants a resume for it. Triggers: a posting URL, a screenshot of a posting, pasted posting text, a company plus role name, or phrasings like 'adapt my CV to this', 'tailor my resume for this role', 'Harvard format resume', 'make a CV for this application', 'one-page resume'. The skill reads the posting, assembles the person's material from whatever exists (the conversation, an Obsidian vault, markdown notes, an old resume, public repos), decides the right shape for that person and that posting, renders a one-page Harvard-format PDF, and evaluates it against a rubric until it passes or the gap is explained. Don't use for cover letters, LinkedIn profiles or portfolio sites.

surf

Control Chrome browser via CLI for testing, automation, and debugging. Use when the user needs browser automation, screenshots, form filling, page inspection, network/CPU emulation, DevTools streaming, or AI queries via ChatGPT/Gemini/Perplexity/Grok/AI Studio.

koubou

Generate App Store screenshots using HTML/CSS templates with real device frames. Creates professional, localized screenshots for iPhone, iPad, Mac, and Watch. Use when user wants to create, design, or update App Store screenshots.

balatrobot

Run and debug BalatroBot locally. Use when you need to start Balatro with the BalatroBot Lua mod, manually test or reproduce issues via the JSON-RPC HTTP API, inspect the newest session logs under logs/, and capture screenshots into logs/<session>/artifacts/ using only the balatrobot CLI (no curl, no uvx).

devhost-test

Runs the extension in a real, disposable VS Code (Extension Development Host) with fake data and drives its Webview over the Chrome DevTools Protocol. Use after a sidebar or Webview change, when a check needs real theme injection, host-side state writes or settings round-trips that the synthetic preview (npm run test:ui) cannot give, or to screenshot the sidebar in real themes. Never for real accounts.

contribute

After successfully performing a browser action using a method not found in Hive (or discovered via screenshot), contribute that method back to the collective.

interactive-testing

Smoke-test the running Lightcode Electron app end-to-end via Chrome DevTools Protocol. Use when the user asks to "smoke test", "test the app", "verify the refactor in the UI", "open the app and click through", or otherwise wants Claude to drive the real running app instead of relying on unit tests. Boots dev server + Electron with CDP enabled, uses raw CDP or agent-browser as appropriate, walks the surfaces most relevant to the current diff (provider selector, ThreadDraftView, ChatPane, ThreadRuntimeRequestPanel, Browser panel), and reports findings with screenshots.

Mobile Device Mcp

AI control of Android/iOS devices. Screenshots, UI tree, AI vision, Flutter, video. 49 tools.

cloudflare-browser

Control headless Chrome via Cloudflare Browser Rendering CDP WebSocket. Use for screenshots, page navigation, scraping, and video capture when browser automation is needed in a Cloudflare Workers environment. Requires CDP_SECRET env var and cdpUrl configured in browser.profiles.

preview-build

Build and capture SwiftUI previews for visual analysis. Use when the user asks to preview a SwiftUI view, capture a simulator screenshot, or visually inspect iOS UI components. Supports Xcode projects, SPM packages, and standalone Swift files.

Android

Control Android devices and emulators via ADB — screenshots, UI automation, and logcat.

browse

Fast headless browser for QA testing and site dogfooding. Navigate any URL, interact with elements, verify page state, diff before/after actions, take annotated screenshots, check responsive layouts, test forms and uploads, handle dialogs, and assert element states. ~100ms per command. Use when you need to test a feature, verify a deployment, dogfood a user flow, or file a bug with evidence. Use when asked to "open in browser", "test the site", "take a screenshot", or "dogfood this".