Introduction

The problem

You are looking at your app and something is wrong with one particular element. To get an agent to fix it you have to describe it: which component, which file, which of the three cards, the one inside the header not the footer. That description is slower to write than the fix, and easy to get wrong.

What quello does

quello puts a picker in your running app. You toggle it with Alt+Q, click an element, and it becomes PICK 1 — a numbered badge pinned to that element on screen, and an entry in .quello/picks.json on disk.

Then you talk in pick numbers:

make PICK 2 sticky, and give PICK 3 the same padding

The agent reads the file and knows which elements those are: the selector, the component name, the source file, the computed style, your note. No description needed.

Notes, and "resolve the picks"

Pick numbers are one way to talk. The other is to write the instruction onto the pick itself: click a badge and the note editor opens against it. "make this full width on mobile". The badge then marks itself, so you can see at a glance which picks carry an instruction and which are only bookmarks.

Annotate every element you want changed, then say it once:

resolve the picks

The agent works through every pick that has a note, in id order: it locates the element's source from the pick, carries out that note against it, and moves on. Picks without a note are left alone unless you ask for them.

That is the loop worth knowing — a batch of small changes picked, annotated and handed over in one sentence, rather than described one at a time. See Resolving picks for what the agent is told, and Notes for the editor itself.

What a pick contains

{
  "id": 2,
  "label": "PICK 2",
  "note": "make this full width on mobile",
  "selector": "article.card:nth-of-type(2) > p",
  "domPath": "html > body > div#app > main.page > section.card-list > article.card[2] > p",
  "tag": "p",
  "classes": [],
  "attributes": {},
  "text": "Vue component name and source file.",
  "html": "<p>Vue component name and source file.</p>",
  "rect": { "x": 861, "y": 222, "width": 198, "height": 32, "...": "..." },
  "style": {
    "display": "block",
    "font": "13px/normal",
    "fontWeight": "400",
    "color": "rgb(238, 238, 238)",
    "background": "rgba(0, 0, 0, 0)",
    "padding": "0px",
    "margin": "0px",
    "gap": "normal",
    "borderRadius": "0px"
  },
  "framework": {
    "framework": "vue",
    "component": "CardItem",
    "file": "/abs/path/src/components/CardItem.vue"
  },
  "page": { "url": "http://localhost:5173/", "title": "My app" },
  "pickedAt": "2026-08-30T15:15:53.096Z"
}

Every field is there to answer one question: which element is this, and where does it come from? See the pick object for the full reference.

How the agent finds out

On first run quello writes a short section into an agent instructions file — AGENTS.md by default — telling the agent to resolve PICK <n> against .quello/picks.json. The section is fenced in markers and never rewritten, so your own edits to that file survive.

AGENTS.md is the open convention Codex, Cursor, Zed and Aider read, and Claude Code reads it alongside its own CLAUDE.md. One file therefore reaches every agent. You can point it anywhere: see agentFile.

For an editor that reads no instructions file, there is a second route: @quello/mcp serves the picks over the Model Context Protocol, as three read-only tools — list_picks, get_pick, resolve_picks. The agent is then told the picks exist when it connects, instead of having to be pointed at a file.

claude mcp add quello -- npx -y @quello/mcp

Both routes can be live at once and neither needs the other. .quello/picks.json is the source of truth either way.

What it is not

quello is a development tool. The plugins apply only to the dev server and refuse to run in a production build; the CLI is something you start by hand. Nothing ships to your users.

It is not an inspector either. Svelte Inspector, Vue DevTools and Nuxt DevTools open your editor at the element you clicked and keep nothing; quello writes the pick down so your agent can read it. The FAQ has the full comparison.

Sponsor

quello is free and MIT-licensed, and maintained by one person. If you would like to help, Sponsor lists the ways — including the ones that are not money.