compass-visual

A skill that turns Compass build records into self-contained HTML pages and PNG images. One page explains what is being built, and another shows its progress.

In plain words
What is it for?
Generating a Contract Brief or progress Cockpit from files such as contract.md, progress.md, plan.md, receipts.md, and review-ledger.md.
Why use it?
It provides a visual view of the build goal, scope, stages, current step, and review findings without manually assembling a report.

Skill for Claude CodeCodex

Part of the compass plugin — 11 skills, 3 commands, 3 hooks shipped together

Install

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.

agentmods
npx agentmods add skills/rishi4792/compass/compass-visual
Any agent
npx skills add Rishi4792/compass --skill compass-visual
Clone the repo
git clone --depth 1 https://github.com/Rishi4792/compass

Made for: Claude Code, Codex.

Or install compass, the plugin that ships this one along with the rest of its 11 skills, 3 commands, 3 hooks.

Per session 159 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,507 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00159 $0.02507
Opus 5 $0.00079 $0.01254
Sonnet 5 $0.00032 $0.00501
Haiku 4.5 $0.00016 $0.00251

Measured 2d ago against content hash d63cebe84ce7, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

compass-visual 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 2d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (gen.mjs), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

plugins/compass/skills/compass-visual/SKILL.md · 85 lines

How it starts

The opening of the file, as written. The whole thing — 85 lines — stays where its author put it; the contents beside it link to each section on GitHub.

compass-visual

Five views of a build, generated deterministically from its on-disk state by gen.mjs.

  • Contract Briefwhat we're building. A cinematic-hero cover (its own accent + grade) over an rk-house-style body: the goal, what it touches, the reconciliation gold, the invariants, the NOW/LATER/NEVER scope, and the security classification. A pure function of contract.md.
  • Cockpitwhere it stands. Stage timeline (done / ◉ here / left), step k/n, the next action, and what the reviews caught. From progress.md / plan.md / receipts.md / review-ledger.md.

Both are self-contained HTML written into the build folder, rendered to PNG via cinematic-hero/render.sh. Same state → byte-identical HTML (no clock, no randomness) — safe to re-run.

Generate

node skills/compass-visual/gen.mjs <build-dir> <view> [--shareable] [--out <file>]
  • viewbrief | brief-body | cockpit.
    • brief — the full page: cinematic cover + house body. This is what you render + show.
    • brief-body — ONLY the house-style body region. This is the artifact the house gates run on (the cinematic cover is off-theme by design and is excluded from the gate — it follows cinematic-hero's own accent + editorial radii).
    • cockpit — the progress view.
  • --out <file> writes to a file; without it, HTML goes to stdout (so diff <(gen …) <(gen …) proves idempotency exactly).

Deliver (v0.26 — a milestone is DELIVERED, not just written to disk)

Generating the HTML is step one, not done. Delivery protocol for every milestone (Brief / plan-map / release-card):

  1. Rendercompass.sh render <dir>/<view>.html <dir>/<view>.png (a real headless-Chrome screenshot, watchdog-bounded, fail-closed). Only write png=N/A — <reason> in the receipt after this genuinely fails (no browser / opted out) — never preemptively.
  2. Show it inline — Read the PNG so the user actually SEES the artifact (a local file path is invisible on the Claude Code phone app).
  3. Publish it — publish the HTML via the Artifact tool; a claude.ai URL opens on the user's laptop AND phone. Put the URL in the receipt's artifact=; when the Artifact tool is unavailable (headless), write artifact=N/A — headless (no Artifact tool).
  4. Record the MILESTONE: <name> render=<html> png=<png|N/A — reason> artifact=<url|N/A — reason> line (one concrete value per key) and run compass.sh milestone-gate <dir> <name> — a bare N/A (no reason) or a missing render fails the gate. The Brief redesign (v0.26) renders the builder's mental model: problem → picture-of-done (before→after) → the one proof → the moves → guardrails → a details fold.

Read the full file on GitHub · 85 lines

Files

What ships with it

2 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.

Changes

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.

  1. 2d ago First seen · 85 lines · 159 tokens per session scan A d63cebe84ce7

Subscribe to this mod's changes

compass-visual is a skill published in the GitHub repository Rishi4792/compass (2 stars, last pushed 8d ago), licensed MIT. It adds 159 tokens to every session and 2,507 once invoked, about $0.0008 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.

Related

Other skills, from other repositories

systematic-debugging

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.

obra/superpowers · 21 tokens

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

obra/superpowers · 37 tokens

auto-perf-optimize

Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.

microsoft/vscode · 62 tokens

chat-perf

Run chat perf benchmarks and memory leak checks against the local dev build or any published VS Code version. Use when investigating chat rendering regressions, validating perf-sensitive changes to chat UI, or checking for memory leaks in the chat response pipeline.

microsoft/vscode · 51 tokens

chat-pet-sprite-creation

Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.

microsoft/vscode · 53 tokens

cpu-profile-analysis

Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…

microsoft/vscode · 71 tokens