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.

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.

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.