e2e-walkthrough

Orchestrate human-guided browser walkthroughs with step screenshots and trace capture.

3|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/iamcxa/kc-claude-plugins --skill e2e-walkthrough
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: e2e-walkthrough
Source: https://github.com/iamcxa/kc-claude-plugins/tree/main/e2e-pipeline/skills/e2e-walkthrough
Command: npx skills add https://github.com/iamcxa/kc-claude-plugins --skill e2e-walkthrough

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured, human-in-the-loop browser walkthrough workflow that replaces ad-hoc manual exploration and visual QA, ensures reproducible trace capture, and generates actionable artifacts when automated verification fails or needs human validation.

Core Features & Use Cases

  • Interactive exploration: Guided, step, or auto modes for human-assisted UI walkthroughs with per-step screenshots and one-line progress reports.
  • Mapping-driven discovery: Enforces mapping selection and multi-site mapping support to reliably locate pages and elements before exploration.
  • Robust execution pipeline: Pre-flight checks, auth handling (auto/manual), agent-browser trace capture, observe-and-continue per-step loop, anomaly logging, and retry/debug flows.
  • Phase 4 outputs: Automatic step-log.json, trace stop and analysis, dual reports (report.md and pr-summary.md), auto-generated flow YAML, media processing (GIF/MP4), and PR posting support.
  • Use cases: Visual QA, feature exploration, PR-driven UI review, demo recording, and guided debugging when automated tests fail.

Quick Start

Run an interactive walkthrough of the org-settings page, record the session, and generate the flow YAML and reports.

Frequently Asked Questions about e2e-walkthrough

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

FAQPage Schema
How do I record interactive browser walkthroughs with step-level screenshots for visual QA?

Recording interactive browser walkthroughs with step-level screenshots uses a guided agent-browser session that executes an observe-and-continue loop, capturing per-step screenshots and trace data for visual QA. You simply select a mapping file to define the exploration scope, and the pipeline handles the capture automatically.

What is human-in-the-loop UI exploration and when do I need it for PR-driven reviews?

Human-in-the-loop UI exploration is a structured walkthrough process where a user guides browser interactions step-by-step to validate application features. You need it for PR-driven UI reviews when automated tests fail, requiring human validation to capture anomalies and generate reproducible trace artifacts.

Can I auto-generate flow YAML and markdown reports after a web application feature exploration session?

You can auto-generate flow YAML and dual markdown reports after web application feature exploration by stopping the agent-browser trace and running analysis. The pipeline outputs report.md and pr-summary.md alongside the flow YAML, consolidating step logs and anomaly correlations into actionable review artifacts.

Does agent-browser trace capture work with multi-site mapping discovery for cross-site scenarios?

Agent-browser trace capture works with multi-site mapping discovery by enforcing mapping selection to reliably locate pages and elements across different sites before exploration. This ensures cross-site scenarios maintain consistent trace analysis and step-log.json generation throughout the walkthrough.

What's the best way to handle authentication when recording a guided UI walkthrough?

The best way to handle authentication when recording a guided UI walkthrough is using the pipeline's built-in pre-flight checks, which support both auto and manual auth handling. This ensures the agent-browser session securely establishes access before starting the step-level screenshot capture.

Why does my visual QA walkthrough stop when an anomaly is detected during the observe-and-continue loop?

A visual QA walkthrough stops when an anomaly is detected because the observe-and-continue loop logs anomalies for trace analysis and triggers retry or debug flows. This mechanism ensures errors are captured with step-level screenshots before proceeding, maintaining reproducible artifact generation.