local-visual-recap

Generates local visual recaps of GitHub PR diffs to guide browser QA review.

Updated Jun 28, 2026
One-click install
npx skills add https://github.com/AO-HyS/aohys.com --skill local-visual-recap-ao-hys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: local-visual-recap
Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/local-visual-recap
Command: npx skills add https://github.com/AO-HyS/aohys.com --skill local-visual-recap-ao-hys

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @agent-native/core, and includes scripts (resource) components.

What problem does it solve? Reviewing a large pull request by reading raw diffs is slow and makes it hard to know which UI states and routes actually need browser testing. This Skill turns the current PR or branch diff into a structured visual recap that maps what changed and where reviewers should focus. ## Core Features & Use Cases - Diff Collection and Prompt Generation: A bundled helper script resolves the PR (via gh) or an explicit base/head range, collects the diff and stats, and builds a recap prompt using the Agent-Native CLI. - Local-First Recap Authoring: The agent authors a plan.mdx recap covering changed surfaces, affected routes/components, before/after UI states, API or schema changes, risk notes, and a focused browser QA checklist. - Local Serving for Review: The recap is verified and served locally through Agent-Native local-files mode, producing a shareable local Plan URL without GitHub Actions or API keys. - Use Case: Before merging a frontend PR, invoke the skill to get a review map of changed components and a VAR/browser QA checklist, so reviewers test the right screens instead of scanning every changed line. ## Quick Start Ask the agent to run $local-visual-recap to generate a local visual recap for the current PR and serve it for browser QA review.

Frequently Asked Questions about local-visual-recap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a visual recap of a GitHub PR locally?▼

Invoke the skill in a Git repository and it runs the bundled prepare-recap.mjs script, which detects the PR via gh, collects the diff, and builds a recap prompt. The agent then writes a plan.mdx recap and serves it locally with the Agent-Native CLI.

Can I create a PR diff recap without a GitHub pull request?▼

Yes, pass an explicit base and head range such as --base origin/develop --head HEAD to the helper script. It collects the diff for that range and produces the same recap prompt and local serving flow.

Does this PR recap workflow require an OpenAI API key or GitHub Actions?▼

No, the workflow is local-first by design. It uses the current agent session to author the recap and the @agent-native/core CLI in local-files mode, with no GitHub Actions setup and no OPENAI_API_KEY requirement.

What tools are required to run the local recap script?▼

The script requires git on PATH and a Git repository, plus npx to run @agent-native/core. The gh CLI is needed only when targeting a specific PR number; otherwise you can pass base and head refs directly.

Is the visual recap a replacement for tests or browser QA?▼

No, the recap is a review aid, not a pass/fail gate. It highlights changed surfaces and a focused QA checklist, but real browser testing and the repository's normal test suite are still required.