playwriter
Code Issues

website: user-centered copy rewrite, fix image layout shift, replace HTML entities

Browse Source 
- Rewrite landing page copy to focus on user needs: agent controlling
  your browser, low context usage, unrestricted capabilities, collaboration
- Add Collaboration section (captchas, consent walls, getting agent unstuck)
- Replace HTML entities (— ' –) with JS string expressions
- Add width/height to screenshot image to prevent layout shift
- Add no-layout-shift requirement to AGENTS.md
This commit is contained in:
Tommy D. Rossi
2026-02-20 23:25:48 +01:00
parent 5c1ef5d332
commit 8871a3f36f
2 changed files with 110 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/AGENTS.md
+10
View File
@@ -49,6 +49,16 @@ If you create a new CSS file that needs `@variant dark`, add it as a CSS `@impor
For files with many dark mode selectors (like prism syntax colors), define CSS variables in `:root { @variant dark { ... } }` and reference them in selectors. This avoids repeating `@variant dark` in every rule.
## Images must not cause layout shift
Every `<img>` must have explicit `width` and `height` attributes matching the intrinsic pixel dimensions of the source file. Add `style={{ height: "auto" }}` to keep it responsive. This lets the browser reserve the correct aspect ratio space before the image loads, preventing layout shift.
```tsx
<img src="/photo.png" width={1280} height={800} style={{ maxWidth: "100%", height: "auto" }} />
```
Use `sips -g pixelWidth -g pixelHeight <file>` to get dimensions on macOS.
## No localStorage dark mode toggle
There is no JS-based `.dark` class toggle. Do not add inline scripts to toggle `.dark` on `<html>`. The site follows the OS preference only via `prefers-color-scheme`.