1# Injection Patterns
2 
3Use plain browser JavaScript for injected files. The script runs inside the page after navigation, so there is no `require`, no filesystem access, and no Node globals.
4 
5## Minimal pattern
6 
7```js
8(() => {
9  const target = [...document.querySelectorAll("section")].find((node) =>
10    node.textContent.includes("Search when the task needs capability"),
11  );
12  if (!target) return;
13 
14  target.setAttribute("data-proto-section", "catalog");
15 
16  const style = document.createElement("style");
17  style.textContent = `
18    [data-proto-section="catalog"] {
19      border: 1px solid rgba(251, 146, 60, 0.24);
20      border-radius: 28px;
21      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
22    }
23  `;
24  document.head.appendChild(style);
25})();
26```
27 
28## Reliable selection
29 
30Use this order of preference:
31 
321. Visible headings, labels, and placeholder text.
332. Stable landmarks such as `main`, `header`, `section`, forms, or search inputs.
343. Temporary `data-proto-*` attributes that your injected script adds itself.
354. Existing class selectors only when the page offers nothing more stable.
36 
37## CSS-only changes
38 
39Prefer CSS injection when the experiment is purely visual:
40 
41- spacing
42- panel backgrounds
43- borders and shadows
44- typography scale
45- section emphasis
46- responsive layout tweaks
47 
48Inject one style tag instead of scattering many inline styles across nodes.
49 
50## DOM restructuring
51 
52Use JavaScript injection only when the layout must change structurally:
53 
54- reorder cards
55- wrap content in a new shell
56- move badges near headings
57- insert helper labels before inputs
58 
59Keep DOM edits idempotent. If the script runs twice, it should not duplicate badges, wrappers, or style tags.
60 
61## Review loop
62 
631. Capture a baseline screenshot.
642. Inject the smallest experiment that answers the current design question.
653. Capture the prototype at desktop and mobile widths.
664. Write down what improved, what regressed, and what should become a real code change.
67 
68## Worked example
69 
70On `https://forgedemy.org/skills`, a good first pass was:
71 
72- strengthen the hero with a larger shell and sharper headline scale
73- frame the catalog section as the main action zone
74- give cards more separation and a stronger top accent
75- add a small search caption above the input to clarify the intended flow
76 
77That experiment was achieved entirely by annotating sections with `data-proto-*` attributes, injecting one style block, and screenshotting the result without touching app source.
78