agentation_skill

Overview

This skill is a visual UI annotation bridge that lets humans click elements in any React app and deliver precise, machine-readable targets to AI agents. It captures CSS selectors, bounding boxes, and React component trees so agents can locate the exact code to change. Use it copy-paste style for one-off reviews or connect it to a local MCP server for a continuous watch-loop with agent automation.

How this skill works

A small React toolbar is dropped into your app; when a human clicks an element and leaves feedback the tool records elementPath (CSS selector), bounding box, and the React component tree. In Copy-Paste mode the toolbar exports markdown the human pastes into agent chat. In Agent Sync mode the toolbar talks to a local MCP server which exposes APIs and CLI tools so agents can poll, acknowledge, fix, and resolve annotations programmatically.

When to use it

• When a human needs to point at a UI element without writing selectors
• During iterative UI/UX review cycles between designers and coding agents
• To build an agent watch-loop that auto-fixes user annotations
• When you need precise targets (CSS selector, bounding box, React tree) to modify code reliably
• To inject visual feedback into agent prompts via platform hooks or webhooks

Best practices

• Run the toolbar only in development or testing environments to avoid user-facing overhead
• Use MCP Agent Sync for iterative, automated fix loops; Copy-Paste works for ad-hoc feedback
• Prefer elementPath (CSS selector) and React tree together to reduce false positives when searching code
• Acknowledge annotations in the agent before making changes, then resolve with a short summary
• Configure webhookUrl or onSubmit callbacks to integrate annotations into CI or issue trackers

Example use cases

• Designer clicks a misaligned button, copies the annotation into agent chat; agent greps selector and suggests CSS tweaks
• Developer enables Agent Sync; the agent blocks on agentation_watch_annotations and auto-applies small UI fixes as annotations arrive
• QA team captures failing UI states and posts annotations to a webhook that files reproducible bug reports with selectors and screenshots
• Autonomous critique: run agent-browser with agentation to let an agent review UI elements and post improvement suggestions
• Integrate with Claude/Codex/Gemini/OpenCode MCP hooks so pending annotations auto-append to each agent message