Skip to main content
affpapa.org
RU EN
skill CX Codex

agentation · akillness — Claude Code skill: what it does, how to install

Connects in-browser clicks on rendered components directly to coding agents, formatting CSS paths, coordinates, and markdown for prompt handoffs.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add akillness/jeo-skills --skill agentation -a claude-code
Open on GitHub

What agentation does

agentation routes precise frontend feedback into an assistant's context. When you click an element in the browser, the companion toolbar bundles DOM paths, bounding boxes, and component structure instead of vague descriptions. You paste the payload directly. This keeps the review loop tight.

The workflow covers manual copy-paste snippets or live syncing through agentation-mcp. In sync mode, pending annotations flow directly into the coding loop. The UI package requires Node.js 18+ alongside React 18+. Repository helper scripts include setup-agentation-mcp.sh and verify-loop.sh to validate the queue.

If you need headless regression testing without visual click targets, this tool will get in the way. Disposable browser harness runners handle fresh headless checks much cleaner.

What it helps with

  • extract CSS selectors and bounding boxes directly from browser clicks
  • pipe visual UI notes into an agent via an MCP watch loop
  • integrate a React development toolbar to inspect interface flaws
  • review frontend component issues without manual DOM inspection

Example prompts for the agent

  • Set up the agentation toolbar inside our React development entrypoint
  • Here is the captured UI payload from the toolbar, fix the layout alignment
  • Run scripts/verify-loop.sh to check if the annotation watch loop is active

How to install agentation

1Skills CLI (Vercel)

npx skills add akillness/jeo-skills --skill agentation -a claude-code

2Manually: put the files in place

~/.claude/skills/agentation/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/agentation/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about agentation

How to install agentation in Claude Code?

Run npx skills add akillness/jeo-skills --skill agentation -a claude-code. The skill file will be placed in ~/.claude/skills/agentation/SKILL.md.

What does agentation do?

It captures rendered UI targets, DOM selectors, and coordinates from a running browser page and formats structured packets for coding assistants.

What prerequisites does it need?

The toolbar runs on React 18+ and Node.js 18+. To enable automatic synchronization into agent sessions, register the agentation-mcp server.

Similar skills

All skills for Frontend and UI →

agentation by other authors comes first.

agentation benjitaylor Adds a visual feedback toolbar to a Next.js project and, on request, wires it to your coding agent over MCP. CX Codex +1 13,600installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set65

security-best-practices This skill turns vague web and API security requests into one scoped hardening brief, with a primary risk area and matching verification steps. CX Codex +1 366installs state-management A skill that classifies React state into packets and picks the narrowest owner, so you stop arguing about libraries before you know what the state is. CX Codex +1 365installs grill-with-docs Conducts an intense review interview on an engineering plan or design, generating ADR records and glossary definitions as decisions are settled. CX Codex +1 365installs sprint-retrospective Runs a sprint or milestone retrospective and turns it into a few owned actions instead of another template ritual. CX Codex +1 364installs debugging A skill that walks the agent through a reproduce → isolate → verify loop for concrete bugs, regressions and flaky failures. Useful once you already have a failing test or request. CX Codex +1 361installs pattern-detection Triage recurring code smells, log spikes, and metric anomalies into structured detection packets before debugging or patching. CX Codex +1 361installs git-submodule A skill that first asks whether a submodule is the right boundary, then walks you through one safe workflow. Useful when your project pulls in outside code through .gitmodules. CX Codex +1 360installs deployment-automation Plans release rollouts and safe rollback workflows. Useful when code builds reliably but staging-to-production deployment lacks clear guardrails. CX Codex +1 360installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor