@jesdi/skills 0.0.32 → 0.0.33

package/README.md

@@ -144,11 +144,12 @@ them afterwards). `external-skills.json` lists them under `forks`.
 
 ### The box set
 
-`external-skills.json` → `sets.box` names the skills the agent-ops box
-receives: `own` from this package, `external` from the pinned upstream.
-`pr` is in the external set and is installed directly from mattpocock/skills.
-agent-ops vendors that set into its claude-home seed with its own refresh
-command; this repo's job is to publish the set and keep the pins resolvable.
+`external-skills.json` → `sets.box.external` names the third-party skills the
+agent-ops box receives from the pinned upstream. `pr` is in this set and is
+installed directly from mattpocock/skills. agent-ops-infra lists the own skills
+of the box (`provision/my-skills.json`) and pins the commit of this file it
+reads (`provision/external-skills.pin`); this repo's job is to publish the set
+and keep the pins resolvable.
 
 ## Authoring skills
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jesdi/skills",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "jesdi's agent skills (content package consumed by @jesdi/skills-cli)",
   "license": "MIT",
   "repository": {

package/skills/pr-visual-diff/SKILL.md

@@ -45,7 +45,7 @@ file as JSON:
 | `deviceProjects` | the config's `projects` (default to a desktop + a mobile project) |
 | `baseBranch` | the repo's default branch (`main`/`master`; `git symbolic-ref refs/remotes/origin/HEAD`) |
 | `packageManager` | infer from lockfile: `pnpm-lock.yaml`→pnpm, `package-lock.json`→npm, `yarn.lock`→yarn, `bun.lockb`→bun |
-| `spinnerSelector` | the app's loading-indicator selector (search for a spinner/`role="status"`/`aria-busy` component) |
+| `spinnerSelector` | every loading indicator of the app, as one selector list: spinners and skeletons (search for a spinner, `role="status"`, `aria-busy`, a skeleton component, `animate-pulse`), e.g. `.animate-spin, .animate-pulse`. A skeleton left out lets a half-loaded view pass as a good shot |
 
 ### Preconditions gate
 
@@ -77,6 +77,14 @@ compact report: the screenshot file names + pinned URLs, the PR-body
 markdown, and any views it flagged. The main context creates/edits the PR from
 that report — it never reads a PNG.
 
+## Where the capture runs
+
+- **Local** (the default): steps 3–5 below, on this machine.
+- **Remote**: when the session instructions say so (the agent-ops box does),
+  or when this machine cannot start a Playwright browser. A GitHub workflow of
+  the target repo captures both sides and pushes the hidden ref; see "Remote
+  capture". Steps 1, 2 and 6 stay the same.
+
 ## Workflow
 
 ### 1. Map the diff to views, then get the user's go-ahead
@@ -96,6 +104,10 @@ hidden ref on the remote and embed them in the PR. Include the proposed plan: wh
 device projects — default to the config's `deviceProjects`; add more only when
 the change is layout-sensitive. If they decline, create the PR normally and stop.
 
+In an unattended session (nobody answers questions, as on the agent-ops box),
+do not ask: run the capture with the plan above and name the plan in the PR
+body.
+
 ### 2. Write the capture spec
 
 Copy `references/capture-spec-template.ts` from this skill into
@@ -133,7 +145,10 @@ That assertion is a backstop, not a substitute for looking: the subagent still
 Reads each PNG after capture — an empty state, error toast, or wrong content
 passes the spinner check but is still wrong. On a genuine failure, fix the spec
 (add mock stubs, a wait for a stable element, or correct the spinner selector)
-rather than shipping a bad screenshot.
+rather than shipping a bad screenshot. A fixed element (a mobile bottom nav, a
+sticky header) is drawn where the viewport was, so in a full-page shot it can
+float over the middle of the page: give such a view `fullPage: false`, or one
+shot per scroll position.
 
 ### 4. Capture "before" (merge base, temp worktree)
 
@@ -239,6 +254,74 @@ cell instead of an image:
 | **Mobile** | _New view_ | ![](<blob-url>?raw=true) |
 ```
 
+## Remote capture
+
+Replaces steps 3–5. The subagent rule above still holds.
+
+The steps run in one shared workflow, `.github/workflows/pr-visual-diff.yml` of
+jesdi/general-skills. Each target repo has a short caller of it, made from
+`references/capture-caller.yml` of this skill, which follows the main branch
+of general-skills: GitHub starts `workflow_dispatch` only in the target repo.
+
+**Precondition.** The default branch of the target repo has the caller,
+`.github/workflows/pr-visual-diff.yml`:
+
+```bash
+REPO=$(gh repo view --json nameWithOwner -q .nameWithOwner)
+gh api "repos/$REPO/contents/.github/workflows/pr-visual-diff.yml" --silent
+```
+
+If it does not, take no screenshots. Say in the PR body that the repo has no
+pr-visual-diff workflow, and that `references/capture-caller.yml` of this
+skill, filled from the discovery cache and merged to the default branch, adds
+it. Do not add it in this PR: `workflow_dispatch` runs only from the default
+branch.
+
+**Dispatch.** Push the PR branch first: the workflow checks out commits of
+origin. Write the filled spec of step 2 to a file, and a second copy whose
+`VIEWS` holds only the views that exist at the merge base (none: no Before).
+Then:
+
+```bash
+HEAD_SHA=$(git rev-parse HEAD)
+BASE=$(git merge-base origin/<baseBranch> HEAD)
+SLUG=$(git branch --show-current | tr / -)
+CAPTURE="${HEAD_SHA:0:12}-$(date +%s)"
+gh workflow run pr-visual-diff.yml --ref <baseBranch> \
+  -f capture="$CAPTURE" -f slug="$SLUG" -f head="$HEAD_SHA" -f base="$BASE" \
+  -f after_spec="$(base64 < <after-spec> | tr -d '\n')" \
+  -f before_spec="$(base64 < <before-spec> | tr -d '\n')" \
+  -f projects="<deviceProject>,<deviceProject>"
+```
+
+Leave `before_spec` empty when every view is new. `gh workflow run` prints no
+run id: find the run by its name `pr-visual-diff $CAPTURE` (try for up to a
+minute), then wait for it:
+
+```bash
+RUN=$(gh run list --workflow pr-visual-diff.yml --limit 20 --json databaseId,displayTitle \
+  --jq ".[] | select(.displayTitle == \"pr-visual-diff $CAPTURE\") | .databaseId")
+gh run watch "$RUN" --exit-status
+```
+
+**A failed run.** Read `gh run view "$RUN" --log-failed | tail -80`. Fix the
+spec as in step 3 (a mock stub, a wait, the spinner selector) and dispatch
+once more with a new `CAPTURE`. When the second run fails too, take no
+screenshots and say why in the PR body.
+
+**Read the shots back.** Fetch the hidden ref and look at every PNG, as in
+step 3:
+
+```bash
+git fetch origin "refs/pr-screenshots/$SLUG/$CAPTURE"
+SHA=$(git rev-parse FETCH_HEAD)
+mkdir -p <scratchpad>/shots && git archive "$SHA" | tar -x -C <scratchpad>/shots
+```
+
+A wrong shot is a failed run: fix the spec and dispatch again, under the same
+limit. Then embed with step 6, with `$SHA` in the URLs. The ref stays: it keeps
+the images alive.
+
 ## Adding shots to an existing PR
 
 Same flow; the only differences: diff against the PR's base branch

package/skills/pr-visual-diff/references/capture-caller.yml

@@ -0,0 +1,56 @@
+# pr-visual-diff remote capture of this repo. Template of the pr-visual-diff
+# skill (references/capture-caller.yml): copy it to
+# .github/workflows/pr-visual-diff.yml, replace every __PVD_*__ marker with the
+# value of the discovery cache, and merge it to the default branch:
+# workflow_dispatch runs only from there. The steps live in jesdi/general-skills
+# (.github/workflows/pr-visual-diff.yml) and follow its main branch, like every
+# jesdi skill follows its latest release.
+
+name: pr-visual-diff
+run-name: pr-visual-diff ${{ inputs.capture }}
+
+on:
+  workflow_dispatch:
+    inputs:
+      capture:
+        description: 'Unique id of this capture; the last part of the hidden ref'
+        required: true
+      slug:
+        description: 'The PR branch with / as -'
+        required: true
+      head:
+        description: 'Commit captured as After'
+        required: true
+      base:
+        description: 'Commit captured as Before (the merge base)'
+        required: true
+      after_spec:
+        description: 'The filled capture spec, base64'
+        required: true
+      before_spec:
+        description: 'The filled capture spec of the views that exist at base, base64; empty: no Before'
+        required: false
+        default: ''
+      projects:
+        description: 'Playwright projects, separated by commas'
+        required: true
+
+jobs:
+  capture:
+    permissions:
+      contents: write  # only its publish job uses it, to push the hidden ref
+    uses: jesdi/general-skills/.github/workflows/pr-visual-diff.yml@main
+    with:
+      capture: ${{ inputs.capture }}
+      slug: ${{ inputs.slug }}
+      head: ${{ inputs.head }}
+      base: ${{ inputs.base }}
+      after_spec: ${{ inputs.after_spec }}
+      before_spec: ${{ inputs.before_spec }}
+      projects: ${{ inputs.projects }}
+      runner: __PVD_RUNNER__
+      frontend_dir: __PVD_FRONTEND_DIR__
+      specs_dir: __PVD_SPECS_DIR__
+      browsers: __PVD_BROWSERS__
+      node_version: '__PVD_NODE_VERSION__'
+      pnpm_version: '__PVD_PNPM_VERSION__'

package/skills/pr-visual-diff/references/capture-spec-template.ts

@@ -26,7 +26,7 @@ const OUT = process.env.PR_SHOT_DIR;
 const LABEL = process.env.PR_SHOT_LABEL ?? 'after';
 if (!OUT) throw new Error('PR_SHOT_DIR must be set to an absolute output directory');
 
-// Selector for this app's loading indicator. From config: <spinnerSelector>.
+// Every loading indicator of this app, spinners and skeletons. From config: <spinnerSelector>.
 const SPINNER = '__PVD_SPINNER_SELECTOR__';
 
 // Pin device-pixel-ratio to 1 for every project. Device descriptors (iPhone 14,

package/skills-manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-10-15T12:05:36.876Z",
+  "generatedAt": "2026-10-15T12:44:26.687Z",
   "skills": [
     {
       "name": "backlog",
@@ -52,8 +52,8 @@
     },
     {
       "name": "pr-visual-diff",
-      "version": "0.1.1",
-      "hash": "sha256-c90f308a7529ead883b4c379d034724a33da43e91f2d8ba0f2bdc5d79c894df2",
+      "version": "0.1.2",
+      "hash": "sha256-df10fb424564e7721856a88a9bafeeb077041244faa949711ff92d5490fb7854",
       "description": "Capture before/after screenshots of UI views with Playwright and embed them in a PR. Use this skill whenever creating or preparing a pull request that touches frontend code (components, views, styles, layout, Tailwind classes) — even if the user just says \"open a PR\" or \"create the PR\" after UI work, and especially if they mention screenshots, visual diff, before/after, or \"show what changed\". Also use when the user asks to add screenshots to an existing PR."
     },
     {