preview

Launch an interactive preview session for iterating on a document design.

Setup

1. Read the document-design skill for guidance
2. Resolve the HTML file path (see "File path" below)
3. Start a local HTTP server to serve the file
4. Set up the playground wrapper and controls
5. Open the wrapper in the Playwright browser

Pre-flight check

Before proceeding, verify the control panel files exist:

1. Check if the controls directory exists:

   ls "${CLAUDE_PLUGIN_ROOT}/controls/control-panel.js" 2>/dev/null && echo "OK" || echo "MISSING"
   

2. If MISSING, tell the user:

   Your PDF Playground plugin is outdated and missing the interactive control panel. Run this command to update, then restart Claude Code:

   claude plugin update pdf-playground@claude-skills-journalism
   

   Then STOP, do not continue with the preview workflow.

Preview workflow

Step 1: Start local server

The Playwright browser cannot open file:// URLs. Start a local HTTP server instead:

1. Determine the directory containing the HTML file
2. Check if port 8787 is available:

   python -c "import socket; s=socket.socket(); s.settimeout(1); result=s.connect_ex(('127.0.0.1',8787)); s.close(); print('free' if result!=0 else 'busy')"
   

3. If port 8787 is busy, try 8788, 8789, etc. until one is free
4. Start the server in the background:

   cd <directory-containing-html> && python -m http.server <port>
   

   Run this with run_in_background: true
5. Wait 1 second for the server to start

Step 2: Set up the playground wrapper

The playground uses an iframe-based architecture: the document lives in an iframe, and the control panel sits alongside it as a sidebar. This keeps the document HTML clean for PDF export while providing interactive design controls.

1. Create a playground-controls/ directory in the same directory as the HTML file
2. Copy the control files from the plugin:

   mkdir -p <html-dir>/playground-controls/template-maps
   cp ${CLAUDE_PLUGIN_ROOT}/controls/control-panel.css <html-dir>/playground-controls/
   cp ${CLAUDE_PLUGIN_ROOT}/controls/control-panel.js <html-dir>/playground-controls/
   cp ${CLAUDE_PLUGIN_ROOT}/controls/prompt-generator.js <html-dir>/playground-controls/
   

3. Detect which template is being previewed and copy the matching template map:

   cp ${CLAUDE_PLUGIN_ROOT}/controls/template-maps/<template-name>.js <html-dir>/playground-controls/template-maps/
   

4. Copy the wrapper HTML to the same directory as the HTML file:

   cp ${CLAUDE_PLUGIN_ROOT}/controls/playground-wrapper.html <html-dir>/