Menu
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.
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.
Modify the flagship visualizer runtime safely. Use when changing the shared runtime, loader, renderer, shell, controls, audio flows, capability checks, or canonical-route behavior.
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 | iterate-visualizer-ui |
| description | 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. |
Use this skill when you need fast visual feedback on workspace UI, shell chrome, toast, panels, controls, or CSS changes—without waiting for the full MilkDrop runtime to boot.
The current workflow (bun run dev + ?agent=true) is great for end-to-end preset behavior but slow for UI-only iteration. This skill provides:
bun run dev:ui
This launches a secondary Vite server at http://localhost:5174/ with:
src/js/frontend/* and assets/css/*http://localhost:5174/?component=WorkspaceLaunchPanel
Query parameters:
| Param | Default | Description |
|---|---|---|
component | WorkspaceLaunchPanel | Component to render |
props | {} | JSON-encoded props override |
grid | none | Comma-separated viewport widths (e.g. 375,768,1024,1920) |
src/js/frontend/workspace-ui.tsx)&grid=375,768,1024,1920 to see responsive behavior across breakpointsThe harness exposes mock wrappers for these components:
WorkspaceLaunchPanel — launch/shell chromeWorkspaceStagePanel — stage frame with ambient chromeWorkspaceToolSheet — browse/settings sheet panelWorkspaceToast — toast notificationsAdd more by editing src/js/frontend/ui-harness.tsx and updating COMPONENT_REGISTRY.
The harness provides default mocks for:
catalog (4 bundled presets with certification metadata)routeState (static URL state)presetPreviews (empty)recentYouTubeVideos (empty)Override via query params or edit the harness file directly.
Render the same component at multiple viewports simultaneously:
http://localhost:5174/?component=WorkspaceToolSheet&grid=375,768,1024,1920
Each viewport is rendered in its own bordered container with a width label.
When you're ready to test in the real app:
bun run dev
Open http://localhost:5173/?agent=true and verify the same component in context.
bun run dev:uihttp://localhost:5174/?component=WorkspaceLaunchPanel&grid=375,768,1024,1920src/js/frontend/workspace-ui.tsxbun run dev to verify in the full appbun run dev:uihttp://localhost:5174/?component=WorkspaceStagePanel&grid=375,768src/js/frontend/workspace-ui.tsx and assets/css/app-shell.cssbun run ui:diff
Captures all registered components at all breakpoints using Playwright and reports:
./screenshots/ui-diff/./screenshots/ui-diff/report.jsonRequires the UI harness server to be running on http://localhost:5174.
| Problem | Solution |
|---|---|
| Port 5174 in use | Kill other process or edit vite.config.ui.js |
| Components don't update | Check browser console for HMR errors; restart bun run dev:ui |
| Styles missing | Confirm assets/css/app-shell.css is imported in ui-harness.html |
| Full app looks different | The harness uses mocks; always verify in bun run dev before committing |
verify-visualizer-work — quick validation during implementationplay-visualizer — full browser verification with runtimetest-visualizer — run targeted tests and quality gate