docs(skills): add pine-visual-test-pr visual regression skill

[QuintonJason]

What

Adds a pine-visual-test-pr Claude Code skill at .claude/skills/pine-visual-test-pr/SKILL.md — a self-iterating, Playwright-MCP visual-test harness for Pine PRs.

It's modeled on kajabi-products' kp-visual-test-pr, re-pointed at Pine's actual visual surface (Storybook) instead of Rails worktree servers.

How it works

1. Preflight — gh auth, root deps, libs/core scripts, Playwright MCP reachable.
2. PR scope — reduces the diff to changed libs/core/src/components/pds-* dirs.
3. Storybook up — build.stencil → start.storybook (:6006) → enumerate every story from /index.json (the Pine analog of worktree-server list; never guesses story IDs).
4. Capture plan — maps changed components → story IDs via each story file's title:, then builds a shot matrix.
5. Capture + evaluate loop — screenshots the chrome-free iframe.html?id=…&globals=theme:… across light/dark themes, viewports, and interactive states (hover/focus/open/disabled/error); self-evaluates each against embedded rules; retries harness failures (max 3), records genuine theme/focus/console/token problems as findings.
6. Report — posts a markdown report as a PR comment.

Optional before/after baseline mode (checkout base → rebuild Stencil → re-shoot the same matrix) labels each delta intended vs regression, gated behind a clean-tree confirmation.

Design notes

• Dark theme is mandatory — dark-mode/token regressions are Pine's most common and easiest-to-miss visual bug, so light+dark is always captured.
• Findings ≠ blockers — a broken theme, missing focus ring, or console error is the point of the run and is recorded as a finding, not retried away.
• Complements Chromatic — positions itself as the fast, local, pre-CI pass; Chromatic (@chromatic-com/storybook) remains the authoritative pixel-diff gate in CI.

Scope

Docs/tooling only — one new markdown skill file. No component, build, or runtime code touched.

---

Note

Low Risk
Single new markdown skill file with no changes to components, builds, or production runtime.

Overview
Adds a new Claude Code skill at .claude/skills/pine-visual-test-pr/SKILL.md that documents an end-to-end Playwright MCP visual regression workflow for Pine PRs (adapted from kajabi-products’ kp-visual-test-pr, but aimed at Storybook instead of app servers).

The skill defines a seven-phase runbook: environment preflight, PR/component scoping from gh pr diff, Stencil build + Storybook on :6006 with story IDs from /index.json, a capture matrix (light/dark, viewports, hover/focus/open states), optional base-branch baseline screenshots (with explicit git/Storybook cleanup around createComponent.tsx and port 6006), rule-based evaluation with retries vs findings, and a deduped gh pr comment report under .claude/visual-test-reports/.

It positions the harness as Pine’s current primary local pixel check until Chromatic CI merges, and links it to pine-design-review and pine-run-gauntlet. Docs/tooling only — no component, build, or runtime code changes.

^{Reviewed by Cursor Bugbot for commit ddf7b5d. Bugbot is set up for automated code reviews on this repo. Configure here.}

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	ddf7b5d
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6a7a3fddf985470008963978
😎 Deploy Preview	https://deploy-preview-788--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pixelflips]

Code review — 9 inline findings, see comments on the relevant lines.

[QuintonJason]

Thanks for the thorough review — all findings addressed in e83a33d.

pixelflips (9):

1. Chromatic present-tense CI gate — hedged everywhere (intro, when-to-use, Phase 4, Completion, anti-patterns, related-skills). Now states plainly that only the local @chromatic-com/storybook panel is merged and this skill is currently Pine's only pixel-level check until the CI job lands.
2. PR number never reaches gh pr diff — Phase 1 now resolves an explicit <number> and threads it through every gh pr diff/view call, with a note on the wrong-branch trap.
3. RTL axis half-wired — dropped it (removed from the axes and the URL template; report template no longer lists +rtl), with a note on how to add it as a full axis later.
4. Capture commands violate the absolute-path rule — all Phase 5 capture calls (Steps 3 & 4) and the interactive-state calls now use the absolute <REPORT_DIR> path; report template updated too.
5. createComponent.tsx is not "safe to discard" — corrected: it carries the hand-authored double-registration guard; git checkout -- is kept because it restores the committed (guarded) copy, and Phase 5b step 5 now re-runs it after the final rebuild (which re-strips the guard), with a git status clean-check. Added an anti-pattern against git add-ing the stripped version.
6. "restart" had no implementation — Phase 5b now has an explicit lsof -ti:6006 | xargs kill stop step before re-starting; Phase 2's "reuse the existing server" carves out the post-branch-switch case in both the prose and the error-handling table.
7. Report file never written but cat-read — Phase 6 step 1 now writes the filled report to $REPORT via the Write tool before posting.
8. No dedup guard on posting — added the once-per-PR guard (grep for the Posted by pine-visual-test-pr marker, skip unless asked), matching the pine-run-gauntlet pattern; the marker is now in the report template footer.
9. Double-quoted --body + missing --repo — posting now uses gh pr comment <number> --repo Kajabi/pine --body-file "$REPORT".

Cursor:

• Console check spans whole session (all: true) — already removed in a prior commit; the read is per-navigation.
• Per-navigation read misses the earlier theme — fixed: the console read now runs after each theme's navigation (inside the light/dark loop in Step 3, and again after interactions in Step 4), so both themes are judged rather than only the last one.

(This reply posted via --body-file — dogfooding fix #9.)

[QuintonJason]

Both re-review findings fixed in the latest commit:

• Cross-branch PR screenshots (High) — good catch; threading the number scoped the right files but capture still renders the checked-out tree. Phase 1 now has an explicit branch-match guard (git branch --show-current vs the PR's headRefName) that stops on mismatch and tells the user to check out the head branch first — it does not auto-switch.
• Stash can restore stripped guard (Medium) — reordered Phase 5b: reset the two build-generated files (git checkout --) before stashing any genuine WIP, so the stash can never snapshot the vendor-stripped createComponent.tsx and reintroduce it on pop.

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit e857714. Configure here.}

[QuintonJason]

Fixed in the latest commit. The clean check now applies to skill-induced changes only (the two generated files matching committed), and runs before restoring the step-3 stash. Restoring the user's WIP is done last and legitimately re-dirties the tree — that's expected and no longer treated as a failed clean check.

[pixelflips]

Thanks for addressing all the feedback. LGTM! 👍🏼