> ## Documentation Index
> Fetch the complete documentation index at: https://meganharrisonconsulting.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# agentation-watch
> Hands-free annotation processor. Watches for Agentation annotations via MCP, reads the referenced code, fixes issues, and resolves annotations automatically. Use when the user says "watch for annotations," "fix annotations," "hands-free mode," "fixer loop," or wants an agent to autonomously process design feedback from the Agentation toolbar.
This page is generated from the actual `SKILL.md` file on disk.
## Metadata
| Field | Value |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Source group | User Skills |
| Source root | `/Users/meganharrison/.agents/skills` |
| Relative skill path | `agentation-watch/SKILL.md` |
| Actual file | `/Users/meganharrison/.agents/skills/agentation-watch/SKILL.md` |
| Description | Hands-free annotation processor. Watches for Agentation annotations via MCP, reads the referenced code, fixes issues, and resolves annotations automatically. Use when the user says "watch for annotations," "fix annotations," "hands-free mode," "fixer loop," or wants an agent to autonomously process design feedback from the Agentation toolbar. |
| Docs overview | [User Skills](/skills/user-skills) |
## Why this exists
Use this page when you want to review the real instructions behind a skill
without leaving the docs site. The content below is copied from the actual
`SKILL.md` file, not rewritten by hand.
## Raw SKILL.md
````md theme={null}
---
name: agentation-watch
description: Hands-free annotation processor. Watches for Agentation annotations via MCP, reads the referenced code, fixes issues, and resolves annotations automatically. Use when the user says "watch for annotations," "fix annotations," "hands-free mode," "fixer loop," or wants an agent to autonomously process design feedback from the Agentation toolbar.
---
# Agentation Watch (Hands-Free Fixer)
Process Agentation annotations in real-time: watch for new annotations, read the referenced code, fix the issue, and resolve the annotation with a summary.
## Preflight
Before entering the loop, verify the MCP server is connected and has active sessions:
1. Call `agentation_list_sessions` — if empty, the toolbar isn't connected. Tell the user to open a page with `` in their browser.
2. Call `agentation_get_all_pending` — process any existing annotations before entering the watch loop.
## The Watch Loop
```
while true:
1. Call agentation_watch_annotations (blocks until annotations arrive)
- Default timeout: 120s, batch window: 10s
- Pass sessionId to watch a specific page, or omit to watch all pages
2. For each annotation in the batch:
a. Call agentation_acknowledge(annotationId) — marks it as "seen"
b. Parse the annotation context:
- comment: What the user wants changed
- intent: "fix" | "change" | "question" | "approve"
- severity: "blocking" | "important" | "suggestion"
- elementPath: CSS selector to find the element
- reactComponents: Component tree path (e.g., "App > Dashboard > Button")
- kind: "feedback" | "placement" | "rearrange" (v3.0+)
- element: HTML tag name
- cssClasses: Classes on the element
- url: Page URL (maps to a route)
c. Locate the code:
- Use reactComponents to find the source file (grep for component name)
- Use the URL path to find the page file (map route to app/ directory)
- Use cssClasses to find Tailwind classes in the component
- Use elementPath as a fallback for identifying the DOM structure
d. Apply the fix:
- For intent "fix": Fix the bug described in the comment
- For intent "change": Implement the requested change
- For intent "question": Call agentation_reply with the answer (don't resolve)
- For intent "approve": Call agentation_resolve with "Acknowledged"
- For kind "placement": See agentation-layout skill
- For kind "rearrange": See agentation-layout skill
e. Call agentation_resolve(annotationId, summary)
- Summary should be 1-2 sentences: what file was changed and what was done
- Example: "Updated Button component in src/components/ui/Button.tsx — changed bg-blue-500 to bg-primary for design system compliance"
3. Loop back to step 1
```
## Resolving vs Dismissing
- **Resolve** (`agentation_resolve`): You fixed or addressed the annotation. Include a summary.
- **Dismiss** (`agentation_dismiss`): The annotation doesn't apply or can't be fixed. Include a reason.
- **Reply** (`agentation_reply`): For questions — add a message to the thread without closing.
Only resolve annotations you actually fixed. If you can't find the code or the fix is ambiguous, reply asking for clarification instead of guessing.
## Code Location Strategy
Annotations contain multiple signals. Use them in this priority order:
1. **reactComponents** — Most reliable. Grep for the component name:
```
grep -r "function ComponentName\|const ComponentName" frontend/src/
```
2. **URL path** — Maps directly to app router file:
- `/67/budget` → `frontend/src/app/(main)/[projectId]/budget/`
- `/settings` → `frontend/src/app/(main)/settings/` or `frontend/src/app/(admin)/settings/`
3. **cssClasses** — Search for the exact class combination:
```
grep -r "className.*specific-class" frontend/src/
```
4. **elementPath** — CSS selector chain gives structural hints:
- `main > div > form > button.submit-btn` suggests a form component
## Design System Awareness
When fixing UI annotations in this project, follow the design system:
- Never hardcode colors — use semantic tokens (`bg-primary`, `text-foreground`, etc.)
- Never use `