[{"data":1,"prerenderedAt":976},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-introduction":113,"-getting-started-introduction-surround":973},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Using the picker","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-mouse-pointer-click",{"title":26,"path":27,"stem":28,"icon":29},"Resolving picks","\u002Fgetting-started\u002Fresolve-the-picks","1.getting-started\u002F4.resolve-the-picks","i-lucide-bot",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Vite","\u002Fguides\u002Fvite","2.guides\u002F1.vite","i-simple-icons-vite",{"title":43,"path":44,"stem":45,"icon":46},"Nuxt","\u002Fguides\u002Fnuxt","2.guides\u002F2.nuxt","i-simple-icons-nuxtdotjs",{"title":48,"path":49,"stem":50,"icon":51},"SvelteKit","\u002Fguides\u002Fsveltekit","2.guides\u002F3.sveltekit","i-simple-icons-svelte",{"title":53,"path":54,"stem":55,"icon":56},"Astro","\u002Fguides\u002Fastro","2.guides\u002F4.astro","i-simple-icons-astro",{"title":58,"path":59,"stem":60,"icon":61},"Next.js","\u002Fguides\u002Fnext","2.guides\u002F5.next","i-simple-icons-nextdotjs",{"title":63,"path":64,"stem":65,"icon":66},"webpack","\u002Fguides\u002Fwebpack","2.guides\u002F6.webpack","i-simple-icons-webpack",{"title":68,"path":69,"stem":70,"icon":71},"Angular","\u002Fguides\u002Fangular","2.guides\u002F7.angular","i-simple-icons-angular",{"title":73,"path":74,"stem":75,"icon":76},"Plain HTML & more","\u002Fguides\u002Fvanilla","2.guides\u002F8.vanilla","i-lucide-file-code",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Reference","i-lucide-list","\u002Freference","3.reference",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Compatibility","\u002Freference\u002Fcompatibility","3.reference\u002F1.compatibility","i-lucide-table",{"title":89,"path":90,"stem":91,"icon":92},"Plugin options","\u002Freference\u002Fplugin-options","3.reference\u002F2.plugin-options","i-lucide-settings-2",{"title":94,"path":95,"stem":96,"icon":97},"CLI","\u002Freference\u002Fcli","3.reference\u002F3.cli","i-lucide-terminal",{"title":99,"path":100,"stem":101,"icon":102},"The pick object","\u002Freference\u002Fpick-object","3.reference\u002F4.pick-object","i-lucide-braces",{"title":104,"path":105,"stem":106,"icon":107},"FAQ & troubleshooting","\u002Freference\u002Ffaq","3.reference\u002F5.faq","i-lucide-help-circle",{"title":109,"path":110,"stem":111,"icon":112},"Sponsor","\u002Fsponsor","4.sponsor","i-lucide-heart",{"id":114,"title":11,"body":115,"description":966,"extension":967,"links":968,"meta":969,"navigation":970,"path":12,"seo":971,"stem":13,"__hash__":972},"docs\u002F1.getting-started\u002F1.introduction.md",{"type":116,"value":117,"toc":957},"minimark",[118,123,132,136,153,156,162,165,169,176,179,184,191,203,207,878,889,893,911,927,931,938,945,948,954],[119,120,122],"h2",{"id":121},"the-problem","The problem",[124,125,126,127,131],"p",{},"You are looking at your app and something is wrong with one particular element. To get an agent to\nfix it you have to ",[128,129,130],"em",{},"describe"," it: which component, which file, which of the three cards, the one\ninside the header not the footer. That description is slower to write than the fix, and easy to get\nwrong.",[119,133,135],{"id":134},"what-quello-does","What quello does",[124,137,138,139,143,144,148,149,152],{},"quello puts a picker in your running app. You toggle it with ",[140,141,142],"code",{},"Alt+Q",", click an element, and it\nbecomes ",[145,146,147],"strong",{},"PICK 1"," — a numbered badge pinned to that element on screen, and an entry in\n",[140,150,151],{},".quello\u002Fpicks.json"," on disk.",[124,154,155],{},"Then you talk in pick numbers:",[157,158,159],"blockquote",{},[124,160,161],{},"make PICK 2 sticky, and give PICK 3 the same padding",[124,163,164],{},"The agent reads the file and knows which elements those are: the selector, the component name, the\nsource file, the computed style, your note. No description needed.",[119,166,168],{"id":167},"notes-and-resolve-the-picks","Notes, and \"resolve the picks\"",[124,170,171,172,175],{},"Pick numbers are one way to talk. The other is to write the instruction onto the pick itself: click a\nbadge and the note editor opens against it. ",[128,173,174],{},"\"make this full width on mobile\"",". The badge then marks\nitself, so you can see at a glance which picks carry an instruction and which are only bookmarks.",[124,177,178],{},"Annotate every element you want changed, then say it once:",[157,180,181],{},[124,182,183],{},"resolve the picks",[124,185,186,187,190],{},"The agent works through every pick that has a note, in ",[140,188,189],{},"id"," order: it locates the element's source\nfrom the pick, carries out that note against it, and moves on. Picks without a note are left alone\nunless you ask for them.",[124,192,193,194,197,198,202],{},"That is the loop worth knowing — a batch of small changes picked, annotated and handed over in one\nsentence, rather than described one at a time. See ",[195,196,26],"a",{"href":27},"\nfor what the agent is told, and ",[195,199,201],{"href":200},"\u002Fgetting-started\u002Fusage#notes","Notes"," for the editor itself.",[119,204,206],{"id":205},"what-a-pick-contains","What a pick contains",[208,209,214],"pre",{"className":210,"code":211,"language":212,"meta":213,"style":213},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"id\": 2,\n  \"label\": \"PICK 2\",\n  \"note\": \"make this full width on mobile\",\n  \"selector\": \"article.card:nth-of-type(2) > p\",\n  \"domPath\": \"html > body > div#app > main.page > section.card-list > article.card[2] > p\",\n  \"tag\": \"p\",\n  \"classes\": [],\n  \"attributes\": {},\n  \"text\": \"Vue component name and source file.\",\n  \"html\": \"\u003Cp>Vue component name and source file.\u003C\u002Fp>\",\n  \"rect\": { \"x\": 861, \"y\": 222, \"width\": 198, \"height\": 32, \"...\": \"...\" },\n  \"style\": {\n    \"display\": \"block\",\n    \"font\": \"13px\u002Fnormal\",\n    \"fontWeight\": \"400\",\n    \"color\": \"rgb(238, 238, 238)\",\n    \"background\": \"rgba(0, 0, 0, 0)\",\n    \"padding\": \"0px\",\n    \"margin\": \"0px\",\n    \"gap\": \"normal\",\n    \"borderRadius\": \"0px\"\n  },\n  \"framework\": {\n    \"framework\": \"vue\",\n    \"component\": \"CardItem\",\n    \"file\": \"\u002Fabs\u002Fpath\u002Fsrc\u002Fcomponents\u002FCardItem.vue\"\n  },\n  \"page\": { \"url\": \"http:\u002F\u002Flocalhost:5173\u002F\", \"title\": \"My app\" },\n  \"pickedAt\": \"2026-08-30T15:15:53.096Z\"\n}\n","json","",[140,215,216,225,247,270,291,312,333,353,368,383,404,425,516,531,553,574,595,616,637,658,678,699,718,724,738,758,779,798,803,853,872],{"__ignoreMap":213},[217,218,221],"span",{"class":219,"line":220},"line",1,[217,222,224],{"class":223},"sMK4o","{\n",[217,226,228,231,234,237,240,244],{"class":219,"line":227},2,[217,229,230],{"class":223},"  \"",[217,232,189],{"class":233},"spNyl",[217,235,236],{"class":223},"\"",[217,238,239],{"class":223},":",[217,241,243],{"class":242},"sbssI"," 2",[217,245,246],{"class":223},",\n",[217,248,250,252,255,257,259,262,266,268],{"class":219,"line":249},3,[217,251,230],{"class":223},[217,253,254],{"class":233},"label",[217,256,236],{"class":223},[217,258,239],{"class":223},[217,260,261],{"class":223}," \"",[217,263,265],{"class":264},"sfazB","PICK 2",[217,267,236],{"class":223},[217,269,246],{"class":223},[217,271,273,275,278,280,282,284,287,289],{"class":219,"line":272},4,[217,274,230],{"class":223},[217,276,277],{"class":233},"note",[217,279,236],{"class":223},[217,281,239],{"class":223},[217,283,261],{"class":223},[217,285,286],{"class":264},"make this full width on mobile",[217,288,236],{"class":223},[217,290,246],{"class":223},[217,292,294,296,299,301,303,305,308,310],{"class":219,"line":293},5,[217,295,230],{"class":223},[217,297,298],{"class":233},"selector",[217,300,236],{"class":223},[217,302,239],{"class":223},[217,304,261],{"class":223},[217,306,307],{"class":264},"article.card:nth-of-type(2) > p",[217,309,236],{"class":223},[217,311,246],{"class":223},[217,313,315,317,320,322,324,326,329,331],{"class":219,"line":314},6,[217,316,230],{"class":223},[217,318,319],{"class":233},"domPath",[217,321,236],{"class":223},[217,323,239],{"class":223},[217,325,261],{"class":223},[217,327,328],{"class":264},"html > body > div#app > main.page > section.card-list > article.card[2] > p",[217,330,236],{"class":223},[217,332,246],{"class":223},[217,334,336,338,341,343,345,347,349,351],{"class":219,"line":335},7,[217,337,230],{"class":223},[217,339,340],{"class":233},"tag",[217,342,236],{"class":223},[217,344,239],{"class":223},[217,346,261],{"class":223},[217,348,124],{"class":264},[217,350,236],{"class":223},[217,352,246],{"class":223},[217,354,356,358,361,363,365],{"class":219,"line":355},8,[217,357,230],{"class":223},[217,359,360],{"class":233},"classes",[217,362,236],{"class":223},[217,364,239],{"class":223},[217,366,367],{"class":223}," [],\n",[217,369,371,373,376,378,380],{"class":219,"line":370},9,[217,372,230],{"class":223},[217,374,375],{"class":233},"attributes",[217,377,236],{"class":223},[217,379,239],{"class":223},[217,381,382],{"class":223}," {},\n",[217,384,386,388,391,393,395,397,400,402],{"class":219,"line":385},10,[217,387,230],{"class":223},[217,389,390],{"class":233},"text",[217,392,236],{"class":223},[217,394,239],{"class":223},[217,396,261],{"class":223},[217,398,399],{"class":264},"Vue component name and source file.",[217,401,236],{"class":223},[217,403,246],{"class":223},[217,405,407,409,412,414,416,418,421,423],{"class":219,"line":406},11,[217,408,230],{"class":223},[217,410,411],{"class":233},"html",[217,413,236],{"class":223},[217,415,239],{"class":223},[217,417,261],{"class":223},[217,419,420],{"class":264},"\u003Cp>Vue component name and source file.\u003C\u002Fp>",[217,422,236],{"class":223},[217,424,246],{"class":223},[217,426,428,430,433,435,437,440,442,446,448,450,453,456,458,461,463,465,468,470,472,475,477,479,482,484,486,489,491,493,496,498,500,503,505,507,509,511,513],{"class":219,"line":427},12,[217,429,230],{"class":223},[217,431,432],{"class":233},"rect",[217,434,236],{"class":223},[217,436,239],{"class":223},[217,438,439],{"class":223}," {",[217,441,261],{"class":223},[217,443,445],{"class":444},"sBMFI","x",[217,447,236],{"class":223},[217,449,239],{"class":223},[217,451,452],{"class":242}," 861",[217,454,455],{"class":223},",",[217,457,261],{"class":223},[217,459,460],{"class":444},"y",[217,462,236],{"class":223},[217,464,239],{"class":223},[217,466,467],{"class":242}," 222",[217,469,455],{"class":223},[217,471,261],{"class":223},[217,473,474],{"class":444},"width",[217,476,236],{"class":223},[217,478,239],{"class":223},[217,480,481],{"class":242}," 198",[217,483,455],{"class":223},[217,485,261],{"class":223},[217,487,488],{"class":444},"height",[217,490,236],{"class":223},[217,492,239],{"class":223},[217,494,495],{"class":242}," 32",[217,497,455],{"class":223},[217,499,261],{"class":223},[217,501,502],{"class":444},"...",[217,504,236],{"class":223},[217,506,239],{"class":223},[217,508,261],{"class":223},[217,510,502],{"class":264},[217,512,236],{"class":223},[217,514,515],{"class":223}," },\n",[217,517,519,521,524,526,528],{"class":219,"line":518},13,[217,520,230],{"class":223},[217,522,523],{"class":233},"style",[217,525,236],{"class":223},[217,527,239],{"class":223},[217,529,530],{"class":223}," {\n",[217,532,534,537,540,542,544,546,549,551],{"class":219,"line":533},14,[217,535,536],{"class":223},"    \"",[217,538,539],{"class":444},"display",[217,541,236],{"class":223},[217,543,239],{"class":223},[217,545,261],{"class":223},[217,547,548],{"class":264},"block",[217,550,236],{"class":223},[217,552,246],{"class":223},[217,554,556,558,561,563,565,567,570,572],{"class":219,"line":555},15,[217,557,536],{"class":223},[217,559,560],{"class":444},"font",[217,562,236],{"class":223},[217,564,239],{"class":223},[217,566,261],{"class":223},[217,568,569],{"class":264},"13px\u002Fnormal",[217,571,236],{"class":223},[217,573,246],{"class":223},[217,575,577,579,582,584,586,588,591,593],{"class":219,"line":576},16,[217,578,536],{"class":223},[217,580,581],{"class":444},"fontWeight",[217,583,236],{"class":223},[217,585,239],{"class":223},[217,587,261],{"class":223},[217,589,590],{"class":264},"400",[217,592,236],{"class":223},[217,594,246],{"class":223},[217,596,598,600,603,605,607,609,612,614],{"class":219,"line":597},17,[217,599,536],{"class":223},[217,601,602],{"class":444},"color",[217,604,236],{"class":223},[217,606,239],{"class":223},[217,608,261],{"class":223},[217,610,611],{"class":264},"rgb(238, 238, 238)",[217,613,236],{"class":223},[217,615,246],{"class":223},[217,617,619,621,624,626,628,630,633,635],{"class":219,"line":618},18,[217,620,536],{"class":223},[217,622,623],{"class":444},"background",[217,625,236],{"class":223},[217,627,239],{"class":223},[217,629,261],{"class":223},[217,631,632],{"class":264},"rgba(0, 0, 0, 0)",[217,634,236],{"class":223},[217,636,246],{"class":223},[217,638,640,642,645,647,649,651,654,656],{"class":219,"line":639},19,[217,641,536],{"class":223},[217,643,644],{"class":444},"padding",[217,646,236],{"class":223},[217,648,239],{"class":223},[217,650,261],{"class":223},[217,652,653],{"class":264},"0px",[217,655,236],{"class":223},[217,657,246],{"class":223},[217,659,661,663,666,668,670,672,674,676],{"class":219,"line":660},20,[217,662,536],{"class":223},[217,664,665],{"class":444},"margin",[217,667,236],{"class":223},[217,669,239],{"class":223},[217,671,261],{"class":223},[217,673,653],{"class":264},[217,675,236],{"class":223},[217,677,246],{"class":223},[217,679,681,683,686,688,690,692,695,697],{"class":219,"line":680},21,[217,682,536],{"class":223},[217,684,685],{"class":444},"gap",[217,687,236],{"class":223},[217,689,239],{"class":223},[217,691,261],{"class":223},[217,693,694],{"class":264},"normal",[217,696,236],{"class":223},[217,698,246],{"class":223},[217,700,702,704,707,709,711,713,715],{"class":219,"line":701},22,[217,703,536],{"class":223},[217,705,706],{"class":444},"borderRadius",[217,708,236],{"class":223},[217,710,239],{"class":223},[217,712,261],{"class":223},[217,714,653],{"class":264},[217,716,717],{"class":223},"\"\n",[217,719,721],{"class":219,"line":720},23,[217,722,723],{"class":223},"  },\n",[217,725,727,729,732,734,736],{"class":219,"line":726},24,[217,728,230],{"class":223},[217,730,731],{"class":233},"framework",[217,733,236],{"class":223},[217,735,239],{"class":223},[217,737,530],{"class":223},[217,739,741,743,745,747,749,751,754,756],{"class":219,"line":740},25,[217,742,536],{"class":223},[217,744,731],{"class":444},[217,746,236],{"class":223},[217,748,239],{"class":223},[217,750,261],{"class":223},[217,752,753],{"class":264},"vue",[217,755,236],{"class":223},[217,757,246],{"class":223},[217,759,761,763,766,768,770,772,775,777],{"class":219,"line":760},26,[217,762,536],{"class":223},[217,764,765],{"class":444},"component",[217,767,236],{"class":223},[217,769,239],{"class":223},[217,771,261],{"class":223},[217,773,774],{"class":264},"CardItem",[217,776,236],{"class":223},[217,778,246],{"class":223},[217,780,782,784,787,789,791,793,796],{"class":219,"line":781},27,[217,783,536],{"class":223},[217,785,786],{"class":444},"file",[217,788,236],{"class":223},[217,790,239],{"class":223},[217,792,261],{"class":223},[217,794,795],{"class":264},"\u002Fabs\u002Fpath\u002Fsrc\u002Fcomponents\u002FCardItem.vue",[217,797,717],{"class":223},[217,799,801],{"class":219,"line":800},28,[217,802,723],{"class":223},[217,804,806,808,811,813,815,817,819,822,824,826,828,831,833,835,837,840,842,844,846,849,851],{"class":219,"line":805},29,[217,807,230],{"class":223},[217,809,810],{"class":233},"page",[217,812,236],{"class":223},[217,814,239],{"class":223},[217,816,439],{"class":223},[217,818,261],{"class":223},[217,820,821],{"class":444},"url",[217,823,236],{"class":223},[217,825,239],{"class":223},[217,827,261],{"class":223},[217,829,830],{"class":264},"http:\u002F\u002Flocalhost:5173\u002F",[217,832,236],{"class":223},[217,834,455],{"class":223},[217,836,261],{"class":223},[217,838,839],{"class":444},"title",[217,841,236],{"class":223},[217,843,239],{"class":223},[217,845,261],{"class":223},[217,847,848],{"class":264},"My app",[217,850,236],{"class":223},[217,852,515],{"class":223},[217,854,856,858,861,863,865,867,870],{"class":219,"line":855},30,[217,857,230],{"class":223},[217,859,860],{"class":233},"pickedAt",[217,862,236],{"class":223},[217,864,239],{"class":223},[217,866,261],{"class":223},[217,868,869],{"class":264},"2026-08-30T15:15:53.096Z",[217,871,717],{"class":223},[217,873,875],{"class":219,"line":874},31,[217,876,877],{"class":223},"}\n",[124,879,880,881,884,885,888],{},"Every field is there to answer one question: ",[128,882,883],{},"which element is this, and where does it come from?","\nSee ",[195,886,887],{"href":100},"the pick object"," for the full reference.",[119,890,892],{"id":891},"how-the-agent-finds-out","How the agent finds out",[124,894,895,896,899,900,903,904,907,908,910],{},"On first run quello writes a short section into an ",[145,897,898],{},"agent instructions file"," — ",[140,901,902],{},"AGENTS.md"," by\ndefault — telling the agent to resolve ",[140,905,906],{},"PICK \u003Cn>"," against ",[140,909,151],{},". The section is\nfenced in markers and never rewritten, so your own edits to that file survive.",[124,912,913,915,916,919,920,926],{},[140,914,902],{}," is the open convention Codex, Cursor, Zed and Aider read, and Claude Code reads it\nalongside its own ",[140,917,918],{},"CLAUDE.md",". One file therefore reaches every agent. You can point it anywhere:\nsee ",[195,921,923],{"href":922},"\u002Freference\u002Fplugin-options#agentfile",[140,924,925],{},"agentFile",".",[119,928,930],{"id":929},"what-it-is-not","What it is not",[124,932,933,934,937],{},"quello is a ",[145,935,936],{},"development tool",". The plugins apply only to the dev server and refuse to run in a\nproduction build; the CLI is something you start by hand. Nothing ships to your users.",[277,939,940,941,944],{},"quello is at ",[140,942,943],{},"0.1.x",". It works, and the eleven playgrounds in the repository prove each integration,\nbut the API may still move.",[119,946,109],{"id":947},"sponsor",[124,949,950,951,953],{},"quello is free and MIT-licensed, and maintained by one person. If you would like to help,\n",[195,952,109],{"href":110}," lists the ways — including the ones that are not money.",[523,955,956],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":213,"searchDepth":227,"depth":227,"links":958},[959,960,961,962,963,964,965],{"id":121,"depth":227,"text":122},{"id":134,"depth":227,"text":135},{"id":167,"depth":227,"text":168},{"id":205,"depth":227,"text":206},{"id":891,"depth":227,"text":892},{"id":929,"depth":227,"text":930},{"id":947,"depth":227,"text":109},"What quello is, what a pick contains, and how it reaches your agent.","md",null,{},{"icon":14},{"title":11,"description":966},"RSNTXTxkEC-xYALMVuC2Xl4KOvqaQdp9SX9_0GPEdb4",[968,974],{"title":16,"path":17,"stem":18,"description":975,"icon":19,"children":-1},"Pick the route that matches your setup — a Vite plugin, a webpack plugin, or the CLI.",1788454295357]