Linko91

Quello — AI skill for Claude Code

AI community

Point at any element in your browser and tell your AI agent: "quello".

How to install Quello

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Linko91/quello and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Quello does

Point at any element in your browser and tell your AI agent: "quello". Visual element picker for Claude Code, Cursor, Codex, Windsurf & Copilot — works with Vite, Vue, Nuxt, React, Next.js, Svelte, Astro.

Alternatives in AI

Project Next 14 AI Prompt Sharing — Next.js recently became the official React framework as outlined in React docs 3k ★
Nuxt Skills — Vue, Nuxt, and NuxtHub skills for AI coding assistants 597 ★
UltraCode Shim — Give Claude Code's ultracode mode to ANY model you already pay for 422 ★

README

quello

Point at any element in your browser and tell your AI agent: "quello". Visual element picker for Claude Code, Cursor, Codex, Windsurf & Copilot.

You pick elements in the running app; quello writes them to `.quello/picks.json` as `PICK 1`, `PICK 2`, … Then you say *"make PICK 2 sticky"* and the agent knows exactly which component you mean.

**MVP status** — Vite only, dev mode only. No MCP server and no Next.js adapter yet (both v2).

Packages

Package	Description
`@quello/core`	Framework-agnostic browser runtime. Zero dependencies.
`vite-plugin-quello`	Vite plugin: injects the runtime and persists picks.

Plus two manual test apps: [`playgrounds/vue`](playgrounds/vue) and [`playgrounds/react`](playgrounds/react).

Usage

// vite.config.ts
import { defineConfig } from 'vite'
import quello from 'vite-plugin-quello'

export default defineConfig({
  plugins: [quello()],
})

Start the dev server, then:

Alt+Q (or the quello button, bottom right) toggles picker mode
Hover highlights the element under the cursor and names its component
Click assigns the next number and pins a badge to the element
Click a badge to remove that pick; Clear all empties the list
⚙ opens the settings panel; – collapses the toolbar
Drag the ⠿ grip to move the toolbar anywhere
Esc closes the panel if it is open, otherwise leaves picker mode

Picks survive a page reload: on load the runtime re-resolves each stored selector for the current URL.

What a pick records

{
  "id": 2,
  "label": "PICK 2",
  "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": "Vue component name and source file.",
  "rect": { "x": 861, "y": 222, "width": 198, "heigh