Generate beautiful code snippet images using ray.so. This skill should be used when the user asks to create a code image, code screenshot, code snippet image, or wants to make their code look pretty for sharing. Saves images locally to the current working directory or a user-specified path.

ray.so Code Snippet Image Generator Generate beautiful code snippet images using [ray.so](https://ray.so/) and save them locally. Requirements The user MUST provide the code snippet, either directly or by pointing to a file/selection in context MUST ask the user for ALL styling parameters before generating, presenting ALL available options MUST use agent browser for screenshot capture (check availability first) Workflow Step 1: Verify agent browser Availability Before proceeding, verify that agent browser is available: If agent browser is not found in the PATH, inform the user that this skill requires agent browser and cannot proceed without it. Step 2: Fetch Available Options Fetch the current themes and languages from ray.so's GitHub repository using curl: Step 3: Ask User for ALL Parameters MUST use AskUserQuestion to ask for EVERY parameter, presenting ALL available options. Ask for parameters in this order: 3.1 Theme Selection Present ALL available themes. In the question, list every theme fetched from step 2. Example: 3.2 Language Selection Infer the language when possible. Skip this question if: The user explicitly specified a language The code comes from a file with a clear extension (e.g., .py → python, .js → javascript, .ts → typescript, .rs → rust, .go → go, etc.) The syntax is unmistakably identifiable (e.g., def / import → python, func / package → go, fn / let mut → rust) Only ask this question if the language cannot be confidently inferred: 3.3 Dark/Light Mode 3.4 Background 3.5 Padding 3.6 Line Numbers 3.7 Title Note: Do NOT ask about output path/filename. Save to the current working directory with a sensible filename (e.g., rayso snippet.png , or based on the title if provided like fibonacci.png ). Only use a different path if the user explicitly specifies one in their original request. Step 4: Build the ray.so URL CRITICAL: ALL parameters must be in the URL hash (after ), NOT in the query string. Build the URL using shell commands: URL Hash Parameters: Parameter Values Default theme Any theme from list breeze padding 16, 32, 64, 128 64 background true, false true darkMode true, false true language Any language from list, or "auto" auto lineNumbers true, false false title URL encoded string (none) width Number (pixels) auto code Base64 encoded, then URL encoded (required) Note on width: Do NOT include the width parameter unless you specifically need a fixed width. Without it, ray.so auto sizes the frame to fit the code content, avoiding unnecessary empty space. Example URL construction: Step 5: Capture High Quality Image with agent browser MUST use agent browser (verified in Step 1). This approach uses the html to image library (same as ray.so's internal export) with high pixelRatio for crisp, sharp text rendering. IMPORTANT: Always use a unique session name with session to avoid stale session issues. Critical notes: Uses html to image library which is what ray.so uses for its own export feature pixelRatio: 4 produces high DPI images with crisp, sharp text (4x native resolution) The data URL is captured directly from the library, not from a screenshot No ImageMagick required pure browser based rendering at high resolution Output is correctly sized with no extra whitespace Step 6: Confirm Output and STOP Report the saved file location to the user. The task is complete do not perform any additional checks, explorations, or verifications after the screenshot is saved. Complete Example User: "Create a code snippet image of this Python function" 1. Check which agent browser confirmed available 2. Fetch themes and languages: 3. Ask user for parameters via AskUserQuestion: Theme: user selects "midnight" Language: inferred as python from def syntax not asked Dark mode: user selects "Dark mode" Background: user selects "Yes" Padding: user selects "64" Line numbers: user selects "No" Title: user selects "No title" 4. Build URL (all params in hash, no width for auto sizing): 5. Capture high quality image: 6. Report: "Saved code snippet image to ./fibonacci.png" Image Resolution and Quality This skill uses the html to image library with pixelRatio: 4 to produce high quality images with crisp, sharp text. This is the same rendering approach that ray.so uses for its built in export feature. Output quality: Default: 4x native resolution (frame auto sizes to content, then rendered at 4x) Text is rendered at high DPI, not upscaled from low resolution Gradient backgrounds and all CSS styling are preserved No unnecessary empty space (frame auto sizes to fit code) Adjusting resolution: For smaller files: Change pixelRatio:4 to pixelRatio:2 in the eval command For maximum quality: Use pixelRatio:6 (same as ray.so's "6x" export option) Forcing a specific width: Only add &width=NUMBER to the URL if you need a fixed width (e.g., for consistent sizing across multiple images) Troubleshooting If agent browser is not available: Inform the user and do not proceed If curl fails to fetch themes/languages, use these common defaults: Themes: breeze, midnight, candy, crimson, falcon, meadow, raindrop, sunset, vercel, supabase, tailwind Languages: auto, javascript, typescript, python, rust, go, java, ruby, swift, kotlin, css, html, json, yaml, bash If parameters aren't applied: Ensure ALL parameters are in the URL hash (after ), not the query string If title isn't showing: The title parameter must be in the hash: title=filename.py&code=... If html to image fails to load: Check network connectivity; the library loads from jsdelivr CDN If capture returns empty: The frame selector frame div may have changed; inspect the page structure For very long code snippets, ray.so may truncate; consider splitting into multiple images If the page doesn't load properly, increase the wait time (try 4000ms or more) If you get a blank page: Use a fresh unique session name with session flag If data URL is malformed: Ensure quotes and newlines are stripped before base64 decoding

ray-so-code-snippet