skills.rest
akillness
akillnessCOMMUNITY
Explore all skills by this author →
Website𝕏@akillness0308GitHub

agentation

Mount a React toolbar that reports CSS selectors, bounding boxes, and component trees to an MCP server.

40|9|Updated Jan 4, 2026
Search Tags:#mcp#ai-agents#visual-feedback#component-tree#css-selector#ui-annotation
One-click install
npx skills add https://github.com/akillness/oh-my-skills --skill agentation-akillness
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agentation
Source: https://github.com/akillness/oh-my-skills/tree/main/.agent-skills/agentation
Command: npx skills add https://github.com/akillness/oh-my-skills --skill agentation-akillness

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Visual UI feedback and annotation tooling that lets humans label UI elements and feed precise selectors, component trees, and bounding boxes to AI agents for targeted code actions.

Core Features & Use Cases

  • Visual UI annotation toolbar for AI agents with MCP integration across Claude Code, Codex, Gemini CLI, and OpenCode.
  • Watch-loop support for iterative feedback, automated critiques, and webhook delivery to keep agents in sync with UI changes.
  • Platform-specific hooks and scripts to simplify setup and ongoing maintenance (e.g., MCP server, agentation-mcp, and setup scripts).

Quick Start

Mount the Agentation toolbar in your app and connect to the agentation MCP server to begin annotating UI elements.

Frequently Asked Questions about agentation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I give visual UI feedback to AI agents for code changes?▼

You can give visual UI feedback to AI agents by annotating UI elements with a mounted React toolbar that reports CSS selectors, bounding boxes, and component trees to an MCP server, enabling targeted code actions.

What is a watch-loop pattern for iterative UI reviews?▼

A watch-loop pattern for iterative UI reviews continuously monitors UI changes and delivers webhook notifications to keep AI agents in sync, supporting automated critiques and human-in-the-loop feedback workflows.

Does this UI annotation toolbar work with Claude Code and Gemini CLI?▼

Yes, this UI annotation toolbar works with Claude Code, Codex, Gemini CLI, and OpenCode by connecting to a local MCP server to coordinate plan, execute, and verify workflows across different agent environments.

How do I set up an MCP server for AI agent UI annotations?▼

To set up an MCP server for AI agent UI annotations, you mount the Agentation client library in your app and run the provided platform-specific setup scripts to connect the toolbar to the agentation-mcp server.

Can I report React component trees and CSS selectors to autonomous agents?▼

Yes, you can report React component trees and CSS selectors to autonomous agents by mounting the annotation toolbar, which captures precise element bounding boxes and structural data for the MCP server.

What are the limitations of using MCP for visual UI feedback?▼

Limitations of using MCP for visual UI feedback include requiring a local agentation-mcp server and a mounted React toolbar, meaning it needs a connected development environment to preserve session state and coordinate workflows.

Related Skills

Explore More Design & Creative Skills→
damien-schneiderdamien-schneider
32

agentation

Integrate the Agentation annotation toolbar into Next.js layouts and configure MCP server settings.

Community
Intermediate
kevinnguyen271090kevinnguyen271090
15

ui-styling

Generate Tailwind CSS configurations and shadcn/ui components for React projects.

Community
Intermediate
cfactolerincfactolerin

code-reviewer-add-agent

Add Claude, Codex, Gemini, or opencode review agents to a code review workflow.

Community
Intermediate
edteedte
11

playwright-cli

Automate browser interactions for testing, form filling, screenshots, and data extraction via Playwright CLI.

Community
Intermediate