Menu
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/theyoungastronauts/polaris --skill visual-feedbackLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Pull just the do-this-yourself steps out of a long answer, so the user doesn't have to read the whole thing.
Hand in-flight work to a fresh session instead of compacting, or pick up from a relay doc.
Close out a session — record what was learned, update any connected stores, and report what's left dirty.
Basé sur la classification professionnelle SOC
Affichage de SKILL.md
| name | visual-feedback |
| description | Browser-annotated UI-fix workflow via the Agentation MCP. |
| disable-model-invocation | true |
Use browser annotations to drive frontend fixes. Humans mark up the live page, Claude picks up annotations via MCP and resolves them — no copy-paste, no describing UI bugs in words.
npm install agentation -D
React / Next.js — in your root layout (e.g., src/app/layout.tsx):
import { Agentation } from "agentation";
// Inside <body>, after your content:
{process.env.NODE_ENV === "development" && <Agentation />}
Astro — create a React island wrapper:
// src/components/dev/AgentationOverlay.tsx
import { Agentation } from "agentation";
export default function AgentationOverlay() {
return <Agentation />;
}
Then include in your base layout (e.g., src/layouts/BaseLayout.astro):
---
import AgentationOverlay from '@/components/dev/AgentationOverlay.tsx';
---
<!-- Inside <body>, after <Footer /> -->
{import.meta.env.DEV && <AgentationOverlay client:only="react" />}
Astro requires @astrojs/react, react, and react-dom as dependencies.
Option A — project .mcp.json (recommended, shared with team):
{
"mcpServers": {
"agentation": {
"command": "npx",
"args": ["agentation-mcp", "server"]
}
}
}
Option B — per-user CLI:
claude mcp add agentation -- npx agentation-mcp server
npx agentation-mcp doctor
The browser toolbar connects to an HTTP server (port 4747 default), which feeds annotations to Claude via MCP stdio.
| Tool | Purpose |
|---|---|
agentation_list_sessions | List active annotation sessions |
agentation_get_session | Get annotations for a session |
agentation_get_pending | Pending annotations for a session |
agentation_get_all_pending | All pending across sessions |
agentation_acknowledge | Mark annotation as seen |
agentation_resolve | Mark annotation as fixed |
agentation_dismiss | Dismiss an annotation |
agentation_reply | Reply to an annotation thread |
agentation_watch_annotations | Block until new annotations arrive |
Use agentation_watch_annotations in a loop to auto-process feedback as it arrives. Good for rapid iteration sessions where the human is continuously reviewing.
Each annotation includes:
fix, change, question, or approveblocking, important, or suggestionblocking annotations before suggestion