From quiver
Browser-based visual brainstorming companion for showing mockups, diagrams, and visual options. Use when brainstorm topics involve UI/UX, layout, architecture diagrams, or any content better understood visually.
npx claudepluginhub yagizdo/quiver --plugin quiverThis skill uses the workspace's default tool permissions.
A browser-based companion for displaying mockups, wireframes, architecture diagrams, and side-by-side visual comparisons during brainstorm sessions.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Guides code writing, review, and refactoring with Karpathy-inspired rules to avoid overcomplication, ensure simplicity, surgical changes, and verifiable success criteria.
Share bugs, ideas, or general feedback.
A browser-based companion for displaying mockups, wireframes, architecture diagrams, and side-by-side visual comparisons during brainstorm sessions.
Decide per question whether to show content in the browser or keep it in the terminal.
Use the browser for:
Use the terminal for:
A question about a UI topic is not automatically a visual question. "Should we use tabs or accordion?" is a terminal question. "Here are two tab layouts -- which one?" is a browser question.
Create a temporary directory for HTML files:
mktemp -d /tmp/visual-companion-XXXXXX
Start the visual companion server in the background:
python3 <skill-dir>/server.py --dir <temp-dir> --owner-pid $$ &
<skill-dir> is resolved by the invoking agent to the absolute path of skills/visual-companion/.
Wait for the server to become ready before announcing its URL. The & in step 2 returns immediately; the Python process still needs to import modules, bind the port, and write server-info.json. Announcing the URL before this finishes is the #1 cause of "localhost opened but link unreachable" failures. Probe until both server-info.json exists and the port accepts TCP connections:
for i in $(seq 1 30); do
[ -f <temp-dir>/.vc-meta/server-info.json ] && \
python3 -c "import json,socket; info=json.load(open('<temp-dir>/.vc-meta/server-info.json')); s=socket.socket(); s.settimeout(0.5); s.connect(('127.0.0.1', info['port'])); s.close(); print(info['url'])" 2>/dev/null && break
sleep 0.2
done
<temp-dir>/.vc-meta/ and the background-process output, fix the underlying issue, and retry step 2.Tell the user (only after step 3 prints a URL):
Visual companion running at {url}. It auto-refreshes when I update content.
For each visual step in the brainstorm:
<temp-dir> with a semantic filename (e.g., layout-options.html). Write body content only -- the server wraps fragments automatically.layout-options-v2.html..html file is detected. No manual refresh needed.A step is either browser-answered or terminal-answered. Do not do both in the same step. Mixing them produces the common failure: agent renders clickable cards, user clicks them, agent is actually blocked on AskUserQuestion -- clicks land in events.jsonl that the agent never reads, and the user sees their clicks "do nothing."
Mode A -- Browser-answered (the cards ARE the question):
Use when the whole point is "pick one of these visual options."
python3 -c "import urllib.request; req=urllib.request.Request('http://localhost:{port}/events', method='DELETE'); urllib.request.urlopen(req)"
[data-choice] elements. The client JS highlights the clicked element and POSTs to /event, which appends a line to .vc-meta/events.jsonl.> Click one of the cards in the browser to select your choice.events.jsonl until a new line arrives (up to ~60s):
for i in $(seq 1 300); do
line=$(tail -n 1 <temp-dir>/.vc-meta/events.jsonl 2>/dev/null)
[ -n "$line" ] && echo "$line" && break
sleep 0.2
done
choice field as the answer.AskUserQuestion and treat the step as Mode B from this point on.Mode B -- Terminal-answered (browser is visual aid only):
Use when the browser shows a diagram, mockup, or reference and the real answer is a conceptual choice or free text.
[data-choice] attributes. Clickable styling with no listener on the agent side is the bug that bit us before -- if you are not going to poll events.jsonl, do not ship clickable targets.AskUserQuestion. The browser is decoration; the button click is the answer.Terminal-only steps (no browser): No HTML update needed. Optionally push a placeholder page:
<div style="display:flex;align-items:center;justify-content:center;height:100vh;font-family:system-ui;color:#666">
<p>Continuing in terminal...</p>
</div>
Write body content only. The server wraps fragments with DOCTYPE, CSS, and client JS automatically.
A file is treated as a fragment if its first 256 bytes (stripped, case-insensitive) do not start with <!DOCTYPE or <html>. Full HTML documents are served as-is, with client JS injected before </body>.
.options + .option for comparing 2-3 approaches visually. Mark the recommended option with .recommended..cards + .card for component galleries or feature inventories..mockup with .mock-nav, .mock-sidebar, .mock-content for wireframes..split for before/after or A/B comparisons..pros-cons for tradeoff visualization..mock-button, .mock-input for wireframe form elements.data-choiceAdd data-choice attributes to elements that users can click to make selections:
<div class="options">
<div class="option" data-choice="grid">
<h3>Grid Layout</h3>
<p>Content arranged in a responsive grid</p>
</div>
<div class="option" data-choice="list">
<h3>List Layout</h3>
<p>Content in a vertical list</p>
</div>
</div>
When a user clicks a [data-choice] element:
.selected class is added (blue border + light blue background).vc-meta/events.jsonl:
{"type":"choice","choice":"grid","text":"Grid Layout Content arranged in a responsive grid","timestamp":"2026-04-09T14:30:00.000Z"}
Each line is a JSON object appended by the server. The agent reads this file to see what the user clicked:
{"type":"choice","choice":"option-a","text":"Option A","timestamp":"..."}
{"type":"choice","choice":"option-b","text":"Option B","timestamp":"..."}
The server self-terminates in two cases:
--owner-pid process no longer exists (checked every 0.5s).To stop manually:
kill $(cat <temp-dir>/.vc-meta/server-info.json | python3 -c "import sys,json; print(json.load(sys.stdin)['pid'])") 2>/dev/null
HTML files remain in the temp directory for reference. Optionally copy key mockups to docs/brainstorms/ alongside the spec:
cp <temp-dir>/final-layout.html docs/brainstorms/YYYY-MM-DD-<name>-mockups/
Trigger: Used by /brainstorm Step 1.5 when the user opts into the visual companion. Not directly slash-invoked.
Setup:
Expected behavior:
/brainstorm reads this skill, starts the companion server (server.py) in a temp directory, and points the user to the local URL.<temp-dir>/.vc-meta/server-info.json.docs/brainstorms/.Verification checklist:
/brainstorm only offers the companion when the topic is visual (UI/UX, layout, architecture diagrams).server.py, prints a local URL, and serves written HTML files.<temp-dir>/.vc-meta/server-info.json and used for clean shutdown.Known gotchas:
server.py); never assume skill dirs are prompt-only.pkill -f server.py is needed.