MCPInstall

agentation

by akillnessAI & Agents

Exact rendered-UI feedback router → choose copy-paste review, watch-loop sync, self-driving critique, or platform setup. MCP: npx add-mcp "npx -y agentation-mcp server"

Installs
363
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/akillness/jeo-skills --skill agentation
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads agentation automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

agentation

agentation is the rendered-UI feedback bridge in this repo.

Use it when a human needs to click the actual UI, attach feedback to the exact element or region they mean, and pass a structured packet to the coding agent. The main job is annotation routing: choose the right annotation mode, capture precise evidence, then hand the fix loop to the right adjacent skill or agent runtime.

When to use this skill

Use agentation when the task needs one or more of these:

  • a human reviewer pointing at a real UI element instead of describing it vaguely
  • structured feedback packets with selectors, element paths, bounding boxes, or copied markdown
  • a local copy-paste review loop between a browser and a coding agent
  • an MCP-backed sync/watch loop where new annotations flow into the agent context automatically
  • a self-driving critique/fix loop that still starts from rendered UI evidence
  • platform setup for passing pending UI annotations into Claude Code, Codex, Gemini CLI, or OpenCode

Do not use agentation by default for:

  • fresh-session browser verification or deterministic regression checks → browser-harness
  • running-browser, logged-in, or extension-dependent browser reuse → playwriter
  • plan review, diff approval, or visual sign-off on a proposed artifact → plannotator
  • generic design-system, accessibility, or heuristic audits without a concrete rendered UI packet

Quick routing rule

If the job needs...Use
Human clicks the UI and leaves exact feedback for the agentagentation
Browser verification in a clean repeatable sessionbrowser-harness
The user's already-open browser, cookies, or logged-in tabsplaywriter
Review or approval of a plan/diff before executionplannotator

Instructions

Step 1: Choose the right annotation mode

Pick one mode before touching setup details:

ModeUse whenOutput
Copy-paste reviewOne reviewer wants to annotate UI and paste the packet into chata structured markdown packet
Synced watch loopNew annotations should appear in the agent workflow automaticallypending-annotation queue + loop
Self-driving critiqueAn agent/browser loop will generate or consume annotations repeatedlya review/fix loop packet
Platform setupThe core problem is wiring the annotation bridge into Claude/Codex/Gemini/OpenCodea setup checklist and config target

If the task is really “test the website” or “drive the logged-in browser,” route out first and only come back to agentation if exact human UI feedback is the missing piece.

Step 2: Keep the browser boundary explicit

agentation does not replace the browser runtime choice.

  • Use browser-harness when you want a clean disposable verification browser.
  • Use playwriter when you must reuse the user's real browser session.
  • Use agentation once there is a rendered page that a human or loop should annotate precisely.

Step 3: Follow the core loop

  1. Prepare the rendered UI
    • Choose the correct browser/runtime skill first if needed.
  2. Add the Agentation toolbar to the app in development.
  3. Pick the annotation mode: copy-paste, watch loop, self-driving, or setup.
  4. Capture one concrete UI packet.
  5. Hand the packet to the coding agent.
  6. Re-verify after the fix using the same review lane.

Step 4: Use the fastest safe install path

For most setups, the practical order is:

# React toolbar
npm install agentation -D

# MCP bridge / auto-registration for supported agents
npx add-mcp "npx -y agentation-mcp server"

# verify the bridge
npx agentation-mcp doctor

Claude Code users can also install the upstream official skill when that is the simplest way to bootstrap the experience:

npx skills add benjitaylor/agentation -g
# then use /agentation in Claude Code

Step 5: Use a minimal toolbar integration first

Start with the smallest useful embed:

import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <Agentation />}
    </>
  )
}

Only add endpoint, callbacks, or webhook behavior when the chosen mode actually needs them.

Step 6: Choose the right handoff pattern

A. Copy-paste review

Use when a human is actively reviewing the page and pasting the packet into an agent chat.

Good for:

  • quick bug/UI polish rounds
  • one-off targeted fixes
  • low-setup collaboration

B. Synced watch loop

Use when the agent should poll or ingest pending annotations continuously.

Good for:

  • repeated QA/fix passes
  • designer ↔ agent loops
  • local review queues during active frontend work

Use the bundled verification script before trusting the loop:

bash .agent-skills/agentation/scripts/verify-loop.sh

C. Self-driving critique

Use when an agent/browser loop is reviewing UI repeatedly and agentation is the structured feedback packet, not the browser runtime itself.

Typical shape:

  • browser tool captures current state
  • agentation encodes concrete feedback targets
  • coding agent applies the fix
  • browser tool re-checks the result

Step 7: Keep platform setup narrow

When the request is really about platform wiring, answer only:

  • where the config lives
  • how agentation-mcp is registered
  • how pending annotations enter the agent loop
  • how to verify the setup

Push the platform-specific config blocks into the references instead of bloating the main workflow.

Scripts

Prefer the bundled scripts before retyping long commands:

ScriptPurpose
scripts/setup-agentation-mcp.shRegister the MCP bridge for supported agents
scripts/verify-loop.shValidate annotation queue / ACK → RESOLVE style watch-loop behavior

Examples

Example 1: Human reviewer wants exact UI feedback

  • Prompt: "I can point at the broken checkout button, but I don't want to describe selectors manually."
  • Expected behavior: choose agentation, recommend copy-paste review or sync mode, keep browser-runtime choice separate.

Example 2: Browser verification is the real job

  • Prompt: "Run a repeatable headless UI regression check and compare the results."
  • Expected behavior: route to browser-harness, not agentation, unless human annotation becomes a follow-up step.

Example 3: Logged-in browser reuse

  • Prompt: "Use the browser I'm already signed into and let me annotate a billing page issue."
  • Expected behavior: route the browser runtime to playwriter, then use agentation for the annotation packet.

Example 4: Planning review, not UI review

  • Prompt: "Open the generated plan in a browser so I can approve or reject steps before coding starts."
  • Expected behavior: route to plannotator, because the artifact is a plan/diff rather than a rendered UI issue.

Best practices

  1. Pick the browser/runtime lane first; agentation is the feedback bridge, not every browser tool.
  2. Prefer one annotation mode at a time instead of mixing copy-paste, watch loop, and platform setup in a single answer.
  3. Keep the first integration minimal; only add hooks, callbacks, or webhooks when the workflow needs them.
  4. Re-verify after fixes with the same review lane that produced the annotation.
  5. Treat exact UI feedback as the deliverable — not a giant dump of install permutations.
  6. Route out aggressively when the task is really plan review, fresh-browser verification, or running-browser reuse.

References

Deep-dive docs in this skill:

  • modes-and-routing
  • platform-setup-and-hooks
  • watch-loop-and-self-driving

Primary sources:

Metadata

  • Version: 1.1.0
  • Last updated: 2026-04-15
  • Scope: exact rendered-UI feedback packets, watch loops, and platform handoff for coding agents

FAQ

What does the agentation skill do?

Exact rendered-UI feedback router → choose copy-paste review, watch-loop sync, self-driving critique, or platform setup. MCP: npx add-mcp "npx -y agentation-mcp server"

How do I install agentation?

Run npx skills add https://github.com/akillness/jeo-skills --skill agentation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/agentation/ (personal) or .claude/skills/agentation/ (project).

Which AI agents can use agentation?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is agentation safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains agentation?

It is published by akillness in akillness/jeo-skills. It has 363 recorded installs.

More from akillness/jeo-skills

View all →

rtk

akillness/jeo-skills

Install, initialize, verify, and troubleshoot RTK (Rust Token Killer) for AI coding agents. Use when you need to reduce shell-command token output, confirm that the correct rtk binary is installed, choose between Homebrew, install.sh, or Cargo installation, wire rtk init for Claude Code, Codex, Gemini CLI, Cursor, Copilot, Windsurf, Cline, or OpenCode, or use compact wrappers such as rtk git status, rtk read, rtk grep, rtk test, rtk lint, and rtk gain. Triggers on: rtk, rust token killer, token saver cli, rtk init, rtk gain, codex rtk, gemini rtk, opencode rtk, claude hook token reduction.

Backend & APIs672 installs

graphify

akillness/jeo-skills

Drive Graphify from its CLI to build, refresh, query, export, and serve a durable code/corpus knowledge graph. Use when the user wants .graphify/GRAPHREPORT.md, graph.json, graph.html, graphify update/summary/query/path/explain/tree, change-aware review context, git-hook or watch-based refresh, a stdio MCP graph server, or an install into jeo, jeopi, gjc, opencode, Claude, Codex, or Gemini. Also covers the honest structural fallback when native extraction is empty or misleading. Route simple locate/reference work to codebase-search, narrative knowledge-base work to llm-wiki, and project-memory handoff to opencontext. Triggers on: graphify, graphify update, graphify query, knowledge graph CLI, GRAPHREPORT.md, graph.json, codebase graph, graph refresh, graphify install, graphify serve, review context, affected flows.

Code Quality & Workflow662 installs

data-analysis

akillness/jeo-skills

Analyze datasets to extract insights, identify patterns, and generate reports.

598 installs

code-refactoring

akillness/jeo-skills

Turn a cleanup packet into one behavior-preserving refactor brief. Use when simplifying a messy function/component/service, freezing behavior before touching fragile legacy code, splitting a cleanup-heavy diff into reviewable slices, or planning a repeated migration / codemod without changing intended behavior. Route diagnosis to debugging, review judgment to code-review, validation-program design to testing-strategies, bottleneck-led tuning to performance-optimization, and pure symbol inventory to codebase-search.

Code Quality & Workflow546 installs

technical-writing

akillness/jeo-skills

Write internal technical documentation for engineers and operators: technical specs, architecture docs, ADRs, runbooks, migration plans, and developer-facing implementation guides. Use when the main job is capturing a technical decision, system boundary, operating procedure, or rollout path for builders and maintainers. Triggers on: tech spec, design doc, architecture doc, ADR, runbook, migration guide, implementation guide, rollout doc, operational guide, and internal technical writing. End-user onboarding guides, tutorials, FAQs, and help-center flows belong here too. Route API portals to api-documentation, release notes to changelog-maintenance, decks to presentation-builder, and GTM messaging to marketing-automation.

Docs & Writing544 installs

web-accessibility

akillness/jeo-skills

Routing-first skill for web accessibility remediation and verification. Use when the main job is classifying which accessibility surface is failing — semantics, keyboard/focus, labels/announcements, visual perception/reflow, media alternatives, or routed-app navigation feedback — and turning vague audit, WCAG, axe/Lighthouse, or "make this accessible" requests into one concrete remediation packet. Broad UI critique for hierarchy, polish, and launch readiness belongs here too. Route component API architecture and system governance to design-system, and responsive layout strategy to responsive-design.

Frontend & Design531 installs

Popular ai & agents skills

View category →

google-agents-cli-publish

google/agents-cli

This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).

AI & Agents513.9K installs

google-agents-cli-eval

google/agents-cli

This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).

AI & Agents513.5K installs

skill-creator

anthropics/skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

OfficialAI & Agents416.4K installs

codex-pet

prime-skills/runcomfy-agent-skills

Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.

AI & Agents402.1K installs

full-output-enforcement

leonxlnx/taste-skill

Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.

AI & Agents401K installs

executing-plans

obra/superpowers

Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available

AI & Agents245.7K installs