agentation

AI Community

Repo stars 3,717
Author repo agentation

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: Add Agentation visual feedback toolbar to a Next.js project Set up the Agentation annotation toolbar in this project. For Next.j…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “Steps”, “Notes”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name agentation directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “Steps / Notes” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write / env-read; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Steps

Check if already installed
- Look for agentation in package.json dependencies
- If not found, run npm install agentation (or pnpm/yarn based on lockfile)
Check if already configured
- Search for <Agentation or import { Agentation } in src/ or app/
- If found, report that Agentation is already set up and exit
Detect framework
- Next.js App Router: has app/layout.tsx or app/layout.js
- Next.js Pages Router: has pages/_app.tsx or pages/_app.js

Add the component

For Next.js App Router, add to the root layout:

import { Agentation } from "agentation";

// Add inside the body, after children:
{process.env.NODE_ENV === "development" && <Agentation />}

For Next.js Pages Router, add to _app:

import { Agentation } from "agentation";

// Add after Component:
{process.env.NODE_ENV === "development" && <Agentation />}

Confirm component setup
- Tell the user the Agentation toolbar component is configured
Recommend MCP server setup
- Explain that for real-time annotation syncing with AI agents, they should also set up the MCP server
- Recommend one of the following approaches:
  - Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.): See add-mcp — run npx add-mcp and follow the prompts to add agentation-mcp as an MCP server
  - Claude Code only (interactive wizard): Run agentation-mcp init after installing the package
- Tell user to restart their coding agent after MCP setup to load the server
- Explain that once configured, annotations will sync to the agent automatically

Notes

The NODE_ENV check ensures Agentation only loads in development
Agentation requires React 18
The MCP server runs on port 4747 by default for the HTTP server
MCP server exposes tools like agentation_get_all_pending, agentation_resolve, and agentation_watch_annotations
Run agentation-mcp doctor to verify setup after installing

Fluxly profile Author and license come from source; runtime, permissions, and network are Fluxly detections or estimates

Fluxly category: AI
Author-declared agents: No explicit declaration found; this is not inferred or tested compatibility
Static check: 88 / 100 · heuristic scan, not runtime safety proof
Author / version / license: @benjitaylor · no license declared
Fluxly token estimate: Lean
Fluxly setup estimate: Plug-and-play
External API key: No requirement detected
Detected OS requirements: macOS · Linux · Windows
Runtime requirements: Unspecified
Detected file/system behavior: Read-only
Write / modify
Env read
Detected network behavior: Local-only
Install commands: None (reference only)

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview agentation.preview

The current SKILL.md does not define a fixed output example.

SKILL.md SKILL.md

# Agentation Setup

Set up the Agentation annotation toolbar in this project.

## Steps

1. **Check if already installed**
   - Look for `agentation` in package.json dependencies
   - If not found, run `npm install agentation` (or pnpm/yarn based on lockfile)

2. **Check if already configured**
   - Search for `<Agentation` or `import { Agentation }` in src/ or app/
   - If found, report that Agentation is already set up and exit

3. **Detect framework**
   - Next.js App Router: has `app/layout.tsx` or `app/layout.js`
   - Next.js Pages Router: has `pages/_app.tsx` or `pages/_app.js`

4. **Add the component**

   For Next.js App Router, add to the root layout:
   ```tsx
   import { Agentation } from "agentation";

   // Add inside the body, after children:
   {process.env.NODE_ENV === "development" && <Agentation />}
   ```

   For Next.js Pages Router, add to _app:
   ```tsx
   import { Agentation } from "agentation";

   // Add after Component:
   {process.env.NODE_ENV === "development" && <Agentation />}
   ```

5. **Confirm component setup**
   - Tell the user the Agentation toolbar component is configured

6. **Recommend MCP server setup**
   - Explain that for real-time annotation syncing with AI agents, they should also set up the MCP server
   - Recommend one of the following approaches:
     - **Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.):**
       See [add-mcp](https://github.com/neondatabase/add-mcp) — run `npx add-mcp` and follow the prompts to add `agentation-mcp` as an MCP server
     - **Claude Code only (interactive wizard):**
       Run `agentation-mcp init` after installing the package
   - Tell user to restart their coding agent after MCP setup to load the server

…

Evidence boundary and execution chain

Author text anchors workflow facts; Fluxly only indexes current sections, terms, files, and commands.

sections -> Steps → Notes
terms    -> Check if already installed · Check if already configured · Detect framework · Add the component · Confirm component setup · Recommend MCP server setup · Claude Code only (interactive wizard)
files/cmd -> agentation · npm install agentation · <Agentation · import { Agentation } · app/layout.tsx · app/layout.js · pages/app.tsx · pages/app.js
body sha256 -> 8f232ddbe1e3