Replace all hardcoded .dark class selectors with Tailwind v4's @variant dark
directive, which compiles to whatever strategy is configured in
@custom-variant dark. This means changing the dark mode strategy
(class, prefers-color-scheme, data-attribute, or combined) only requires
updating one line in globals.css — all dark mode variable overrides
and token styles follow automatically.
Changes:
- globals.css: update @custom-variant to (&:where(.dark, .dark *)) to
include the .dark element itself with zero specificity, replace
.dark {} block with @variant dark {}
- liveline.css: replace .dark .liveline-page {} with
@variant dark { .liveline-page {} }
- liveline-prism.css: replace 20+ .dark .token.* rules with a single
@variant dark {} block
Code blocks and chart placeholders now extend 36px beyond the 550px prose
column on each side via negative margins (.ll-bleed class). This aligns the
code text (after line numbers) flush with the prose left edge.
- --ll-bleed: 36px CSS variable (8px div padding + 28px line-number span)
- Responsive: bleed disabled below 650px viewport
- overflow-x-hidden on page wrapper prevents horizontal scroll
Inline script in <head> applies .dark class on <html> based on OS preference
and listens for live changes. All liveline page colors now use CSS variables
with dark overrides in .dark .liveline-page block.
- liveline.css: new vars (--ll-text-muted, --ll-text-hover, --ll-divider,
--ll-code-line-nr, --ll-btn-bg/shadow, --ll-fade-*) + full dark overrides
- liveline-prism.css: GitHub Dark syntax highlighting theme under .dark
- liveline.tsx: ~30 hardcoded rgba/hex colors replaced with CSS vars
- root.tsx: anti-FOUC script toggling .dark from prefers-color-scheme
Simplifies article content by extracting repeated patterns into
reusable components:
- Section: wraps Divider + SectionHeading + children
- List: styled ul with typography inline styles
- Li: styled li with correct padding
Article JSX now reads as clean declarative markup instead of
verbose inline-styled HTML.
Recreates the benji.org/liveline page in the website folder using React,
Tailwind, and the same editorial design system. Charts are replaced with
static SVG placeholders.
Typography:
- Inter variable font from rsms.me (same source as next/font)
- font-weight 475 body, 560 headings, font-optical-sizing: auto
- 14px body, 20px line-height, -0.09px letter-spacing
- Near-black text rgb(17,17,17), 40% opacity secondary
- Display P3 accent colors with @supports fallback
Layout:
- 550px narrow content column, fixed TOC sidebar
- Stagger-in entrance animation with cascading delays
- Fixed header fade gradient (multi-stop white-to-transparent)
- Scroll-spy TOC highlighting via IntersectionObserver
Code blocks:
- Prism.js syntax highlighting with GitHub-light color palette
- Line numbers column with 20px right padding
- 12px / 18px font size
Props tables, dividers, captions, code blocks, bullet lists all
styled to match the original computed values.
Fixes:
- Bug: page.screenshotWithAccessibilityLabels was called as method on page,
fixed to standalone function call
- Removed duplicate 'debugging playwriter issues' section at end of file
(identical to the detailed one earlier)
- Softened waitForTimeout rule: short waits (1-2s) now acknowledged as
acceptable for non-deterministic events like popups/animations
- Fixed download example path from /tmp/ to ./
- Added note that bare 'page' in examples is for brevity, real automation
should use state.myPage
- Consolidated diff behavior explanation to one place in snapshot section
(was repeated 3 times with slight inconsistencies)
- Trimmed redundant 'prefer snapshots' advice to reference the dedicated
'choosing between snapshot methods' section
- Consolidated cmd+click popup advice (was in both mistakes and common
patterns with duplicate examples)
- Cross-referenced iframe approaches: frameLocator for locator chaining,
contentFrame for Frame objects needed by snapshot()
- Clarified require is the only option in sandbox (ESM import unavailable)
The observe step now has an inner loop — if the page isn't ready (still
loading, wrong URL, expected content missing), the agent loops back to
observe again instead of acting on stale state. The ASCII diagram shows
the 'not ready' branch looping back to observe.
Every observe step in the example now prints page.url() before the
snapshot so the agent always knows the current URL. This catches
redirects and unexpected navigation between actions.
Add a 'computer use' section to skill.md showing how Playwriter covers all
actions from the Anthropic computer_20250124 tool and the Claude Chrome
extension's custom computer tool, using Playwright APIs instead of
screenshot-based coordinate clicking.
Each subsection shows the declarative locator-based approach first (preferred)
with coordinate-based fallback for canvas/maps/custom widgets.
Also adds docs/claude-extension-tools.json with all 16 tool schemas extracted
from the Claude Chrome extension v1.0.39 (minified source) for reference.
Add observe → act → observe feedback loop section with ASCII diagram
and Framer command palette example. Agents must take a snapshot after
every action to verify the result before proceeding.
Also change page creation pattern to reuse existing about:blank tabs
instead of always creating new ones, with a note to navigate immediately
in the same execute call to prevent concurrent agents from grabbing the
same tab.
When the Playwriter extension can't connect because Chrome isn't running,
agents now have platform-specific commands (macOS, Linux, Windows) to start
Chrome from the CLI. Also documents the --allowlisted-extension-id and
--auto-accept-this-tab-capture flags for enabling automatic tab capture
for screen recording without manual extension clicks.
Closes#48
Switch from getCDPSessionForPage (creates a new WS via Target.attachToTarget)
to getExistingCDPSessionForPage which reuses Playwright's internal CRSession.
This is critical for the relay server where Target.attachToTarget is intercepted
and cannot create real new sessions.
Also add FrameLocator support in accessibilitySnapshot — FrameLocator (from
locator.contentFrame()) is now auto-resolved to the real Frame object needed
for OOPIF CDP session attachment.
- New PlaywrightCDPSessionAdapter wrapping Playwright's CDPSession as ICDPSession
- New getExistingCDPSessionForPage() using context.getExistingCDPSession()
- resolveFrame() helper converts FrameLocator to Frame via elementHandle().contentFrame()
- getAriaSnapshot() frame param now accepts Frame | FrameLocator
- Executor CDP cache uses ICDPSession, borrowed sessions detach as no-op
- Test for getExistingCDPSession through the relay
- Updated framer iframe guide with alternative page.frames() example
- Bump playwright submodule to @xmorse/playwright-core@1.59.2
- Fix styles-api.md import path
- Consolidate build scripts into single build-client-bundles.ts
- Add @mozilla/readability for Firefox Reader View content extraction
- New getPageMarkdown() utility extracts main page content as plain text
- Supports search and diff-since-last-call like other utilities
- Add test with file snapshot
- Move skills/playwriter/SKILL.md to playwriter/src/skill.md (source of truth)
- Add 'playwriter skill' CLI command to output full docs
- Make skills/playwriter/SKILL.md a lightweight stub pointing to CLI
- Generate prompt.md to dist/ instead of src/
- Strip CLI-only content from MCP prompt
- Add build-resources.ts script to generate markdown API docs
- Resources now use https://playwriter.dev/resources/*.md URLs
- Output to both playwriter/dist/ and website/public/resources/
- Simplify mcp.ts resource handlers to read pre-built files
Tommy D. Rossi