record-browser - SKILL.md Agent Skill

name: record-browser description: > Launch a headed Chrome browser with built-in recording and annotation tools. Record user workflows with a glassmorphism toolbar, draw annotations (lines, arrows, rectangles, circles, freehand, text) directly on the page using fabric.js, and save WebM recordings for analysis with vision-replay. Annotations are captured in the video automatically. Use when you need to record browser interactions, annotate UI elements for AI analysis, test UI flows, or capture animations. argument-hint: "[url]" allowed-tools: - Bash - Read - Glob - Grep

**Browser recording pipeline:** install deps → launch browser (optional URL, defaults to welcome page) → user navigates and records → annotations via draw mode → stop → save/review dialog → ask user what to do next.

This skill works both standalone and chained with vision-replay. After saving a recording, use the question templates in references/question-templates.md to ask the user whether they want to analyze the recording or keep it as an artifact.

The browser includes a glassmorphism toolbar with recording controls and a full annotation toolset powered by fabric.js. All annotations are drawn on a canvas overlay and captured in the recording via the Chrome compositor output — no post-processing required.

Dependency location: Chrome for Testing is installed to ${CLAUDE_PLUGIN_ROOT}/.deps/browsers/. No npm packages required — the recorder uses raw Chrome DevTools Protocol over WebSocket (Node 22+ built-in).

Vendored library: fabric.js is vendored at ${CLAUDE_PLUGIN_ROOT}/skills/record-browser/vendor/fabric.min.js. Loaded into the page via CDP Runtime.evaluate — no CDN, no npm install at runtime.

Script location: All scripts live at ${CLAUDE_PLUGIN_ROOT}/skills/record-browser/scripts/. Define this once:

SCRIPTS_DIR="${CLAUDE_PLUGIN_ROOT}/skills/record-browser/scripts"

Then run scripts as: bash "$SCRIPTS_DIR/<script-name>.sh" <args>

Node.js (v22+) must be available. No npm packages required.

Chrome for Testing is downloaded once by install-browser.sh (~150MB) to ${CLAUDE_PLUGIN_ROOT}/.deps/browsers/. If Chrome is missing, launch-recorder.sh exits with a clear error — run install-browser.sh then retry.

Platform support: macOS and Linux work out of the box. Windows requires WSL2 with WSLg (Windows 11) or an X server.

**Step 1: Launch browser with recording**

CRITICAL: Do NOT check for dependencies manually (no ls, no directory checks). Just run the launch script directly — it validates Chrome internally and exits with a clear error if missing.

CRITICAL: Do NOT ask the user for a URL. If the user provided a URL in the skill argument, pass it. If not, omit it — the script defaults to the bundled welcome page automatically.

SCRIPTS_DIR="${CLAUDE_PLUGIN_ROOT}/skills/record-browser/scripts"
bash "$SCRIPTS_DIR/launch-recorder.sh" "[url]"

If launch-recorder.sh fails with "Chrome for Testing not installed":

bash "$SCRIPTS_DIR/install-browser.sh"
bash "$SCRIPTS_DIR/launch-recorder.sh" "[url]"

Step 2: User records and annotates

The user interacts with the browser toolbar to record, pause, draw annotations, and stop. See <recording_controls>, <annotation_tools>, and <keyboard_shortcuts> for the full control reference.

Step 3: Save via post-recording dialog

When the user clicks Stop, a post-recording dialog appears with:

Video playback (native controls, fullscreen and download buttons suppressed, plus an Expand button that opens a detached fullscreen overlay)
An editable filename (auto-generated as YYYY-MM-DD_domain-path.webm)
Three action buttons:
Save & Close — saves the recording to disk and closes the browser. The saved WebM path is printed to stdout (HELIX_SAVED=<path>) so the agent can continue the workflow.
Start Over — discards the recording and returns to idle for a new recording.
Close — discards the recording without saving (HELIX_NO_SAVE is printed to stdout) and closes the browser.

Step 4: Ask user what to do next — MANDATORY STOP

Check stdout for the session outcome:

HELIX_SAVED=<path> — user saved the recording. Continue with the options below.
HELIX_NO_SAVE — user chose to close without saving. Acknowledge and stop — no further action needed.
HELIX_SESSION_END without either marker — browser was closed directly (X button). Acknowledge and stop.

If the recording was saved, parse the file path from HELIX_SAVED=<path>. Then:

CRITICAL: PRINT the saved file path to the user FIRST. Then call AskUserQuestion using Template 1 from references/question-templates.md. AskUserQuestion must be the ONLY tool call in this response — no Read, Bash, Glob, or any other tool alongside it. Wait for the user's actual response — do NOT auto-answer, assume defaults, or skip the question. If AskUserQuestion returns empty or no response (60-second timeout), inform the user the question timed out and re-ask.

User chose Keep as artifact → report the saved file path and stop.
User chose Analyze with Vision Replay → continue to Step 5.

Step 5: Ask preparation method (only if user chose to analyze)

Call AskUserQuestion using Template 2 from references/question-templates.md. AskUserQuestion must be the ONLY tool call. WAIT for the user's response. If AskUserQuestion returns empty or no response (60-second timeout), inform the user the question timed out and re-ask.

User chose Full pipeline → continue to Step 6 with full preprocessing.
User chose Raw video → skip directly to vision-replay analysis (no dedupe/normalize).

Step 6: Ask analysis mode

Call AskUserQuestion using Template 3 from references/question-templates.md. AskUserQuestion must be the ONLY tool call. WAIT for the user's response. Do NOT auto-select an analysis mode. If AskUserQuestion returns empty or no response (60-second timeout), inform the user the question timed out and re-ask.

After the user responds, run the vision-replay pipeline:

VR_SCRIPTS="${CLAUDE_PLUGIN_ROOT}/skills/vision-replay/scripts"
VIDEO_PATH="<path-from-HELIX_SAVED>"

# Get video info
bash "$VR_SCRIPTS/video-info.sh" "$VIDEO_PATH"

# If "Full pipeline" was chosen:
WORK_DIR="/tmp/claude-video-frames/$(date +%s)"
mkdir -p "$WORK_DIR"

# Normalize (downscale + timestamp overlay)
bash "$VR_SCRIPTS/normalize-video.sh" "$VIDEO_PATH" "$WORK_DIR/normalized.mp4"

# Remove static frames (threshold depends on analysis mode chosen in Template 3)
# Workflow Review → 15, Page Load → 3, Animation → 1
bash "$VR_SCRIPTS/dedupe-video.sh" "$WORK_DIR/normalized.mp4" "$WORK_DIR/deduped.mp4" <THRESHOLD>

# Generate contact sheet
bash "$VR_SCRIPTS/contact-sheet.sh" "$WORK_DIR/deduped.mp4" "$WORK_DIR/contact-sheet.png"

# Extract frames (method depends on analysis mode chosen in Template 3)
# Workflow Review → extract-frames.sh at 2fps
# Animation → extract-frames.sh at 10fps
# Page Load → extract-progressive.sh (variable fps)
bash "$VR_SCRIPTS/extract-frames.sh" "$WORK_DIR/deduped.mp4" "$WORK_DIR/frames" <FPS>
# OR for Page Load:
# bash "$VR_SCRIPTS/extract-progressive.sh" "$WORK_DIR/deduped.mp4" "$WORK_DIR/frames"

The vision-replay analysis workflows are annotation-aware and will prioritize annotated areas.

Step 7: Post-analysis cleanup — MANDATORY STOP

After vision-replay analysis is complete, call AskUserQuestion using Template 4 from references/question-templates.md. AskUserQuestion must be the ONLY tool call. WAIT for the user's response before deleting anything. If AskUserQuestion returns empty or no response (60-second timeout), inform the user the question timed out and re-ask.

# Clean up extracted frames and work directory
bash "$VR_SCRIPTS/cleanup.sh" "$WORK_DIR/frames"
rm -rf "$WORK_DIR"

# Optionally delete the source recording (only if user chose "Delete recording")
# rm -f "$VIDEO_PATH"

Script	Purpose	Key Args
install-browser.sh	One-time setup: downloads Chrome for Testing	None
launch-recorder.sh	Opens headed Chrome with recording toolbar	`[url] [output-path] [viewport]`
stop-recorder.sh	Sends SIGTERM to the recorder — triggers graceful Chrome shutdown (bypasses save dialog, emergency exit only)	None
recorder.js	Node.js controller (raw CDP, getDisplayMedia capture, annotations)	`<url> <output-path> <chrome-path> [viewport]`
cdp.js	Raw Chrome DevTools Protocol WebSocket client (zero deps)	Used by recorder.js

Bundled pages: pages/welcome.html is the default landing page (shown when no URL is provided). pages/playground.html is a built-in test page with interactive elements for verifying annotation tools.

All scripts use set -euo pipefail and validate inputs. Run via: bash "$SCRIPTS_DIR/<name>.sh"

The browser toolbar provides these controls, organized by recording state:

Pre-recording (idle state):

Control	Action
Record	Begin recording with a 3-second countdown
On Action	Arm the action interceptor — recording starts on the user's next click

During recording:

Control	Action
Timer	Shows elapsed recording time with pulsing red dot
Pause	Pause the recording
Stop	Stop recording, open post-recording dialog
Restart	Discard current recording, reset to idle state

Draw mode (toggle via Draw button while recording):

Control	Action
Select	Click to select, move, resize, or delete existing annotations
Pen	Freehand drawing tool
Line	Click-drag line with configurable arrowheads
Rectangle	Click-drag rectangle outline
Circle	Click-drag ellipse outline
Text	Click to place editable text

Colors:

Button	Color	Hex
Red	Red	`#ff3b30`
Yellow	Yellow	`#ffd60a`
Blue	Blue	`#007aff`
Green	Green	`#30d158`
White	White	`#ffffff`

Stroke width (visible in draw mode):

Button	Width
1	1px thin stroke
2	2px light stroke
3	3px default stroke
5	5px bold stroke

Fill toggle (visible for shapes and text):

Control	Action
Fill	For shapes: toggle 25%-opacity fill using the current stroke color. For text: toggle dark semi-transparent background (same as BG).

Arrowhead options (visible for Line tool or selected lines):

Control	Action
Line	No arrowheads (plain line)
Arrow →	Arrowhead at end only
← Arrow	Arrowhead at start only
← →	Arrowheads at both ends

Actions:

Control	Action
Undo	Remove last drawn annotation
Delete	Delete the currently selected annotation
Clear	Remove all annotations

Text formatting (visible when Text tool is active or text is selected):

Control	Action
S / M / L / XL	Font size: 14px / 18px / 28px / 40px
BG	Toggle semi-transparent dark background behind text
BD	Toggle box border around the textbox (mirrors font color, drawn via canvas overlay)

Controls are injected via CDP Page.addScriptToEvaluateOnNewDocument and communicate with the Node.js controller via CDP Runtime.addBinding. fabric.js is re-injected on every Page.frameNavigated event via Runtime.evaluate.

All shortcuts are suppressed when the user is focused on ``, `

`, `contenteditable`, or fabric.js `IText` editing mode.

<table>
<thead>
<tr>
<th>Shortcut</th>
<th>Action</th>
</tr>
</thead>
<tbody><tr>
<td>Space</td>
<td>Pause / Resume recording</td>
</tr>
<tr>
<td>Escape</td>
<td>Exit draw mode (return to page interaction)</td>
</tr>
<tr>
<td>D</td>
<td>Toggle draw mode on/off</td>
</tr>
<tr>
<td>Ctrl/Cmd+Z</td>
<td>Undo last annotation</td>
</tr>
<tr>
<td>C</td>
<td>Clear all annotations (draw mode only)</td>
</tr>
<tr>
<td>1</td>
<td>Quick-switch color: Red</td>
</tr>
<tr>
<td>2</td>
<td>Quick-switch color: Yellow</td>
</tr>
<tr>
<td>3</td>
<td>Quick-switch color: Blue</td>
</tr>
<tr>
<td>4</td>
<td>Quick-switch color: Green</td>
</tr>
<tr>
<td>Delete/Backspace</td>
<td>Delete selected annotation</td>
</tr>
<tr>
<td>Shift / ⌘ / Ctrl</td>
<td>Constrain shape to 1:1 ratio (hold while drawing or resizing rect/circle)</td>
</tr>
<tr>
<td>⌘/Ctrl+Click</td>
<td>Multi-select annotations (select mode only)</td>
</tr>
<tr>
<td></keyboard_shortcuts></td>
<td></td>
</tr>
</tbody></table>
<annotation_tools>
Annotations are powered by fabric.js on a full-viewport canvas overlay.

<p><strong>Canvas overlay:</strong></p>
<ul>
<li><code>position: fixed</code>, covers the full viewport</li>
<li><code>z-index: 2147483646</code> (one below the toolbar at <code>2147483647</code>)</li>
<li>Default: <code>pointer-events: none</code> — clicks pass through to the page</li>
<li>Draw mode: <code>pointer-events: auto</code> — canvas intercepts mouse events for drawing</li>
<li>Annotations persist until the user clicks Undo or Clear</li>
<li><strong>Page-pinned: annotations scroll with the page content</strong> (synced via viewportTransform)</li>
<li>SPA navigation clears annotations automatically (URL change detection via polling)</li>
<li>Full page navigation resets the canvas (evaluateOnNewDocument re-runs)</li>
</ul>
<p><strong>Tool behaviors:</strong></p>
<table>
<thead>
<tr>
<th>Tool</th>
<th>Behavior</th>
</tr>
</thead>
<tbody><tr>
<td>Select</td>
<td>Switch to selection mode — click annotations to select, drag to move, resize via handles. Right-click for context menu with Delete option. Selecting an object syncs stroke width, fill, and arrowhead state to the toolbar.</td>
</tr>
<tr>
<td>Pen</td>
<td>Freehand drawing via <code>canvas.isDrawingMode</code> with <code>PencilBrush</code>. Respects current stroke width.</td>
</tr>
<tr>
<td>Line</td>
<td>Click-drag creates a line with configurable arrowheads (none, start, end, both). Arrowhead options appear contextually.</td>
</tr>
<tr>
<td>Rectangle</td>
<td>Click-drag creates a <code>fabric.Rect</code> with configurable fill and stroke. <code>strokeUniform: true</code>.</td>
</tr>
<tr>
<td>Circle</td>
<td>Click-drag creates a <code>fabric.Ellipse</code> with configurable fill and stroke. <code>strokeUniform: true</code>.</td>
</tr>
<tr>
<td>Text</td>
<td>Click to place a <code>fabric.IText</code> — type to enter text, double-click to re-edit. Supports BG fill and BD border.</td>
</tr>
</tbody></table>
<p><strong>Object manipulation:</strong></p>
<table>
<thead>
<tr>
<th>Action</th>
<th>How</th>
</tr>
</thead>
<tbody><tr>
<td>Select</td>
<td>Switch to Select tool, then click an annotation (blue handles appear)</td>
</tr>
<tr>
<td>Move</td>
<td>Drag a selected annotation to reposition</td>
</tr>
<tr>
<td>Resize</td>
<td>Drag corner/edge handles</td>
</tr>
<tr>
<td>Delete</td>
<td>Press Delete/Backspace, click trash button, or right-click → Delete</td>
</tr>
<tr>
<td>Undo</td>
<td>Remove the last-added object from the canvas</td>
</tr>
<tr>
<td>Clear</td>
<td>Remove all objects</td>
</tr>
</tbody></table>
<p>Annotations are captured in the recording automatically because <code>getDisplayMedia</code> captures the Chrome compositor output — everything rendered on screen, including injected DOM elements and the fabric.js canvas.
</annotation_tools></p>
<recording_modes>
**Manual Record:**

<ol>
<li>User clicks <strong>Record</strong></li>
<li>Tab capture stream is acquired (brief auto-accepted picker flash)</li>
<li>Full-screen countdown overlay (3... 2... 1...) — shown before recording starts, not captured</li>
<li>MediaRecorder starts, timer ticks, red dot pulses</li>
<li>Brief "Recording" HUD overlay</li>
<li>User navigates, interacts, and annotates freely</li>
<li>User clicks <strong>Stop</strong> to end</li>
</ol>
<p><strong>Record on Action:</strong></p>
<ol>
<li>User clicks <strong>On Action</strong></li>
<li>Toolbar shows "Ready..." with amber indicator — recording has NOT started yet</li>
<li>A transparent click-interceptor overlay is placed over the page</li>
<li>User clicks anywhere on the page (a button, link, etc.)</li>
<li>The interceptor captures the click coordinates and target element</li>
<li>Interceptor is removed</li>
<li>Tab capture + MediaRecorder starts immediately</li>
<li>The original click is replayed programmatically via <code>dispatchEvent</code> to the underlying element</li>
<li>The action and its result are captured from the very first frame</li>
<li>Recording continues — user can navigate, interact, and annotate</li>
</ol>
<p>Record on Action ensures the first recorded frame is the actual user action — no static pre-recording frames to waste compute or tokens during analysis. For navigation triggers (page refresh, link click), the click-and-replay approach ensures recording is rolling before the new page loads.
</recording_modes></p>
<known_issues>
**Chrome closure crash dialog:** Chrome for Testing v146 may show a "quit unexpectedly" dialog when the browser is closed. This is cosmetic — it does not affect recording, video saving, or the workflow. A fix is planned.
</known_issues>

<error_handling>
For error recovery patterns (Chrome launch failures, recording errors, save failures, AskUserQuestion timeouts, vision-replay script failures), consult `examples/error-handling.md`.
</error_handling>
 </article> </div>  <div class="w-full lg:w-80 shrink-0 flex flex-col gap-6" data-astro-cid-7zzsworf>  <div class="p-6 rounded-xl bg-surface-container border border-border/80 flex flex-col gap-4 shadow-sm" data-astro-cid-7zzsworf> <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant/60 font-mono" data-astro-cid-7zzsworf>Install via CLI</span> <div class="flex flex-col gap-2" data-astro-cid-7zzsworf> <div id="detail-install-cmd" class="font-mono text-[11px] p-3 rounded-lg bg-black/40 border border-border select-all break-all text-primary font-bold leading-relaxed" data-astro-cid-7zzsworf>
npx skills add https://github.com/mrrobertkent/helixlab-plugin --skill record-browser </div> <button id="detail-copy-btn" class="w-full py-2.5 rounded-lg bg-primary hover:bg-primary-hover text-on-primary font-sans font-bold text-sm shadow transition-all active:scale-95 flex items-center justify-center gap-1.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px]" data-astro-cid-7zzsworf>content_copy</span> <span data-astro-cid-7zzsworf>Copy Command</span> </button> </div> </div>  <div class="p-6 rounded-xl bg-surface-container border border-border/80 flex flex-col gap-4 shadow-sm text-on-surface" data-astro-cid-7zzsworf> <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant/60 font-sans" data-astro-cid-7zzsworf>Repository Details</span> <div class="flex flex-col gap-3.5" data-astro-cid-7zzsworf> <div class="flex justify-between items-center text-sm" data-astro-cid-7zzsworf> <span class="text-on-surface-variant/70 flex items-center gap-1.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px] text-on-surface-variant/60" data-astro-cid-7zzsworf>star</span> Stars
</span> <span class="font-mono font-bold text-on-surface" data-astro-cid-7zzsworf>0</span> </div> <div class="flex justify-between items-center text-sm" data-astro-cid-7zzsworf> <span class="text-on-surface-variant/70 flex items-center gap-1.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px] text-on-surface-variant/60" data-astro-cid-7zzsworf>call_split</span> Forks
</span> <span class="font-mono font-bold text-on-surface" data-astro-cid-7zzsworf>0</span> </div> <div class="flex justify-between items-center text-sm" data-astro-cid-7zzsworf> <span class="text-on-surface-variant/70 flex items-center gap-1.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px] text-on-surface-variant/60" data-astro-cid-7zzsworf>navigation</span> Branch
</span> <span class="font-mono bg-surface border border-border px-2 py-0.5 rounded text-[11px] text-on-surface-variant" data-astro-cid-7zzsworf>main</span> </div> <div class="flex justify-between items-start text-sm" data-astro-cid-7zzsworf> <span class="text-on-surface-variant/70 flex items-center gap-1.5 mt-0.5" data-astro-cid-7zzsworf> <span class="material-symbols-outlined text-[16px] text-on-surface-variant/60" data-astro-cid-7zzsworf>article</span> Path
</span> <span class="font-mono bg-surface border border-border px-2 py-0.5 rounded text-[11px] text-on-surface-variant truncate max-w-[150px]" title="SKILL.md" data-astro-cid-7zzsworf>SKILL.md</span> </div> </div> </div>    <div class="p-6 rounded-xl bg-surface-container border border-border/80 flex flex-col gap-3 shadow-sm" data-astro-cid-7zzsworf> <span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant/60 font-sans" data-astro-cid-7zzsworf>More from Creator</span> <div class="flex items-center gap-2" data-astro-cid-7zzsworf> <img class="w-8 h-8 rounded-full border border-border" src="https://avatars.githubusercontent.com/u/61638738?v=4" alt="mrrobertkent" onerror="this.src='https://avatars.githubusercontent.com/u/9919?v=4'" data-astro-cid-7zzsworf> <div class="flex flex-col min-w-0" data-astro-cid-7zzsworf> <span class="font-bold text-sm truncate text-on-surface" data-astro-cid-7zzsworf>mrrobertkent</span> <a href="/?creator=mrrobertkent" class="text-xs text-primary hover:underline font-semibold transition-all" data-astro-cid-7zzsworf>Explore all skills →</a> </div> </div> </div> </div> </div> </div> </div>  <script>
        const copyBtn = document.getElementById("detail-copy-btn");
        const installCmd = document.getElementById("detail-install-cmd");
        if (copyBtn && installCmd) {
            copyBtn.addEventListener("click", () => {
                const cmd = installCmd.textContent.trim();
                navigator.clipboard.writeText(cmd).then(() => {
                    const originalText = copyBtn.innerHTML;
                    copyBtn.innerHTML = `
                        <span class="material-symbols-outlined text-[16px]">check</span>
                        <span>Copied!</span>
                    `;
                    copyBtn.style.background = "#10b981";
                    copyBtn.style.borderColor = "#10b981";
                    setTimeout(() => {
                        copyBtn.innerHTML = originalText;
                        copyBtn.style.background = "";
                        copyBtn.style.borderColor = "";
                    }, 1500);
                });
            });
        }
    </script>  </div>  <footer class="border-t border-border bg-surface-container-low text-on-surface-variant py-8 px-gutter mt-16 rounded-xl"> <div class="max-w-container-max mx-auto flex flex-col md:flex-row justify-between items-center gap-6"> <div class="flex items-center gap-2"> <div class="w-6 h-6 rounded bg-primary bg-opacity-20 flex items-center justify-center"> <span class="material-symbols-outlined text-primary text-sm">code_blocks</span> </div> <span class="font-bold text-on-surface text-sm">SkillMD</span> </div> <div class="flex flex-wrap justify-center gap-6 text-sm"> <a href="/about" class="hover:text-primary transition-colors">About Us</a> <a href="/contact" class="hover:text-primary transition-colors">Contact Us</a> <a href="/privacy" class="hover:text-primary transition-colors">Privacy Policy</a> <a href="/terms" class="hover:text-primary transition-colors">Terms of Service</a> <a href="/support" class="hover:text-primary transition-colors">Support</a> </div> <div class="text-xs text-on-surface-variant/80">
© 2026 SkillMD. All rights reserved.
</div> </div> </footer> </main>  <script>
            // Theme setup
            const savedTheme = localStorage.getItem("theme") || "dark";
            
            function applyTheme(theme) {
                document.documentElement.classList.remove("dark", "green", "dracula", "nord");
                if (theme === "dark") {
                    document.documentElement.classList.add("dark");
                } else if (theme === "green") {
                    document.documentElement.classList.add("dark", "green");
                } else if (theme === "dracula") {
                    document.documentElement.classList.add("dark", "dracula");
                } else if (theme === "nord") {
                    document.documentElement.classList.add("dark", "nord");
                }
                document.documentElement.setAttribute("data-theme", theme);

const themeMoon = document.getElementById("theme-moon");
                const themeSun = document.getElementById("theme-sun");
                const themeLeaf = document.getElementById("theme-leaf");
                const themeDracula = document.getElementById("theme-dracula");
                const themeNord = document.getElementById("theme-nord");
                if (themeMoon && themeSun && themeLeaf && themeDracula && themeNord) {
                    themeMoon.style.display = theme === "dark" ? "inline" : "none";
                    themeSun.style.display = theme === "light" ? "inline" : "none";
                    themeLeaf.style.display = theme === "green" ? "inline" : "none";
                    themeDracula.style.display = theme === "dracula" ? "inline" : "none";
                    themeNord.style.display = theme === "nord" ? "inline" : "none";
                }
            }

applyTheme(savedTheme);

// Mobile menu toggle and sidebar logic
            const mobileMenuToggle = document.getElementById("mobile-menu-toggle");
            const sidebarMenu = document.getElementById("sidebar-menu");
            const sidebarOverlay = document.getElementById("sidebar-overlay");

function isMobile() {
                return window.innerWidth < 768; // 768px is the 'md' breakpoint in Tailwind
            }

function openSidebar() {
                if (sidebarMenu) {
                    sidebarMenu.classList.remove("-translate-x-full");
                }
                if (sidebarOverlay) {
                    sidebarOverlay.classList.remove("hidden");
                }
            }

function closeSidebar() {
                if (sidebarMenu && isMobile()) {
                    sidebarMenu.classList.add("-translate-x-full");
                }
                if (sidebarOverlay) {
                    sidebarOverlay.classList.add("hidden");
                }
            }

if (mobileMenuToggle && sidebarMenu) {
                mobileMenuToggle.addEventListener("click", (e) => {
                    e.stopPropagation();
                    if (isMobile()) {
                        const isClosed = sidebarMenu.classList.contains("-translate-x-full");
                        if (isClosed) {
                            openSidebar();
                        } else {
                            closeSidebar();
                        }
                    }
                });

document.addEventListener("click", (e) => {
                    if (isMobile()) {
                        if (!sidebarMenu.contains(e.target) && !mobileMenuToggle.contains(e.target)) {
                            closeSidebar();
                        }
                    }
                });

if (sidebarOverlay) {
                    sidebarOverlay.addEventListener("click", () => {
                        if (isMobile()) {
                            closeSidebar();
                        }
                    });
                }

// Collapse sidebar when clicking a filter button, creator button, or nav item inside it
                sidebarMenu.addEventListener("click", (e) => {
                    if (isMobile()) {
                        const clickTarget = e.target.closest("button, a");
                        if (clickTarget) {
                            closeSidebar();
                        }
                    }
                });

// Sync sidebar state on window resize
                window.addEventListener("resize", () => {
                    if (!isMobile()) {
                        // Desktop: sidebar should be visible, no overlay
                        if (sidebarMenu) {
                            sidebarMenu.classList.remove("-translate-x-full");
                        }
                        if (sidebarOverlay) {
                            sidebarOverlay.classList.add("hidden");
                        }
                    } else {
                        // Mobile: start collapsed
                        if (sidebarMenu) {
                            sidebarMenu.classList.add("-translate-x-full");
                        }
                        if (sidebarOverlay) {
                            sidebarOverlay.classList.add("hidden");
                        }
                    }
                });
            }

// If not on homepage, redirect on sidebar filter click
            const isHomepage = window.location.pathname === "/";