references/rendering-pipeline.md

references/rendering-pipeline.md fix

@@ Step 3 — ToolSearch selector @@
	Load tools via ToolSearch:
-	select:...browser_wait_for
+	select:...browser_wait_for,browser_snapshot
@@ Step 3 — Screenshot procedure @@
	3. Wait for networkidle or 2000ms
-	4. Call browser_take_screenshot with target: ".card"
+	4. Call browser_snapshot → find .card → capture ref as $CARD_REF
+	5. Call browser_take_screenshot with target: $CARD_REF
+	ℹ Without snapshot, Playwright silently falls back to full-page

+5 -2

add browser_snapshot step — fixes full-page screenshot fallback in all 7 skills

Fixed a silent Playwright screenshot bug in the Claude Code social-media-tools plugin today.

Seven share skills were capturing full-page screenshots instead of cropping to the `.card` element — even though `target: ".card"` was correctly specified.

Root cause: Playwright's `browser_take_screenshot` requires an element `ref` from a prior `browser_snapshot`. Without it, the tool silently falls back to full-viewport capture — no error, no warning, just wrong output.

The fix: call `browser_snapshot` first, extract the `.card` ref, pass that ref as `target`. One change to a shared reference file fixed all 7 skills at once.

If you build Claude Code workflows with Playwright, check your screenshot steps — this pattern bites silently.

Follow for more Claude Code extension patterns and debugging breakdowns.

#ClaudeCode #Playwright #DeveloperTools

Twitter/X

Silent Playwright bug: browser_take_screenshot falls back to full-page when it can't resolve the target ref.

Fix: browser_snapshot first → grab the .card ref → pass it as target.

No error. Just wrong output. One step, 7 skills fixed.

Bluesky

Fixed a Playwright silent-fallback bug: browser_take_screenshot was capturing full pages because browser_snapshot hadn't been called first to get a DOM ref. One missing step. All 7 social card skills affected — now fixed in the shared rendering pipeline.

Substack

Today's fix was a small pipeline change with a wide blast radius.

All seven social card share skills were taking full-page screenshots instead of cropping to the card element. The `target: ".card"` CSS selector was there — it just wasn't resolving, silently.

Playwright's `browser_take_screenshot` needs a DOM `ref` from a prior `browser_snapshot`. Without it, the tool falls back to full viewport with no error or warning.

One snapshot step added to the shared pipeline reference. All seven skills fixed at once.

Follow for more Claude Code plugin patterns.