skills.rest
Arize-ai
Arize-aiOFFICIAL
Explore all skills by this author →
Website𝕏@arizeaiGitHub

phoenix-pr-screenshot

Captures Phoenix UI screenshots and attaches them to GitHub pull requests.

11.3k|1.1k|Updated Nov 9, 2022
Search Tags:#screenshot#Frontend#Browser Automation#gitHub#Phoenix#gcs#Pull request
One-click install
npx skills add https://github.com/Arize-ai/phoenix --skill phoenix-pr-screenshot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: phoenix-pr-screenshot
Source: https://github.com/Arize-ai/phoenix/tree/main/.agents/skills/phoenix-pr-screenshot
Command: npx skills add https://github.com/Arize-ai/phoenix --skill phoenix-pr-screenshot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Documenting UI changes in pull requests requires manually building the frontend, running the app, taking screenshots, hosting the images, and editing the PR body. This Skill automates that entire workflow for the Phoenix project.

Core Features & Use Cases

  • End-to-end screenshot pipeline: Builds the React frontend with pnpm, starts the Phoenix server with custom environment variables, and captures screenshots via agent-browser.
  • Image hosting and PR integration: Uploads screenshots to a GCS bucket with PR-number-prefixed names and embeds them into the PR body using the gh CLI while preserving existing content.
  • Use Case: After implementing a new Playground feature, run this Skill to launch Phoenix, screenshot the feature in action, upload the images, and add a Screenshots section to the pull request automatically.

Quick Start

Take screenshots of the new playground feature running locally and attach them to pull request 11986.

Frequently Asked Questions about phoenix-pr-screenshot

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

FAQPage Schema
How do I add screenshots to a GitHub pull request automatically?▼

Capture screenshots of the running app, upload them to a public host such as a GCS bucket with gsutil, then embed the image URLs in the PR body using gh pr edit. Read the existing body first with gh pr view so prior content is preserved.

How do I screenshot a React app from the command line?▼

Use the agent-browser CLI to open the page, wait for networkidle plus a few seconds for React hydration, snapshot the DOM to get element refs, interact with elements, then run agent-browser screenshot to save a PNG file.

Why does the Phoenix page return 404 after starting the server?▼

The Phoenix backend serves the compiled frontend from its static directory, so routes like /playground return 404 until the React app is built. Run pnpm install and pnpm run build in the app directory before starting the server.

Why does Phoenix fail to start with database migration errors?▼

Migration errors occur when the working directory contains a database created by a newer version. Set PHOENIX_WORKING_DIR to a fresh temporary directory so Phoenix initializes a clean database on startup.

What tools are required to run this screenshot workflow?▼

The workflow requires the agent-browser CLI for browser automation, gsutil authenticated to the GCS assets bucket, the gh CLI authenticated to the repository, and pnpm plus uv for building and serving Phoenix.

Related Skills

Explore More Software Engineering Skills→
MS33834MS33834

Single-Flow PR Yeet

Stages, commits, pushes, and opens a GitHub pull request for a linear change.

Community
Advanced
awfixers-stuffawfixers-stuff

impl-review

Check out a pull request branch, apply reviewer feedback, and push changes.

Official
Advanced
aroidoaroido

Screenshot Automation

Automates application screenshots and creates GIFs via Playwright and ffmpeg.

Official
Intermediate
jeffpeckyjeffpecky

webapp-testing

Automate local web application testing with Playwright and Python.

Community
Intermediate