1---
2name: playwright-visual-prototyping
3description: Prototype frontend changes by injecting browser-side JavaScript or CSS into a live page with Playwright, then capture screenshots before touching source code. Use when refining UI polish, testing layout ideas, validating DOM rearrangements, comparing responsive states, or when the local dev build is blocked and a safe live-page experiment is faster.
4---
5 
6# Playwright Visual Prototyping
7 
8Use this skill to test UI ideas directly in a browser session before writing permanent code.
9 
10This 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.
11 
12## Workflow
13 
141. Capture a baseline screenshot before changing anything.
152. Identify stable anchors on the page.
163. Inject CSS first for visual changes, then inject JavaScript only when structure must change.
174. Re-run screenshots at the viewports that matter.
185. Only after the prototype looks right, implement real source changes.
19 
20## Guardrails
21 
22- 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.
23- Prefer browser-side injection over editing app source during exploration. The point is to learn quickly before committing to code.
24- Prefer stable selectors, visible text, or temporary `data-*` attributes over brittle utility-class chains.
25- Prefer adding one injected `<style>` block for presentation and one injected script for DOM restructuring. Keep both small and easy to remove.
26- Treat screenshots as evidence. Show the baseline and the prototype when reporting back.
27 
28## Selection Strategy
29 
30Use the weakest selector that still stays reliable:
31 
32- Start from visible text, headings, labels, or landmark sections.
33- Add temporary `data-proto-*` attributes to matched nodes before styling them.
34- Style those temporary attributes instead of long existing class lists.
35- When the page is component-heavy, annotate the container once and style descendants under that container.
36 
37## Screenshot Passes
38 
39Run at least these passes when layout changes matter:
40 
41- Desktop: around `1440x2200` full-page.
42- Tablet or compact desktop: around `1024x1800`.
43- Mobile: around `390x1800` with `isMobile` and touch enabled when needed.
44 
45If 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.
46 
47## Quick Start
48 
49Capture a baseline:
50 
51```bash
52npm exec --yes --package=playwright -- \
53  node scripts/capture-with-injection.js \
54  --url https://forgedemy.org/skills \
55  --out /tmp/forgedemy-baseline.png \
56  --full-page
57```
58 
59Capture a browser-side prototype:
60 
61```bash
62npm exec --yes --package=playwright -- \
63  node scripts/capture-with-injection.js \
64  --url https://forgedemy.org/skills \
65  --script ./my-inject.js \
66  --out /tmp/forgedemy-prototype.png \
67  --width 1440 \
68  --height 2200 \
69  --full-page
70```
71 
72Use plain browser JavaScript in `my-inject.js`. Do not use Node APIs there. The file runs inside the page.
73 
74## Reporting Back
75 
76When presenting results:
77 
78- Say what changed visually.
79- Call out what worked and what still feels off.
80- Separate prototype-only hacks from the real source changes that should follow.
81- Include exact screenshot paths or attached images.
82 
83## Resources
84 
85- `scripts/capture-with-injection.js`: reusable Playwright runner for baseline and injected screenshots.
86- `references/injection-patterns.md`: selector, styling, and DOM-restructure patterns for safe experiments.
87 
88Read the reference file when you need example injection snippets or a concrete pattern for restructuring the page before screenshotting it.
89