Development
Plugin
agentation
The visual feedback tool for agents.
Plugin Signal62/100Solid
maintained68
capable23
documented100
adopted77
Install
$ npx -y skills add benjitaylor/agentation --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
4,345
Stars
340
Forks
Maintained
Maintenance
TypeScript
Language
2mo ago
Last commit
6mo ago
Created
Repo: benjitaylor/agentation
What's inside
Skills
2/agentation-self-drivingAutonomous design critique mode using the Agentation annotation toolbar. Use when the user asks to "critique this page," "add design annotations," "review the UI," "self-driving mode," "auto-annotate," or wants an AI agent to autonomously add design feedback annotations to a web/agentationAdd Agentation visual feedback toolbar to a Next.js project
Badges
2
README
1
Agentation is an agent-agnostic visual feedback tool. Click elements on your page, add notes, and copy structured output that helps AI coding agents find the exact code you're referring to.
Install
npm install agentation -D
Usage
import { Agentation } from 'agentation';
function App() {
return (
<>
<YourApp />
<Agentation />
</>
);
}
The toolbar appears in the bottom-right corner. Click to activate, then click any element to annotate it.
Features
- Click to annotate – Click any element with automatic selector identification
- Text selection – Select text to annotate specific content
- Multi-select – Drag to select multiple elements at once
- Area selection – Drag to annotate any region, even empty space
- Animation pause – Freeze all animations (CSS, JS, videos) to capture specific states
- Structured output – Copy markdown with selectors, positions, and context
- Dark/light mode – Matches your preference or set manually
- Zero dependencies – Pure CSS animations, no runtime libraries
How it works
Agentation captures class names, selectors, and element positions so AI agents can grep for the exact code you're referring to. Instead of describing "the blue button in the sidebar," you give the agent .sidebar > button.primary and your feedback.
Requirements
- React 18+
- Desktop browser (mobile not supported)
Docs
Full documentation at agentation.com
License
© 2026 Benji Taylor
Licensed under PolyForm Shield 1.0.0
File tree
150benjitaylor/agentationView on GitHub
.github/
FUNDING.yml
.gitignore
.npmignore
.npmrc
.vscode/
settings.json
AGENTS.md
CLAUDE.md
CONTRIBUTING.md
LICENSE
mcp/
.gitignore
package.json
pnpm-lock.yaml
README.md
src/
cli.ts
index.ts
server/
events.ts
http.ts
index.ts
mcp.ts
sqlite.ts
store.ts
tenant-store.ts
types.ts
tsconfig.json
tsup.config.ts
package/
package.json
.gitignore
AGENTS.md
CLAUDE.md
example/
.gitignore
AGENTS.md
CLAUDE.md
next.config.js
package.json
public/
api-og.png
blog/
agentation-2.png
layout-mode.png
demo-avatar.png
design-mode.html
og-image.png
schema/
annotation.v1.json
src/
app/
api/
layout.tsx
page.tsx
apple-icon.png
blog/
introducing-agentation-2/
layout.tsx
page.tsx
layout-mode/
layout.tsx
page.tsx
page.tsx
changelog/
page.tsx
colophon/
page.tsx
components/
CodeBlock.tsx
FeaturesDemo.css
FeaturesDemo.tsx
HeroDemo.tsx
MCPDiagram.tsx
SchemaDiagram.tsx
TextSelectionDemo.tsx
WebhooksDiagram.tsx
faq/
page.tsx
favicon.ico
features/
page.tsx
Footer.tsx
globals.scss
icon.png
icon.svg
install/
page.tsx
layout.tsx
mcp/
page.tsx
MobileNav.tsx
MobileNotice.tsx
not-found.tsx
output/
page.tsx
page.tsx
schema/
page.tsx
SideNav.tsx
ToolbarProvider.tsx
webhooks/
page.tsx
components/
Motion.tsx
TOC.tsx
hooks/
useActiveScrollElement.ts
useMeasure.ts
tsconfig.json
hooks/
check-agentation.sh
README.md
LICENSE
logo-dark.svg
logo.svg
package-lock.json
package.json
package.json.tmp
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
src/
components/
annotation-popup-css/
index.tsx
styles.module.scss
checkbox/
index.tsx
styles.module.scss
design-mode/
index.tsx
output.ts
palette.tsx
rearrange.tsx
section-detection.ts
skeletons.tsx
spatial.ts
styles.module.scss
types.ts
help-tooltip/
index.tsx
styles.module.scss
icon-transitions.module.scss
icons.tsx
index.ts
page-toolbar-css/
annotation-marker/
index.tsx
styles.module.scss
index.test.tsx
index.tsx
settings-panel/
checkbox-field/
index.tsx
styles.module.scss
index.tsx
styles.module.scss
styles.module.scss
switch/
index.tsx
styles.module.scss
tooltip/
index.tsx
globals.d.ts
index.ts
scss.d.ts
types.ts
utils/
element-identification.ts
freeze-animations.ts
generate-output.ts
index.ts
react-detection.test.ts
react-detection.ts
screenshot.ts
source-location.test.ts
source-location.ts
storage.ts
sync.ts
tsconfig.json
tsup.config.ts
vercel.json
vitest.config.ts
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
skills/
agentation/
agentation-self-driving/
references/
two-session-workflow.md
SKILL.md
SKILL.md
vercel.jsonFAQ
agentation is a Claude Code plugin with 2 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes agentation-self-driving, agentation. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is agentation?
- The visual feedback tool for agents.
- How do I install agentation?
- Run these in Claude Code: npx -y skills add benjitaylor/agentation --agent claude-code. Then prompt normally.
- Does agentation auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is agentation free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.