Plannotator Visual Explainer
backnotprop/plannotator
Builds self-contained HTML explainers for plans, pull requests and technical concepts in Plannotator's theme, then opens them in its annotation view.
Writes a self-contained HTML page beside a PRP plan or review that shows the diagram, steps, risks or findings, with a stable id on every item.
$ npx skills add Wirasm/prp --skill prp-companion -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Wirasm/prp prp-companion --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Wirasm/prp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/prp-companion .claude/skills/prp-companion && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "prp-companion" agent skill from https://github.com/Wirasm/prp/tree/development/.claude/skills/prp-companion into .claude/skills/prp-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prp-companion", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Wirasm/prp/tree/development/.claude/skills/prp-companionType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Wirasm/prp --skill prp-companion -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Wirasm/prp prp-companion --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Wirasm/prp.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/prp-companion .agents/skills/prp-companion && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "prp-companion" agent skill from https://github.com/Wirasm/prp/tree/development/.claude/skills/prp-companion into .agents/skills/prp-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prp-companion", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Wirasm/prp --skill prp-companion -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Wirasm/prp prp-companion --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Wirasm/prp.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/prp-companion .cursor/skills/prp-companion && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "prp-companion" agent skill from https://github.com/Wirasm/prp/tree/development/.claude/skills/prp-companion into .cursor/skills/prp-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prp-companion", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Wirasm/prp.git --path .claude/skills/prp-companion--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Wirasm/prp --skill prp-companion -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Wirasm/prp prp-companion --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Wirasm/prp.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/prp-companion .gemini/skills/prp-companion && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "prp-companion" agent skill from https://github.com/Wirasm/prp/tree/development/.claude/skills/prp-companion into .gemini/skills/prp-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prp-companion", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Wirasm/prp prp-companionInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Wirasm/prp --skill prp-companion -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Wirasm/prp.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/prp-companion .github/skills/prp-companion && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "prp-companion" agent skill from https://github.com/Wirasm/prp/tree/development/.claude/skills/prp-companion into .github/skills/prp-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prp-companion", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Wirasm/prp --skill prp-companion -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Wirasm/prp prp-companion --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Wirasm/prp.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/prp-companion .opencode/skills/prp-companion && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "prp-companion" agent skill from https://github.com/Wirasm/prp/tree/development/.claude/skills/prp-companion into .opencode/skills/prp-companion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "prp-companion", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
prp-companionWrites a self-contained HTML page beside a PRP plan or review that shows the diagram, steps, risks or findings, with a stable id on every item.
Given a plan file or a pull request review report, the agent writes one HTML page that is quicker to take in than the markdown. The markdown stays the source that agents read and is never edited, while the page is derived from it and overwritten on every run. With no argument it picks the newest plan or review in the PRP store, and it declines any other kind of markdown.
A plan page shows a change diagram, steps and risks, and a review page shows the verdict, findings and a diagram of what the pull request changed. The page uses the default theme, with an optional `companion.css` from the store layered on top. The agent checks the page against the markdown before reporting and fixes the page, not the source. When the `bench` command is available, plan and review pages go live in helm: a data file is written beside the page and the operator can set each finding's or step's status and reply on the page.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 4352925. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships script files (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
gitFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
PRP Companion Page loads about 990 tokens when it runs. Until then it costs about 158 tokens; SKILL.md has 352 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from Wirasm/prp at commit 4352925, republished under its MIT licence (© Wirasm). 352 words, ~990 tokens.
.claude/skills/prp-companion/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.Write one HTML page that lets a human take in a plan or review with less reading. The markdown stays the artifact that agents and later skills read: never edit it. The page is derived from it and is overwritten on every run.
Input: $ARGUMENTS — a plan (*.plan.md) or review report (pr-*-review.md). If blank, use the
newest of either in $PRP_DIR/plans/ and $PRP_DIR/reviews/. For any other kind of markdown, say
the companion covers plans and reviews only, and stop.
The agent that just wrote the artifact writes its companion, in the same context. Do not hand it to a fresh agent.
# --- PRP store resolver (canonical; keep byte-identical across skills) ---
# Adopt the store that already records this root; mint a key only when none does.
_gd="$(git rev-parse --path-format=absolute --git-common-dir 2>/dev/null)"
case "$_gd" in */.git) _root="${_gd%/.git}" ;; "") _root="$PWD" ;; *) _root="$_gd" ;; esac
_root="$(cd "$_root" && pwd -P)"
_name="$(basename "$_root" | tr '[:upper:]' '[:lower:]' | tr -cs 'a-z0-9' '-' | sed 's/^-*//;s/-*$//')"
_home="${PRP_HOME:-$HOME/.prp}"
_hit="$(grep -lsF "\"path\": \"$_root\"" "$_home"/*/project.json 2>/dev/null | head -1)"
PRP_DIR="${_hit%/project.json}"
[ -n "$PRP_DIR" ] || PRP_DIR="$_home/${_name:-project}-$(printf %s "$_root" | git hash-object --stdin | cut -c1-8)"
mkdir -p "$PRP_DIR"; [ -f "$PRP_DIR/project.json" ] || printf '{"path": "%s", "name": "%s"}\n' "$_root" "${_name:-project}" > "$PRP_DIR/project.json"<style>: templates/default-theme.css verbatim, then $PRP_DIR/companion.css
verbatim after it when that file exists, so any token the store's file leaves out keeps its
default. A host UI that wants pages in its own look writes that file; prp never writes it.templates/companion.md and follow it exactly..md replaced by .html
(x.plan.md → x.plan.html, pr-12-review.md → pr-12-review.html).command -v bench succeeds, the page is live in helm: read
templates/live.md and follow it. It adds the page's script, writes <stem>.data.json beside the
page and opens the page. Otherwise the page stays static.One line: the companion's absolute path, and in live mode the data file's path or why it was not written.
templates/companion.md — the page contract: file rules, fidelity, ids, diagrams, plan and review layoutstemplates/default-theme.css — the built-in theme, always pasted first; the store's companion.css overrides ittemplates/live.md — live mode for a review or plan page in helm: the data file, opening the page, answering its mailtemplates/live.js — the live page's script, pasted verbatim in live mode only© Wirasm, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 4 other files in .claude/skills/prp-companion of Wirasm/prp.
Open the folder on GitHubat commit 4352925
PRP Companion Page next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| PRP Companion Page this skillWirasm/prp | 2.3k | — | ~990 | Automated safety check: Pass | MIT | |
| Plannotator Visual Explainerbacknotprop/plannotator | 9.3k | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Plan Previewu-ichi/reviewable-html-workbench | 298 | 1 repos | ~1.8k | Automated safety check: Pass | MIT | |
| Htmlvspecdisler/pi-agent-observability | 145 | — | ~4.7k | Automated safety check: Notes | MIT | |
| Coding Protocollencx/skills | 196 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Codex Code ReviewPiLastDigit/TRIP-workflow | 635 | — | ~1.2k | Automated safety check: Pass | None |
backnotprop/plannotator
Builds self-contained HTML explainers for plans, pull requests and technical concepts in Plannotator's theme, then opens them in its annotation view.
u-ichi/reviewable-html-workbench
Plan Mode の <proposedplan を出す直前に、計画の段階・依存関係・検証観点を一時HTMLで視覚確認したい時に使う agent-internal skill。Use this agent-internal skill to create a temporary HTML preview for a plan just before presenting…
disler/pi-agent-observability
Creates a visual engineering implementation plan as a single self-contained HTML page saved to specs/<name.html — the plan authored directly in styled HTML, with one AI-generated diagram image per…
lencx/skills
Risk-scaled repo execution and code-evidence protocol. An agent skill from lencx/skills.
PiLastDigit/TRIP-workflow
Iterative Codex CLI code review against an implementation plan
joesaby/astro-mermaid
End-to-end workflow for resolving a GitHub issue in astro-mermaid — triages complexity, then runs brainstorm → TDD → implement → docs/spec → code review at the right depth.
Wirasm/prp
Runs the plan, implement and review pipeline detached in fresh headless sessions, looping review and fix until the pull request is clean.
Wirasm/prp
Runs a detached, resumable loop that plans, implements, opens a PR, reviews and fixes a feature across headless CLI sessions until the review is clean.
Wirasm/prp
Coordinates several PRP workstreams in isolated Git worktrees from one session, verifying proof, holding merge gates and sequencing the merges.
Wirasm/prp
Turns a PRD, issue or description into an implementation-ready plan grounded in codebase evidence, adding root-cause analysis for bugs and publishing issue plans back to the issue.
Wirasm/prp
Writes an implementation-ready plan for a feature, bug fix, refactor or chore from a PRD, issue or description, grounded in codebase evidence, and can post it back to the source issue.
Wirasm/prp
Settles a feasibility question with the smallest throwaway build that could disprove it, in an isolated worktree, ending in a verdict backed by evidence instead of a PR.
Categories
Writes a self-contained HTML page beside a PRP plan or review that shows the diagram, steps, risks or findings, with a stable id on every item. Given a plan file or a pull request review report, the agent writes one HTML page that is quicker to take in than the markdown. The markdown stays the source that agents read and is never edited, while the page is derived from it and overwritten on every run.
PRP Companion Page fits situations like: turning a PRP plan into a one-page visual with a diagram and risks; presenting a pull request review as a verdict, findings and change diagram; making a plan easier for a teammate to skim before approving it; tracking finding or step status on a live page in helm.
Run `npx skills add Wirasm/prp --skill prp-companion -a claude-code`. Or copy the skill folder (.claude/skills/prp-companion in Wirasm/prp) into .claude/skills/prp-companion in your project. Claude Code loads it when a task matches its description.
Run `npx skills add Wirasm/prp --skill prp-companion -a codex`. Or copy the skill folder (.claude/skills/prp-companion in Wirasm/prp) into .agents/skills/prp-companion in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Wirasm/prp --skill prp-companion -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prp-companion, .gemini/skills/prp-companion, .github/skills/prp-companion and .opencode/skills/prp-companion in your project.
Going by SKILL.md and its folder, PRP Companion Page needs JavaScript for the scripts in its folder and the command-line tools its instructions call (git). Our summary lists: A PRP plan or review markdown file, such as one written by prp-plan or prp-review; Git, used to resolve the PRP store; The bench command for live mode in helm (optional).
SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
PRP Companion Page is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 990 tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with PRP Companion Page: Plannotator Visual Explainer (backnotprop/plannotator, 9.3k stars), Plan Preview (u-ichi/reviewable-html-workbench, 298 stars), Htmlvspec (disler/pi-agent-observability, 145 stars) and Coding Protocol (lencx/skills, 196 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Wirasm (a GitHub user) maintains it in Wirasm/prp, which has 2,258 GitHub stars. The repository holds 37 skills in this directory. The repository was last updated on October 2, 2026.
Source: Wirasm/prp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.