Show your AI
what to fix!

annotaKit is a Svelte component that lets you annotate UI elements and export structured markdown. Click elements, add comments, and copy the output straight into Claude, Cursor, or any AI agent.

How it works

1. Activate: click the icon in the corner to open the toolbar
2. Annotate: click any element to add an annotation
3. Comment: add notes describing the change you need
4. Export: copy structured markdown to your clipboard
5. Paste: paste into an AI agent of your choice

Try it out on this page! Look for the annotaKit icon in the bottom-right corner.

What the output looks like

annotaKit generates structured markdown with CSS selectors, Svelte component info, accessibility attributes, and computed styles, basically everything an AI agent needs to locate and understand an element in your codebase.

Compact format

1. `nav > button.menu` (HeaderNav) -Fix hover state

Standard format

### 1. BUTTON

- **Selector:** `nav > button.menu`
- **Component:** HeaderNav (`src/lib/HeaderNav.svelte`)
- **Comment:** Fix hover state
- **Accessibility:** role="button", aria-label="Menu"

Detailed format

Includes everything from Standard plus element dimensions, computed styles, and the full Svelte component chain.

License

annotaKit is free and open source under the MIT License. Feel free to contribute to annotaKit on GitHub.

Inspired by /agentation, annotaKit is a clean room implementation built for Svelte.

Next steps

Ready to get started? Head to Installation to add annotaKit to your project, or check out Features for a full breakdown of what's available.