rust_browser/.claude/commands/investigate.md at pre-auto-claude

Files

Zachary D. Rowitsch f2ac91cfe6 Add URL support to --render CLI mode

The render mode previously only accepted file paths, requiring the
investigate command to use curl as a workaround (which broke relative
CSS/image resolution). Now --render accepts URLs directly via
BrowserUrl::parse + NetworkStack::load_sync, using the correct base URL
for resource resolution. The investigate command is simplified to a
single --render call.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-16 23:23:46 -05:00

3.1 KiB

Raw Permalink Blame History

Investigate rendering issues for the website at: $ARGUMENTS

Follow these steps:

Step 1: Render the page

Run the rendering pipeline directly with the URL to generate layout tree dump, display list dump, and a PNG screenshot:

rm -rf /tmp/rb-investigate && mkdir -p /tmp/rb-investigate
cargo run -p app_browser -- --render "$URL" --output-dir /tmp/rb-investigate --png

Then list the output directory to discover the stem used for output files:

ls /tmp/rb-investigate/

Step 2: Gather all artifacts

Read all of these files (using the stem discovered above):

/tmp/rb-investigate/{stem}.html — the raw HTML/CSS source
/tmp/rb-investigate/{stem}.layout.txt — the layout tree dump
/tmp/rb-investigate/{stem}.dl.txt — the display list dump
/tmp/rb-investigate/{stem}.png — the rendered screenshot

Step 3: Analyze for rendering bugs

Carefully analyze the HTML/CSS source, layout tree, display list, and screenshot together. Look for the following categories of issues:

Missing or unsupported CSS properties

Identify CSS properties used in the page's stylesheets or inline styles that the engine may not support
Check for modern CSS features (grid, custom properties, transforms, animations, transitions, etc.)
Note any @-rules that may be ignored (e.g., @font-face, @keyframes, @supports)

Layout issues

Elements with zero width or height that shouldn't be (collapsed boxes)
Content overflowing its container when it shouldn't
Incorrect stacking or overlapping elements
Missing or incorrect margins, padding, or borders
Inline elements not wrapping properly
Flex/grid children not positioned correctly
Floats not clearing or wrapping around properly
Absolutely/fixed positioned elements in wrong locations

Display list issues

Missing text that should be visible
Missing backgrounds or borders
Incorrect colors or font sizes
Clipping regions that may be cutting off content
Z-ordering issues (elements painted in wrong order)

HTML parsing issues

Elements that may not be in the correct DOM position
Missing implicit elements (html, head, body)
Incorrectly nested elements

Image issues

Images that failed to load or decode
Images with incorrect dimensions

Step 4: Produce findings report

Output a structured report with:

Page summary: What the page is trying to render (brief description)
Screenshot assessment: What the rendered output looks like vs what it should look like
Findings: An ordered list of bugs/issues, each with:
- Category: (CSS Support | Layout | Display | Parsing | Image | Other)
- Severity: (High | Medium | Low) — based on visual impact
- Description: What's wrong
- Evidence: Specific lines from the layout dump, display list, or CSS that demonstrate the issue
- Suggested fix: Which crate/module would need changes and a brief description of what to implement
Summary stats: Count of issues by severity

Focus on actionable findings that would improve rendering fidelity. Don't report issues with JavaScript-dependent content (we don't execute JS).

3.1 KiB Raw Permalink Blame History