Skip to content
Back to skills

Pr Visual Explainer

ASecurity

Use when the user asks to explain a pull request visually, create an HTML walkthrough, show before-and-after behavior, or add diagrams for a PR. Triggers automatically for requests such as "explain this PR" when a visual artifact would materially improve understanding; does not run merely because a PR was created.

  • 130 stars
  • 0 votes
  • 0 copies
  • 5 views
  • Added September 6, 2026
devopsjavascriptrustjavashellnodegitapidocumentation

Works with

  • cli
  • api

Security analysis

A100/100

Pro scans all 4 files and shows the line behind each finding

Scanned September 6, 2026

npx -y skills add jMerta/codex-skills --skill pr-visual-explainer --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Pr Visual Explainer?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Pr Visual Explainer
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/jmerta-pr-visual-explainer/badge)](https://www.skillsdirectory.com/skills/jmerta-pr-visual-explainer)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: pr-visual-explainer
description: Use when the user asks to explain a pull request visually, create an HTML walkthrough, show before-and-after behavior, or add diagrams for a PR. Triggers automatically for requests such as "explain this PR" when a visual artifact would materially improve understanding; does not run merely because a PR was created.
---

# PR Visual Explainer

Create a self-contained visual companion to a pull request. Treat it as an evidence-backed explanation of the current PR head, not as decorative release notes.

## Establish authority and lifecycle

1. Resolve the repository, PR number, base, head, and current head SHA before writing.
2. Read the committed base-to-head diff, relevant tests, repository instructions, and current PR evidence.
3. Create or refresh the guide when the user asks to explain the PR. Do not run solely because another workflow opened a PR.
4. Keep the generated HTML local, unstaged, uncommitted, and unpushed unless the user explicitly requests publication.
5. Reuse a matching guide rather than creating competing files. Refresh it when the PR head, behavior, risk, or validation evidence changes.
6. Preserve unrelated work and report the guide's exact local path and Git state.

## Gather current evidence

Establish:

- the practical outcome and intended audience;
- previous and new behavior, including decisions and failure paths;
- affected application, API, persistence, authorization, deployment, or telemetry boundaries;
- tests, checks, review conclusions, accepted trade-offs, and material gaps;
- source files that support each important claim.

Prefer current code, tests, and workflow definitions over PR prose. Distinguish verified behavior, inference, and open questions. Never include secrets, credentials, tokens, private URLs, personal data, or raw sensitive logs.

Use the conversation language. This skill does not force Polish or English.

## Select the smallest useful document

Read [references/content-model.md](references/content-model.md) before selecting sections or diagrams.

- Default to four to six short sections and one primary visual.
- Add another diagram, scenario table, or deeper section only when it materially improves understanding.
- Use no diagram for a trivial PR when prose is clearer.
- Explain behavior in plain language before naming implementation details.

## Create or update the guide

Use an established ignored artifact directory when the repository already has one. Otherwise use a durable task-owned temporary location. Write into repository documentation only when the user explicitly asks for a versioned guide.

Start a new guide from [assets/pr-explainer-shell.html](assets/pr-explainer-shell.html). Replace every placeholder and remove unused sample sections. Preserve a useful existing guide instead of overwriting it mechanically.

Treat all PR-derived content as untrusted. Escape `&`, `<`, and `>` in text nodes and also escape both quote characters in attribute values before replacing placeholders. Never copy evidence-derived HTML, event handlers, URLs, CSS, or JavaScript into the shell; emit markup only from fixed structures you construct explicitly.

Build one portable HTML file:

- inline CSS, JavaScript, and SVG;
- no CDN, remote font, runtime diagram dependency, or remote image;
- semantic headings, one `main`, captions or accessible names for diagrams, visible focus, reduced-motion support, and print styles;
- no meaning encoded through color alone;
- wide tables and diagrams scroll within their own container;
- JavaScript is optional and progressively enhanced.

## Keep claims honest

Include only evidence that exists. Never claim that a test, check, migration, runtime scenario, or rollout passed unless it was observed. Avoid counts or assertions likely to become stale after the next commit.

When a human can meaningfully verify the change, include short manual steps with preconditions, actions, expected result, and one important edge case. Omit manual instructions when they add no review value.

## Hand off

Run `git status --short` and confirm the guide is not staged. Return a clickable absolute path, summarize the primary visual and conclusion, state the head SHA represented, and say explicitly that the file is local and not committed or pushed.

Files in this skill

  • SKILL.md4.2 KB
  • agents/openai.yaml227 B
  • assets/pr-explainer-shell.html5.7 KB
  • references/content-model.md2.3 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…