// Use browser tools to inspect rendering and troubleshoot website issues with the Maintainer.
| name | website-devtools |
| description | Use browser tools to inspect rendering and troubleshoot website issues with the Maintainer. |
Provide a repeatable way to use browser tools during website work to validate rendering, diagnose layout or CSS issues, and troubleshoot together with the Maintainer.
browser/* tools when diagnosing rendering, layout, or interaction issues.Use browser tools to:
- Inspect computed styles and layout for a problematic element
- Check console for errors
- Verify responsive behavior by simulating viewports
http://127.0.0.1:3000/website/dist/), then open the relevant page with browser/openBrowserPage.browser/readPage, browser/clickElement, browser/hoverElement, browser/typeInPage, browser/runPlaywrightCode, and screenshots as needed to inspect:
Minimum-requirements checklist for any change — code or docs-only. Run this before every PR creation or push to avoid CI failures on the first attempt.
Generate PNG screenshots for release notes using the repository's HtmlRenderer and ScreenshotGenerator tools. Use when asked to add screenshots to release notes or documentation.
Determine the next available issue number across all change types (feature, fix, workflow) by checking both local docs and remote branches, then reserve it by pushing an empty branch.
Convert the mermaid diagram in docs/agents.md to a blueprint-styled SVG for the website. Use when the workflow diagram in agents.md is updated and needs to be reflected on the website.
Run a focused accessibility pass for website changes (WCAG 2.1 AA-oriented).
Create and update interactive examples for the Eleventy website using page entrypoints and src/examples fragments.