Reference
Prompt Format
Every field of the prompt Spotnote copies, and when it appears.
Example
## Request
Make the padding bigger
## Target
- file: components/ProductCard.jsx
- line: 7, column: 5
- used at: pages/Products.jsx:68 (<ProductCard> in Products)
- element: <div class="product">
- text: "shoes Aero Runner $120"
- instance: 1 of 12 rendered from this line (by DOM order) — target the one matching the text above
## Source path (outer → inner)
App > Products > ProductCard
## Current computed styles
padding: 16px
margin: 0px
color: rgb(26, 26, 26)
background: rgba(0, 0, 0, 0)
font-size: 16px
font-weight: 400
border-radius: 12pxA note on several elements repeats everything after the request for each one, numbered: ## Target 1 of 2, then its source path and styles, then ## Target 2 of 2, and so on.
Fields
Request
Under ## Request: your note, as written.
Target
Under ## Target, one line per item:
| Line | Content | When |
|---|---|---|
file | Path of the source file, relative to your repository's root (see stamps). | Always |
line, column | Position of the element's opening tag. Both count from 1, as in your editor. | Always |
commit | The commit the build was made from, and how to see the file at it. | In a staging build |
used at | The line that uses the element's component here (<Card> in pages/Products.jsx), when the element is written inside a component. A component used in several places changes everywhere when its own file does, and only here when this line does. | When the element's component is used from another component |
rendered inside | Instead of used at, when that line can't be found (the component is imported under another name): the nearest element of the component around it. Close to the line, not on it. | When used at can't be found |
element | Tag name, plus id and class when the element has them. | Always |
text | The element's visible text, as the page shows it: a space between blocks, whitespace collapsed, cut at 60 characters. | When the element has text |
instance | Which of the elements rendered from this line you picked, counted in DOM order. With a text line, it asks the agent to target the one with that text. | When the line rendered more than one element |
note | Says the element you clicked has no stamp, and this target is its nearest stamped ancestor. | When you clicked an unstamped element |
Source path
Under ## Source path (outer → inner): the owning components of the element and its stamped ancestors, from the app root down, with consecutive repeats merged.
Left out when only one component owns the whole path.
Current computed styles
Under ## Current computed styles: the element's computed values for, in this order: padding, margin, color, background (the computed background-color), font-size, font-weight and border-radius.