yubisashi-rails

A visual UI annotation tool for Rails views. Click elements on the page to record feedback, then copy structured Markdown / JSON output for AI coding agents.

Leverages annotate_rendered_view_with_filenames HTML comments to automatically identify template files.

Note: This is a development tool that exposes template file paths. Do not load it in production environments.

Usage

In config/environments/development.rb:

``ruby
config.action_view.annotate_rendered_view_with_filenames = true
`

In app/views/layouts/application.html.erb:

`erb







<%= yield %>

<% if Rails.env.development? %>


<% end %>


`

Features

- Click any element to identify its template file and copy the path to clipboard
- Add comments via popover to describe what should be changed
- Capture selected text context
- Number badges to visualize annotated elements
- Side panel to list, edit, and delete annotations
- Copy all annotations as Markdown or JSON
- Dark mode support

Attributes

| Attribute | Default | Description |
|-----------|---------|-------------|
| root | / | Rails.root path |
| combo-key | command-shift-a | Keyboard shortcut to toggle |
| position | bottom-right | Toolbar position (bottom-right / bottom-left) |
| format | markdown | Output format (markdown / json) |
| theme | auto | Theme (auto / light / dark) |

combo-key accepts any combination of modifiers control, shift, alt, meta, command followed by a key, separated by - (e.g. control-shift-i, meta-shift-a).

Output Example

$3

`markdown


UI Annotations

> Page: http://localhost:3000/users
> Timestamp: 2025-01-01T00:00:00.000Z

#1 Change heading color to blue

- File: app/views/users/index.html.erb
- Selector: h1
- Text: "Users"
- Bounding box: x=20, y=80, w=760, h=32
`

$3

`json
{
"page": "http://localhost:3000/users",
"timestamp": "2025-01-01T00:00:00.000Z",
"annotations": [
{
"id": 1,
"comment": "Change heading color to blue",
"element": {
"tagName": "h1",
"selector": "h1",
"classes": [],
"text": "Users",
"boundingBox": { "x": 20, "y": 80, "width": 760, "height": 32 },
"dataAttributes": {}
},
"source": {
"file": "app/views/users/index.html.erb"
}
}
]
}
`

Development

`bash
pnpm install
pnpm dev # dev server
pnpm test # run tests
pnpm build # build for production
``

License

MIT