Agent skill

PRP Companion Page

by Wirasm in Wirasm/prp

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.

MITAuto-check passedDevelopment

Install PRP Companion Page

skills CLI
$ npx skills add Wirasm/prp --skill prp-companion -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Wirasm/prp prp-companion --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
prp-companion
GitHub stars
2.3k
Token cost
~990 tokens
SKILL.md length
352 words
Files
5
Skills in repo
37
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 6 steps: Read the whole markdown artifact. → Build the theme :… → Read templates/companion.md and follow… → …
  • Turning a PRP plan into a one-page visual with a diagram and risks
  • SKILL.md covers Resolve the store, Write the page, Report and Resources
  • Runs JavaScript scripts from its folder; calls git

What it does

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.

When your agent uses it

  • 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

Example prompts

  • “Make the latest plan visual with a companion page.”
  • “Visualize pr-12-review.md so I can go through the findings one by one.”
  • “Diagram this plan and write the companion page for auth-rework.plan.md.”

Requirements

  • 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)

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Read the whole markdown artifact.
  2. Build the theme : templates/default-theme.css verbatim, then $PRP_DIR/companion.css`
  3. Read templates/companion.md and follow it exactly.
  4. Write the page beside the markdown: same directory, final .md replaced by .html
  5. Before reporting, check the page against the markdown once: every risk, finding, required outcome,
  6. When the artifact is a review or a plan and command -v bench succeeds, the page is live in helm: read

What it can do on your machine

Read from SKILL.md and the folder at commit 4352925. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    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.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~158
When it runs · the whole SKILL.md, loaded when a task matches
~990

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from Wirasm/prp at commit 4352925, republished under its MIT licence (© Wirasm). 352 words, ~990 tokens.

Download SKILL.mdSave it as .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.
name
prp-companion
description
Writes the visual HTML companion of a PRP plan or review - one self-contained page beside the markdown that shows a plan's change diagram, steps and risks, or a review's verdict, findings and a diagram of what the PR changed, with every item carrying a stable id a mark can point at. In helm a review or plan page is live: the operator sets each finding's or step's status and replies on the page. prp-plan and prp-review run it after writing their markdown. Use when the user wants to "make it visual", "show me the plan", "visualize this review", "diagram this plan", "write the companion", or invokes /prp-companion.
argument-hint
[path/to/plan-or-review.md] (blank = most recent plan or review in the store)

PRP Companion

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.

Resolve the store

bash
# --- 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"

Write the page

  1. Read the whole markdown artifact.
  2. Build the theme <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.
  3. Read templates/companion.md and follow it exactly.
  4. Write the page beside the markdown: same directory, final .md replaced by .html (x.plan.md → x.plan.html, pr-12-review.md → pr-12-review.html).
  5. Before reporting, check the page against the markdown once: every risk, finding, required outcome, acceptance criterion and changed Part is on the page as the markdown's own words, and nothing on the page is absent from the markdown. Fix the page, never the markdown.
  6. When the artifact is a review or a plan and 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.
Show full SKILL.md (78 more words)Show less

Report

One line: the companion's absolute path, and in live mode the data file's path or why it was not written.

Resources

  • templates/companion.md — the page contract: file rules, fidelity, ids, diagrams, plan and review layouts
  • templates/default-theme.css — the built-in theme, always pasted first; the store's companion.css overrides it
  • templates/live.md — live mode for a review or plan page in helm: the data file, opening the page, answering its mail
  • templates/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

Files

SKILL.md and 4 other files in .claude/skills/prp-companion of Wirasm/prp.

  • SKILL.md
  • templates/companion.md
  • templates/default-theme.css
  • templates/live.js
  • templates/live.md

Open the folder on GitHubat commit 4352925

Compare with similar skills

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.

PRP Companion Page compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
PRP Companion Page this skillWirasm/prp2.3k—~990Automated safety check: PassMIT
Plannotator Visual Explainerbacknotprop/plannotator9.3k—~1.7kAutomated safety check: PassApache-2.0
Plan Previewu-ichi/reviewable-html-workbench2981 repos~1.8kAutomated safety check: PassMIT
Htmlvspecdisler/pi-agent-observability145—~4.7kAutomated safety check: NotesMIT
Coding Protocollencx/skills196—~2.4kAutomated safety check: PassMIT
Codex Code ReviewPiLastDigit/TRIP-workflow635—~1.2kAutomated safety check: PassNone

Similar skills

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

    9.3k GitHub stars~1.7k tokensUpdated today
    Agent WorkflowsAuto-check passed
  • Plan Preview

    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…

    298 GitHub starsUsed in 1 repo~1.8k tokens
    Agent WorkflowsAuto-check passed
  • Htmlvspec

    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…

    145 GitHub stars~4.7k tokensUpdated 4 mo ago
    Agent WorkflowsAuto-check: notes
  • Coding Protocol

    lencx/skills

    Risk-scaled repo execution and code-evidence protocol. An agent skill from lencx/skills.

    196 GitHub stars~2.4k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed
  • Codex Code Review

    PiLastDigit/TRIP-workflow

    Iterative Codex CLI code review against an implementation plan

    635 GitHub stars~1.2k tokensUpdated 16 days ago
    DevelopmentAuto-check passed
  • Work Issue

    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.

    123 GitHub stars~891 tokensUpdated 2 mo ago
    DevelopmentAuto-check passed

More from Wirasm/prp

All 37 skills in this repo
  • PRP Loop

    Wirasm/prp

    Runs the plan, implement and review pipeline detached in fresh headless sessions, looping review and fix until the pull request is clean.

    2.3k GitHub stars~894 tokensUpdated 8 days ago
    Auto-check passed
  • 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.

    2.3k GitHub stars~863 tokensUpdated 8 days ago
    Auto-check passed
  • Coordinates several PRP workstreams in isolated Git worktrees from one session, verifying proof, holding merge gates and sequencing the merges.

    2.3k GitHub stars~3.5k tokensUpdated 8 days ago
    Auto-check passed
  • 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.

    2.3k GitHub stars~4.1k tokensUpdated 8 days ago
    Auto-check passed
  • PRP Plan

    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.

    2.3k GitHub stars~4k tokensUpdated 8 days ago
    Auto-check passed
  • PRP Spike

    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.

    2.3k GitHub stars~3.8k tokensUpdated 8 days ago
    Auto-check passed

Questions about PRP Companion Page

What does PRP Companion Page do?

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.

When should I use PRP Companion Page?

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.

How do I install PRP Companion Page in Claude Code?

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.

How do I install PRP Companion Page in Codex?

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.

Can I use PRP Companion Page in Cursor, Gemini CLI or GitHub Copilot?

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.

What does PRP Companion Page need to run?

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

Does PRP Companion Page access the network?

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.

Is PRP Companion Page safe to install?

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.

What licence does PRP Companion Page use?

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.

How many tokens does PRP Companion Page use?

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.

What are the alternatives to PRP Companion Page?

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.

Who maintains PRP Companion Page?

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.