From pr-visual
Capture visual PR documentation — annotated screenshots and walkthrough videos
How this skill is triggered — by the user, by Claude, or both
Slash command
/pr-visual:pr-visualThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Capture visual PR documentation for the current pull request.
Capture visual PR documentation for the current pull request.
This generates AI-driven Playwright scenarios from the PR description or git diff, then captures annotated screenshots (desktop 2x + mobile 3x, light + dark) and walkthrough videos with burned-in captions.
Each run is isolated in a git worktree with its own port and namespaced resources (Docker containers, databases, volumes), so multiple runs can execute in parallel without collisions.
Scaffold a config file for a new project:
npx tsx ${CLAUDE_PLUGIN_ROOT}/scripts/pr-visual/index.ts init
This detects the framework, package manager, Docker services, and ORM, then generates a tailored .pr-visual.config.ts.
npx tsx ${CLAUDE_PLUGIN_ROOT}/scripts/pr-visual/index.ts
npx tsx ${CLAUDE_PLUGIN_ROOT}/scripts/pr-visual/index.ts cleanup
Finds and removes orphaned worktrees, Docker projects, and stale directories from interrupted or crashed runs.
Consuming repos define a .pr-visual.config.ts at their project root:
import type { ProjectConfig } from "pr-visual/scripts/pr-visual/types.js";
export default {
port: 3000,
devServer: { command: "npm run dev" },
setup: [
// COMPOSE_PROJECT_NAME is auto-set to {{runId}} — each run's
// containers, networks, and volumes are fully isolated
{ name: "Start database", command: "docker compose up -d postgres redis" },
{ name: "Run migrations", command: "npx prisma migrate deploy" },
{ name: "Seed data", command: "npx prisma db seed" },
],
readiness: { path: "/api/health", timeout: 60_000 },
teardown: [
// Only this run's containers are torn down
{ name: "Stop database", command: "docker compose down -v" },
],
} satisfies ProjectConfig;
All command and env values support these placeholders:
| Variable | Description |
|---|---|
{{port}} | Auto-allocated TCP port for this run |
{{runId}} | Unique identifier — safe for Docker project names, DB suffixes, etc. |
{{rootDir}} | Absolute path to the working directory (worktree or project root) |
These environment variables are injected into every lifecycle step and the dev server — you don't need to set them manually:
| Variable | Value |
|---|---|
COMPOSE_PROJECT_NAME | {{runId}} — scopes all Docker Compose resources |
PORT | Allocated port |
PR_VISUAL_RUN_ID | Same as {{runId}} |
PR_VISUAL_PORT | Same as {{port}} |
PR_VISUAL_ROOT_DIR | Same as {{rootDir}} |
ANTHROPIC_API_KEY — Required for AI-generated scenarios (falls back to static routes). Can also be configured via plugin user config.PR_BODY — Override PR body text for scenario generationPR_VISUAL_CONFIG — Explicit path to config file (overrides auto-discovery)PR_VISUAL_NO_ISOLATE=1 — Skip worktree isolation, run in-placeCOMPOSE_PROJECT_NAME scoped to this runnpx claudepluginhub gerokeller/pr-visual --plugin pr-visualFetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Applies a firm's KYC/AML rules grid to parsed onboarding records: assigns risk rating, checks required documents, outputs rule outcomes with citations, and routes for escalation.
Generates daily or weekly digests of activity from connected sources (chat, email, docs, tasks, CRM), highlighting action items, decisions, mentions, and project updates.