Menu
Modify the flagship visualizer runtime safely. Use when changing the shared runtime, loader, renderer, shell, controls, audio flows, capability checks, or canonical-route behavior.
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
Auto-guardrail for agent-authored changes. Use at the start of any coding session to prevent the most common agent mistakes in this repo.
Iterate on visualizer UI, workspace chrome, and CSS with fast feedback loops. Use when changing frontend components, styling, layout, or animation without needing the full MilkDrop runtime.
Review changes to module loading, bootstrap, toy manifest, library resolution, or gamepad polling. Use when a PR touches src/js/bootstrap/, src/js/loader.ts, src/js/router.ts, src/js/toy-view.ts, src/data/toys.json, or gamepad polling code.
Review changes to renderer capability probing, fallback chains, timeout logic, or audio worklet initialization. Use when a PR touches src/js/core/renderer-*, src/js/core/audio-handler.ts, or src/js/milkdrop/runtime/backend-fallback.ts.
Review changes to WebGPU/WebGL dual-backend parity. Use when a PR touches feedback managers, renderer adapters, shader lowering, or any code that affects both WebGPU and WebGL rendering paths.
Review changes to React workspace UI state, URL routing, toast/panel behavior, or engine adapter interactions. Use when a PR touches src/js/frontend/*, especially App.tsx, workspace hooks, or url-state.ts.
| name | modify-visualizer-runtime |
| description | Modify the flagship visualizer runtime safely. Use when changing the shared runtime, loader, renderer, shell, controls, audio flows, capability checks, or canonical-route behavior. |
Use this skill when the request changes how the main visualizer product behaves, not when the work is mainly about preset content.
docs/DEVELOPMENT.mddocs/ARCHITECTURE.mddocs/MILKDROP_PRESET_RUNTIME.md when runtime changes touch preset executiondocs/PAGE_SPECIFICATIONS.md when shell or launch flow behavior changessrc/js/core/Treat toy=<slug> as a loader detail, not the product boundary.
Use the smallest useful check while iterating:
bun run test tests/path/to/spec.test.ts
Use browser-backed checks when runtime behavior depends on a real page or audio flow:
bun run test:integration
Before sign-off:
bun run check
If the change affects loading, controls, audio, or renderer behavior:
bun run dev
Open:
http://localhost:5173/?agent=true
Confirm the shell loads, audio entry still works, presets can start, and cleanup/navigation remain stable.