Menu
explore, reproduce, and verify Canvas Element behaviors manually via chrome-devtools-mcp, not in a playwright test.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Run, launch, screenshot, or drive the Bloom desktop app (Bloom.exe with embedded WebView2). Use when you need to start Bloom from this worktree, attach to a running Bloom, switch workspace tabs, take a screenshot, inspect DOM/console/network over CDP, or stop a Bloom instance.
Use when an agent needs to determine if Bloom is already running, detect whether the running Bloom came from a different worktree, kill Bloom or dotnet-watch parents, start Bloom from the current worktree, attach to the embedded WebView2 over CDP, inspect DOM/console/network, use dev-browser to inspect or run e2e tests against the actual exe instead of CURRENTPAGE.
build and run automated Playwright end-to-end tests for Canvas Tool behavior on CURRENTPAGE.
Use when an agent needs to edit or repair a Bloom book HTML file while preserving the strict Bloom.html schema used by Bloom Desktop.
Add or review localizable strings in Bloom XLF files
React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.
| name | bloom-canvas-tool-manual-testing |
| description | explore, reproduce, and verify Canvas Element behaviors manually via chrome-devtools-mcp, not in a playwright test. |
Use this skill when the user reports a regression involving Canvas Tool interactions (especially drag/drop from the toolbox onto the page) and asks you to reproduce and verify fixes using a browser.
This skill assumes:
.bloom-canvashttp://localhost:8089/bloom/CURRENTPAGEWhen testing or verifying a UI regression:
.../toolboxContent) and confirm the Canvas Tool tab is selected.page-memsim-...htm).bloom-canvas class.style.left/toptransform: scale(...)) can affect getBoundingClientRect() values; prefer consistent coordinate spaces when comparing.