live-session

name: live-session description: Launch a live creative session — open Chrome with the shader editor + audio source, connect Claude-in-Chrome, and get ready to jam. Use /live-session to start, optionally pass a shader path or SoundCloud/Spotify URL. allowed-tools: Bash Read Write Edit Grep Glob Agent mcp__claude-in-chrome__tabs_context_mcp mcp__claude-in-chrome__tabs_create_mcp mcp__claude-in-chrome__navigate mcp__claude-in-chrome__javascript_tool mcp__claude-in-chrome__read_page mcp__claude-in-chrome__read_console_messages

Live Session — Creative Audio-Visual Jam with Claude

Launch everything needed for a live shader + music session where Claude edits visuals in real-time while the user vibes to music.

Context

Arguments (optional shader path, audio URL, or mode): !echo "$ARGUMENTS"

Dev server status: !curl -s -o /dev/null -w "%{http_code}" http://localhost:6969/ 2>/dev/null || echo "not running"

Modified shaders in worktree (fallback target): !git diff --name-only HEAD | grep '\.frag$' | head -3 2>/dev/null; git status --short | grep '\.frag' | head -3 2>/dev/null

What This Skill Does

Gets Claude and the user into a live creative session as fast as possible. The goal is fun — music playing, visuals reacting, Claude making edits that hot-reload in real-time, user tweaking knobs and vibing.

Steps

1. Ensure the dev server is running

Check if localhost:6969 responds. If not, start it:

cd /Users/redaphid/Projects/paper-cranes && npm run dev &

Wait for it to be ready (poll with curl, max 10 seconds).

2. Determine the shader

From $ARGUMENTS, or fall back to:

1. The most recently modified .frag in the worktree
2. redaphid/wip/the-coat-fur-coat/the-coat-fur-coat-reactive (the default jam shader)

3. Open Chrome and connect

Important lessons learned:

• Chrome may not be running. Check first with pgrep -x "Google Chrome". If not running, open -a "Google Chrome" and wait a beat.
• After launching Chrome or reconnecting MCP, call tabs_context_mcp with createIfEmpty: true to get fresh tab IDs. Old tab IDs from previous sessions are stale and will silently fail.
• Do NOT trust tab data from before the MCP reconnection.

Steps:

1. Ensure Chrome is running (launch if needed)
2. Call tabs_context_mcp with createIfEmpty: true
3. Create a new tab and navigate to the editor:

   http://localhost:6969/edit.html?shader=<shader-path>&audio=tab
   

4. Create another tab for the audio source:
   • If a SoundCloud/Spotify URL was provided in $ARGUMENTS, navigate there
   • Otherwise open https://soundcloud.com (good default — no login required to browse)

4. Verify the connection works

Run a quick JavaScript check on the editor tab to confirm Claude can actually control the browser:

document.title

If this fails or returns unexpected results, tell the user the connection isn't working and suggest they run /mcp to reconnect claude-in-chrome.

5. Tell the user we're ready

Keep it short and excited. Something like:

Editor's up with [shader name], [audio source] is ready. Play some music and share the tab audio — let's jam!

Remind them to:

• Share tab audio from the music tab to the editor (Chrome tab audio capture)
• The ?audio=tab param is already in the URL so it'll prompt automatically

6. Enter jam mode

Now the fun begins. Claude should:

• Be proactive with edits — don't ask permission for every change, just edit the .frag file and let HMR reload it
• Read audio state when useful via window.cranes.controllerFeatures or window.cranes.flattenFeatures()
• Respond to vibes — if the user says "more intense" or "that's sick", act on it immediately
• Revert fast if something breaks — the user shouldn't have to wait while you debug
• Use knobs for rapid exploration: window.cranes.manualFeatures.knob_1 = 0.5

Troubleshooting