[{"data":1,"prerenderedAt":552},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-resolve-the-picks":113,"-getting-started-resolve-the-picks-surround":547},[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":26,"body":115,"description":541,"extension":197,"links":542,"meta":543,"navigation":544,"path":27,"seo":545,"stem":28,"__hash__":546},"docs\u002F1.getting-started\u002F4.resolve-the-picks.md",{"type":116,"value":117,"toc":534},"minimark",[118,122,127,170,181,184,188,191,473,476,480,483,508,512,523,527,530],[119,120,121],"p",{},"Picking is half of it. The other half is what your agent does with the picks.",[123,124,126],"h2",{"id":125},"the-loop","The loop",[128,129,130,143,161],"ol",{},[131,132,133,137,138,142],"li",{},[134,135,136],"strong",{},"Pick"," the elements you want changed. ",[139,140,141],"code",{},"Alt+Q",", then click each one.",[131,144,145,148,149,153,154,153,157,160],{},[134,146,147],{},"Annotate"," them: click a badge and write what should happen. ",[150,151,152],"em",{},"\"make this full width on\nmobile\"",", ",[150,155,156],{},"\"this heading is too tight\"",[150,158,159],{},"\"same padding as the card above\"",".",[131,162,163,166,167,160],{},[134,164,165],{},"Say it once",": ",[139,168,169],{},"resolve the picks",[119,171,172,173,176,177,180],{},"The agent reads ",[139,174,175],{},".quello\u002Fpicks.json",", works through every entry that has a note in ",[139,178,179],{},"id"," order,\nlocates each element's source, and carries the note out against it.",[119,182,183],{},"Picks without a note are just bookmarks — the agent leaves them alone unless you say otherwise.",[123,185,187],{"id":186},"what-the-agent-is-told","What the agent is told",[119,189,190],{},"On first run quello writes a fenced section into your agent file. It explains the shape of a pick\nand what resolving means:",[192,193,199],"pre",{"className":194,"code":195,"filename":196,"language":197,"meta":198,"style":198},"language-md shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- quello:start -->\n## quello — visual element picks\n\nWhen the user references `PICK \u003Cn>` (or says \"quello\"), read `.quello\u002Fpicks.json` and resolve the\nentry whose `id` is `\u003Cn>` to locate the source element\u002Fcomponent. Each entry carries:\n\n- `note` — **an instruction written by the user for you**, when present\n- `selector` \u002F `domPath` — where the element sits in the DOM\n- ...\n\n### \"Resolve the picks\"\n\nWhen the user asks you to resolve the picks, read `.quello\u002Fpicks.json` and work through every entry\nthat has a `note`, in `id` order:\n\n1. Locate the element's source from `framework.file` \u002F `framework.line` …\n2. Carry out that entry's `note` as an instruction scoped to that element.\n3. Move on to the next one.\n\u003C!-- quello:end -->\n","AGENTS.md","md","",[139,200,201,210,221,228,256,281,286,316,341,349,354,363,368,383,407,412,440,458,467],{"__ignoreMap":198},[202,203,206],"span",{"class":204,"line":205},"line",1,[202,207,209],{"class":208},"sHwdD","\u003C!-- quello:start -->\n",[202,211,213,217],{"class":204,"line":212},2,[202,214,216],{"class":215},"sMK4o","## ",[202,218,220],{"class":219},"sBMFI","quello — visual element picks\n",[202,222,224],{"class":204,"line":223},3,[202,225,227],{"emptyLinePlaceholder":226},true,"\n",[202,229,231,235,238,242,244,247,249,251,253],{"class":204,"line":230},4,[202,232,234],{"class":233},"sTEyZ","When the user references ",[202,236,237],{"class":215},"`",[202,239,241],{"class":240},"sfazB","PICK \u003Cn>",[202,243,237],{"class":215},[202,245,246],{"class":233}," (or says \"quello\"), read ",[202,248,237],{"class":215},[202,250,175],{"class":240},[202,252,237],{"class":215},[202,254,255],{"class":233}," and resolve the\n",[202,257,259,262,264,266,268,271,273,276,278],{"class":204,"line":258},5,[202,260,261],{"class":233},"entry whose ",[202,263,237],{"class":215},[202,265,179],{"class":240},[202,267,237],{"class":215},[202,269,270],{"class":233}," is ",[202,272,237],{"class":215},[202,274,275],{"class":240},"\u003Cn>",[202,277,237],{"class":215},[202,279,280],{"class":233}," to locate the source element\u002Fcomponent. Each entry carries:\n",[202,282,284],{"class":204,"line":283},6,[202,285,227],{"emptyLinePlaceholder":226},[202,287,289,292,295,298,300,303,307,311,313],{"class":204,"line":288},7,[202,290,291],{"class":215},"-",[202,293,294],{"class":215}," `",[202,296,297],{"class":240},"note",[202,299,237],{"class":215},[202,301,302],{"class":233}," — ",[202,304,306],{"class":305},"sHepR","**",[202,308,310],{"class":309},"so75L","an instruction written by the user for you",[202,312,306],{"class":305},[202,314,315],{"class":233},", when present\n",[202,317,319,321,323,326,328,331,333,336,338],{"class":204,"line":318},8,[202,320,291],{"class":215},[202,322,294],{"class":215},[202,324,325],{"class":240},"selector",[202,327,237],{"class":215},[202,329,330],{"class":233}," \u002F ",[202,332,237],{"class":215},[202,334,335],{"class":240},"domPath",[202,337,237],{"class":215},[202,339,340],{"class":233}," — where the element sits in the DOM\n",[202,342,344,346],{"class":204,"line":343},9,[202,345,291],{"class":215},[202,347,348],{"class":233}," ...\n",[202,350,352],{"class":204,"line":351},10,[202,353,227],{"emptyLinePlaceholder":226},[202,355,357,360],{"class":204,"line":356},11,[202,358,359],{"class":215},"### ",[202,361,362],{"class":219},"\"Resolve the picks\"\n",[202,364,366],{"class":204,"line":365},12,[202,367,227],{"emptyLinePlaceholder":226},[202,369,371,374,376,378,380],{"class":204,"line":370},13,[202,372,373],{"class":233},"When the user asks you to resolve the picks, read ",[202,375,237],{"class":215},[202,377,175],{"class":240},[202,379,237],{"class":215},[202,381,382],{"class":233}," and work through every entry\n",[202,384,386,389,391,393,395,398,400,402,404],{"class":204,"line":385},14,[202,387,388],{"class":233},"that has a ",[202,390,237],{"class":215},[202,392,297],{"class":240},[202,394,237],{"class":215},[202,396,397],{"class":233},", in ",[202,399,237],{"class":215},[202,401,179],{"class":240},[202,403,237],{"class":215},[202,405,406],{"class":233}," order:\n",[202,408,410],{"class":204,"line":409},15,[202,411,227],{"emptyLinePlaceholder":226},[202,413,415,418,421,423,426,428,430,432,435,437],{"class":204,"line":414},16,[202,416,417],{"class":215},"1.",[202,419,420],{"class":233}," Locate the element's source from ",[202,422,237],{"class":215},[202,424,425],{"class":240},"framework.file",[202,427,237],{"class":215},[202,429,330],{"class":233},[202,431,237],{"class":215},[202,433,434],{"class":240},"framework.line",[202,436,237],{"class":215},[202,438,439],{"class":233}," …\n",[202,441,443,446,449,451,453,455],{"class":204,"line":442},17,[202,444,445],{"class":215},"2.",[202,447,448],{"class":233}," Carry out that entry's ",[202,450,237],{"class":215},[202,452,297],{"class":240},[202,454,237],{"class":215},[202,456,457],{"class":233}," as an instruction scoped to that element.\n",[202,459,461,464],{"class":204,"line":460},18,[202,462,463],{"class":215},"3.",[202,465,466],{"class":233}," Move on to the next one.\n",[202,468,470],{"class":204,"line":469},19,[202,471,472],{"class":208},"\u003C!-- quello:end -->\n",[119,474,475],{},"The markers mean the section is written once and never rewritten, so anything you add around it\nstays put.",[123,477,479],{"id":478},"talking-to-the-agent","Talking to the agent",[119,481,482],{},"You do not have to use the phrase. All of these work, because the agent has the file:",[484,485,486,491,496,502],"ul",{},[131,487,488],{},[150,489,490],{},"\"make PICK 2 sticky\"",[131,492,493],{},[150,494,495],{},"\"PICK 1 and PICK 4 should share the same spacing\"",[131,497,498,501],{},[150,499,500],{},"\"quello\""," — the section tells the agent this refers to the picks",[131,503,504,507],{},[150,505,506],{},"\"resolve the picks\""," — work through all the annotated ones",[123,509,511],{"id":510},"when-there-is-no-repository","When there is no repository",[119,513,514,515,522],{},"If your agent has no access to the codebase — a chat in a browser tab — turn on\n",[516,517,519],"a",{"href":518},"\u002Fgetting-started\u002Fusage#clipboard",[134,520,521],{},"Copy on pick"," and paste instead. The clipboard payload uses\nthe same JSON shape as the file.",[123,524,526],{"id":525},"a-note-on-trust","A note on trust",[119,528,529],{},"Notes travel through a file, which is a weaker channel than talking to your agent directly. The\ninstructions quello writes tell the agent to treat a note as a request from you, and to check before\nacting on one that asks for something unrelated to the element it is attached to.",[531,532,533],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHepR, html code.shiki .sHepR{--shiki-light:#39ADB5;--shiki-light-font-weight:bold;--shiki-default:#89DDFF;--shiki-default-font-weight:bold;--shiki-dark:#89DDFF;--shiki-dark-font-weight:bold}html pre.shiki code .so75L, html code.shiki .so75L{--shiki-light:#E53935;--shiki-light-font-weight:bold;--shiki-default:#F07178;--shiki-default-font-weight:bold;--shiki-dark:#F07178;--shiki-dark-font-weight:bold}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":198,"searchDepth":212,"depth":212,"links":535},[536,537,538,539,540],{"id":125,"depth":212,"text":126},{"id":186,"depth":212,"text":187},{"id":478,"depth":212,"text":479},{"id":510,"depth":212,"text":511},{"id":525,"depth":212,"text":526},"The loop — pick, annotate, hand the whole lot to your agent.",null,{},{"icon":29},{"title":26,"description":541},"iDfxz5dQ5iZIf9ntui2mKszvWAyQkzvel9BLd5iVLgs",[548,550],{"title":21,"path":22,"stem":23,"description":549,"icon":24,"children":-1},"Picking, the toolbar, the pick list, notes and settings.",{"title":38,"path":39,"stem":40,"description":551,"icon":41,"children":-1},"Vue, React, Svelte and Solid single-page apps — the shortest setup.",1788454295913]