Skip to main content

FOR DESIGNERS & DEVELOPERS

Annotate a UI — /kit-annotate

Describing which button, which bit of spacing, which shade of blue is tedious. /kit-annotate lets you point instead. Click an element in your running React app, leave a note right on it, and Claude picks up a structured record and fixes the code.

It's opt-in and dev-only — it lives in your development app, never in production.

What it feels like​

You're running your app locally. You switch on the annotation toolbar, and now every element is clickable. You click a heading and type:

"Too tight against the image — add some breathing room."

Claude receives more than your words. It gets a structured record: which component you clicked, where it sits in the component tree, the source file it came from, and your comment. From that it finds the code and makes the change — no hunting, no "which file is that in?"

The modes​

/kit-annotate has a few modes:

  • setup — wires the annotation toolbar into your React app (one-time).
  • watch — hands-free: Claude picks up notes as you add them, in real time.
  • review — works through the notes you've left.
  • status — shows what's wired and what's pending.
/kit-annotate setup     # first time
/kit-annotate watch     # then just point and comment

Honest limits​

So you know what to expect:

  • Dev-only. It runs in your development app, never in production.
  • No live values. It captures the component and its source, not the live prop or state values at that moment.
  • React Server Components degrade gracefully. For an RSC, it falls back to a plain selector rather than a full component record.

Within those limits, it turns "review by writing paragraphs" into "review by pointing."

How it works under the hood
  • The capture engine. /kit-annotate adopts the source-available agentation package as the capture engine — installed as your project's own dev dependency (not vendored). scripts/annotate-setup.sh installs it, registers the agentation-mcp MCP server for Claude, writes the react-annotate rule, and records .annotate in kit.config.json. --dry-run previews.
  • Framework detection. scripts/lib/react-detect.sh detects your framework in specificity order — Next.js → React Router v7 (framework mode) → Vite → generic React — because a flat "is Vite present?" check is unreliable (Next/RR apps often carry Vite for tests). This coverage actually exceeds Agentation's own Next-only setup.
  • The loop. The react-annotate rule teaches the team the annotate → locate → fix → resolve loop, including the hands-free agentation_watch_annotations path, the honest limits above, and an optional MemPalace on-close summary.
  • Provider snippet. Setup prints the dev-only provider snippet for your app entry rather than editing source blindly; /kit-annotate applies that edit with your confirmation. If no React app is detected, it exits cleanly.

Where to go next​