Playwright Visual Prototyping

Use this skill to test UI ideas directly in a browser session before writing permanent code.

This workflow is for fast visual iteration: capture a baseline, inject browser-side changes with Playwright, screenshot the result, critique it, then translate the winning experiment back into source code.

Workflow

1. Capture a baseline screenshot before changing anything.
2. Identify stable anchors on the page.
3. Inject CSS first for visual changes, then inject JavaScript only when structure must change.
4. Re-run screenshots at the viewports that matter.
5. Only after the prototype looks right, implement real source changes.

Guardrails

• Prefer public or user-approved pages. Do not sign in, submit forms, start payments, or mutate production state unless the user explicitly asks for that.
• Prefer browser-side injection over editing app source during exploration. The point is to learn quickly before committing to code.
• Prefer stable selectors, visible text, or temporary data-* attributes over brittle utility-class chains.
• Prefer adding one injected <style> block for presentation and one injected script for DOM restructuring. Keep both small and easy to remove.
• Treat screenshots as evidence. Show the baseline and the prototype when reporting back.

Selection Strategy

Use the weakest selector that still stays reliable:

• Start from visible text, headings, labels, or landmark sections.
• Add temporary data-proto-* attributes to matched nodes before styling them.
• Style those temporary attributes instead of long existing class lists.
• When the page is component-heavy, annotate the container once and style descendants under that container.

Screenshot Passes

Run at least these passes when layout changes matter:

• Desktop: around 1440x2200 full-page.
• Tablet or compact desktop: around 1024x1800.
• Mobile: around 390x1800 with isMobile and touch enabled when needed.

If the page is long, do not rely on a single full-page image alone. Capture a full-page shot plus a targeted viewport around the area you changed.

Quick Start

Capture a baseline:

npm exec --yes --package=playwright -- \
  node scripts/capture-with-injection.js \
  --url https://forgedemy.org/skills \
  --out /tmp/forgedemy-baseline.png \
  --full-page

Capture a browser-side prototype:

npm exec --yes --package=playwright -- \
  node scripts/capture-with-injection.js \
  --url https://forgedemy.org/skills \
  --script ./my-inject.js \
  --out /tmp/forgedemy-prototype.png \
  --width 1440 \
  --height 2200 \
  --full-page

Use plain browser JavaScript in my-inject.js. Do not use Node APIs there. The file runs inside the page.

Reporting Back

When presenting results:

• Say what changed visually.
• Call out what worked and what still feels off.
• Separate prototype-only hacks from the real source changes that should follow.
• Include exact screenshot paths or attached images.

Resources

• scripts/capture-with-injection.js: reusable Playwright runner for baseline and injected screenshots.
• references/injection-patterns.md: selector, styling, and DOM-restructure patterns for safe experiments.

Read the reference file when you need example injection snippets or a concrete pattern for restructuring the page before screenshotting it.