feat: add e2e-pr-assets skill

[JarrodMFlesch]

e2e-pr-assets

A skill that adds supporting before/after assets to your PR for you.

It’s intended for validating UX-impacting fixes and features where reviewers benefit from seeing the interaction outcome from a PR.

How to use

You can invoke this skill with your agent by running

• /e2e-pr-assets with Claude
• $e2e-pr-assets with Codex

Settings and defaults

Setting	Default	How to use it
GITHUB_BROWSER_PROFILE	/tmp/github-upload-profile	Set a custom signed-in GitHub browser profile path when you do not want to use the default temporary profile.
E2E_GITHUB_AUTO_LOGIN	1	Set E2E_GITHUB_AUTO_LOGIN=0 if you want upload/auth helpers to fail instead of opening the GitHub login flow for you.
E2E_GITHUB_AUTO_REMOVE_PROFILE	1	Set E2E_GITHUB_AUTO_REMOVE_PROFILE=0 to keep the browser profile after upload instead of removing it automatically.
E2E_GITHUB_FORCE_REMOVE_PROFILE	0	Set E2E_GITHUB_FORCE_REMOVE_PROFILE=1 only when you intentionally want cleanup to remove a non-/tmp browser profile path.
E2E_MEDIA_AUTO_CLEANUP	1	Set E2E_MEDIA_AUTO_CLEANUP=0 to keep `/tmp/payload-e2e-before
E2E_VIDEO_TRIM_START_SECONDS	1	Set this when you want a fixed initial trim during MP4 conversion instead of the default startup trim.
E2E_VIDEO_AUTO_SCENE_TRIM	1	Set E2E_VIDEO_AUTO_SCENE_TRIM=0 to disable scene-based trim adjustment and use only the fixed trim start.
E2E_VIDEO_SCENE_THRESHOLD	0.003	Set this when you need to make scene detection more or less sensitive during automatic opening-frame trimming.
E2E_VIDEO_SCENE_PREROLL_SECONDS	0.05	Set this when you want to keep more or less lead-in before the first detected meaningful scene.

Bash commands and outputs:

Help (--help)

e2e-pr-assets --help

Output

Usage:
  e2e-pr-assets --help
  e2e-pr-assets --configure KEY VALUE
  e2e-pr-assets --unset KEY
  e2e-pr-assets --show-config
  e2e-pr-assets --config-path

This command manages local defaults for the e2e-pr-assets helper scripts.
Environment variables still override config values for one-off runs.

---

Config path (--config-path)

$ e2e-pr-assets --config-path

Output

~/.config/e2e-pr-assets/config

---

Show config (--show-config)

$ e2e-pr-assets --show-config

Output

# Config file: ~/.config/e2e-pr-assets/config
#
# -------------------------------------------
# Instructions
# -------------------------------------------
#
# run `e2e-pr-assets --configure KEY VALUE`
# or update the config file manually
#
# -------------------------------------------
# Configurable keys
# -------------------------------------------
#
# GITHUB_BROWSER_PROFILE
# - Description: GitHub browser profile path
# - Default: '/tmp/github-upload-profile'
#
# -------------------------------------------
# Configured keys
# -------------------------------------------
#
# (none)

---

Configure (--configure)

$ e2e-pr-assets --configure E2E_MEDIA_AUTO_CLEANUP 0

Output

There is no output printed but the config file is updated with the value.

---

Unset (--unset)

e2e-pr-assets --unset KEY

Output

There is no output printed but the config key is removed.

Recording behavior

Recorded key and modifier overlays remain visible for 1.2 seconds, and the next visible interaction waits until the current overlay disappears.

video.waitForPage() waits for the source-page overlay before stitching a popup or new tab. The destination starts without the previous command by default; pass { replayLastOverlay: true } only when carrying that command forward is intentional.

Use cases

This skill has been used to generate before/after assets on these PRs:

• fix: preserve shared localized draft changes payload#17367
• fix(ui): improve dashboard widget edit controls payload#17359
• fix(ui): keep folder create drawers open during autosave payload#17421
• fix: prefer draft titles in by folder view payload#17412

[jacobsfletch]

Played around with this. Added a few extra prompts to my run that might be useful to others:

1. Use the cursor to visually circle areas of the screen that the user should focus their eyes, e.g. when an on-page element changes as a result of some user action. The circling action should be fast and tight (natural feeling). If circling a field, focus around the area of the component that contains the field's value.
2. Use real field inputs to narrate to the user what is currently being demonstrated, e.g. "I'm about to perform some action and expect some outcome". When entering text content, use natural typing behavior, e.g. don't simply paste the entire string in, otherwise the user has a hard time following along.
3. Do your best to not display narration text boxes overlaid on the screen, it takes the user's attention away from the core actions. Not a hard rule, just preference. For example, a narration box is probably more useful to declare a divergence in the user flow, e.g. unseen page navigation.

I can apply this to the skill if universally applicable.