paper-cranes: Skill for Claude Code

Fork — Save Current State as New Shader Iteration

Capture the current shader code + knob values from the browser and create a new numbered .frag file with the knob values baked into comments and a companion .md doc.

Context

Arguments (optional shader path): !echo "$ARGUMENTS"

Browser tabs: !echo "Use tabs_context_mcp + javascript_tool to read current state"

Steps

1. Find the current shader

If $ARGUMENTS specifies a path, use it. Otherwise:

1. Check the browser — read window.location.search for ?shader=
2. Fall back to most recently modified .frag in the worktree

2. Read the current state from the browser

On the jam/editor tab, run:

JSON.stringify({
  shader: new URLSearchParams(window.location.search).get('shader'),
  controller: new URLSearchParams(window.location.search).get('controller'),
  knobs: Object.fromEntries(
    Object.entries(window.cranes.manualFeatures || {})
      .filter(([k]) => /^knob_\d+$/.test(k))
      .filter(([_, v]) => v !== undefined && v !== null)
      .sort(([a],[b]) => parseInt(a.split('_')[1]) - parseInt(b.split('_')[1]))
  )
})

3. Determine the new filename

Look at existing numbered files in the shader directory:

shaders/<path>/the-coat-2.frag
shaders/<path>/the-coat-3.frag
→ next: the-coat-4.frag

If no numbered files exist, use 2.frag as the first fork.

4. Copy the shader

Copy the current .frag to the new filename. Update any internal comments that reference the old name.

• Copy the controller too. If the shader reads controller uniforms, copy controllers/<name>.js to a frozen snapshot such as controllers/<name>-<N>.js. Otherwise the fork changes whenever the live controller does.
• Add a preset line right after the leading // @ metadata (and after #version if present). It must carry every query param the fork needs: controller, wavelet=true if wavelets are used, and any knobs that matter. The list page extracts http(s) URLs from comments as presets and applies their params: // preset: https://visuals.beadfamous.com/?shader=<path>&controller=<snapshot>&wavelet=true