Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/okuegow/agent-skills/visual-feedbacknpx skills add okuegow/agent-skills --skill visual-feedbackgit clone --depth 1 https://github.com/okuegow/agent-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/okuegow/agent-skills/visual-feedback)<a href="https://agentmods.dev/skills/okuegow/agent-skills/visual-feedback"><img src="https://agentmods.dev/badge/skills/okuegow/agent-skills/visual-feedback.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00101 | $0.03251 |
| Opus 5 | $0.00051 | $0.01625 |
| Sonnet 5 | $0.00020 | $0.00650 |
| Haiku 4.5 | $0.00010 | $0.00325 |
Grade A, and why
visual-feedback scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 194 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual Feedback
Overview
Turn any deliverable (concept, report, design, plan) into ONE self-contained HTML
review page where every meaningful element is an inline comment point. Each
comment can carry a category (Question/Error/Change/Praise) and priority
(Must/Optional). Comments persist in localStorage, and the user exports them as
structured markdown WITH a JSON attachment (clipboard or .md file) to paste back
into the chat. The chat paste-back closes the loop: the agent maps each comment
to its target id and works the feedback in.
Built for multiple rounds: when you produce a follow-up version you embed a round manifest that records, per prior comment, what you did with it (addressed / declined / deferred / noted). Resolved points move into a collapsed history and stop reappearing as open fields; the page builds a per-version changelog and marks changed sections. See "Iterating across versions".
The UI defaults to English and carries a small EN/DE toggle in the toolbar; the
toggle switches every visible string AND the exported markdown, and persists in
localStorage under fb:lang. Category/priority are stored as stable, language-
independent ids (frage/fehler/aenderung/lob, muss/optional); only their
display labels translate, so the JSON block reads the same in either language.
Template: copy and adapt template.html in this skill directory. It contains
the complete widget CSS/JS and one example of every target type. Do not rebuild
the mechanics from scratch - that is how past pages drifted into incompatible
variants. The script builds its own toolbar, toast and preview overlay, so
retrofitting an existing HTML page = paste the template's widget CSS block and
complete <script> into it, then only add the markers from the recipe plus
data-fbkey/data-fbver on <body>. Nothing else is required.
Recipe (the page IS this)
- Comment points.
<body>carriesdata-fbkey="<unique-key>"(never reuse across pages) anddata-fbver="<n>"(bump on every content rewrite, or old comments stick to changed spots). Each<section>carriesdata-fbsec="<n> · <Titel>". Targets:data-fbautoon a section/container auto-pins everyp,li,blockquote,h3,h4and every table row inside (data-fbskipexcludes subtrees) - the default for prose/tablesdata-fb="id"+data-fblabel="Label"for manual targets (cards, callouts, diagram units)data-fbon SVG elements gives overlay pins with a comment panel below the diagram<textarea data-fb="id">for always-visible fields: one general-feedback field per section plus a "Gesamturteil" at the end
- Widget. A ✎ pin per target opens a textarea in place, plus type/priority chips. Input autosaves (debounced). The sticky toolbar (built by the script) shows a storage-status pill, an "X/Y commented" counter, an EN/DE language toggle, a filter (All/Open/Commented), jump arrows, Preview, Copy feedback, Save as .md and Reset. All labels shown here are the English default; the DE toggle swaps them (and the export) to German.
- Versioning + comment lifecycle (feedback rounds). Comments live under
fb:<key>:v<ver>. Bumpingdata-fbvercarries prior comments with a still- matching target into the new version - matching now also requires the target's fingerprint to still match (auto-targets by content, manual targets by theirdata-fblabel), so a drifted auto-target or a relabeled manual target surfaces loudly under "Nicht mehr zuordenbar" instead of silently binding to the wrong element. Auto ids are content-based (autoIdhashes the element text; identical text gets a stable per-occurrence suffix), so inserting or reordering other elements no longer shifts ids. Give every<section>a stabledata-fbsecidso changelog jumps survive title edits. On top of carry-forward sits an optional round manifest (<script type="application/json" id="fb-rounds">, embedded in the page) recording, per round, what you did with each prior comment - see "Iterating across versions" below. Without a manifest the page behaves exactly as before (carry everything, no history UI). Multi-tab: saves are read-modify-write merged and astoragelistener syncs other tabs live (targets with a pending edit or open editor are left alone), so the common case (one reviewer, maybe a second tab) never loses data. localStorage has no real transactions, so genuinely concurrent saves from two tabs in the same instant can still drop one - the tool is built for single-reviewer use, not concurrent co-editing. - Export - both ways, structured, dual-format. "Copy feedback" (navigator.clipboard with execCommand fallback), "Save as .md" (Blob download) and "Preview" all produce the same document: human-readable markdown grouped by section, PLUS a machine-readable JSON block for the agent. The markdown headings follow the UI language (English shown below; German when the DE toggle is on). The JSON block is language-independent.
What ships with it
10 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 194 lines · 101 tokens per session scan A 1efd2c5bb84f
visual-feedback is a skill published in the GitHub repository okuegow/agent-skills (4 stars, last pushed 1mo ago), licensed MIT. It adds 101 tokens to every session and 3,251 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
meta-tags-optimizer
Optimize title tags, meta descriptions, Open Graph, and Twitter cards for maximum click-through rate. Generates multiple A/B test variations with character counting and SERP preview. Use when asked to "optimize title tag", "write meta description", "improve CTR", "Open Graph tags", "fix my meta tags", "social media…
google-ads-audit
Google Ads account audit and business context setup. Run this first — it gathers business information, analyzes account health, and saves context that all other ads skills reuse. Trigger on "audit my ads", "ads audit", "set up my ads", "onboard", "account overview", "how's my account", "ads health check", "what should…
sxo
Search Experience Optimization (SXO) — the bridge between SEO and UX/CRO. Audits the full journey from the SERP click to the on-page goal: SERP click-through factors (title/meta/rich results that win the click), then post-click experience signals that keep users and drive conversions — above-the-fold relevance and…
elixir-idioms
OTP/BEAM patterns and Elixir idioms — GenServer, Supervisor, Task, Registry, pattern matching, with chains, pipes. Use when designing processes or debugging BEAM issues.
tidewave-integration
Tidewave MCP runtime tools — debugging, smoke testing, live state inspection, SQL queries, hex docs. Use when evaluating code in a running Phoenix app.
security
Enforce Elixir/Phoenix security — auth, OAuth, sessions, CSRF, XSS, SQL injection, input validation, secrets. Use when editing auth files, login flows, RBAC, or API keys.