[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F65FPY93YHT339VYVMXSDB":3,"skill-same:01M6F65FPY93YHT339VYVMXSDB":73},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":57,"updatedAt":58,"install":59,"resources":72},"01M6F65FPY93YHT339VYVMXSDB","ray-so-code-snippet",null,"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.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fintellectronica\u002Fagent-skills\u002Fray-so-code-snippet\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44],"code","Ray","ray so code snippet","image","directory","create","generate","screenshot","sharing","user","look","images","make","2026-11-10 10:12:30",false,"---\nname: ray-so-code-snippet\ndescription: 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.\n---\n\n# ray.so Code Snippet Image Generator\n\nGenerate beautiful code snippet images using [ray.so](https:\u002F\u002Fray.so\u002F) and save them locally.\n\n## Requirements\n\n- The user MUST provide the code snippet, either directly or by pointing to a file\u002Fselection in context\n- MUST ask the user for ALL styling parameters before generating, presenting ALL available options\n- MUST use `agent-browser` for screenshot capture (check availability first)\n\n## Workflow\n\n### Step 1: Verify agent-browser Availability\n\nBefore proceeding, verify that `agent-browser` is available:\n\n```bash\nwhich agent-browser\n```\n\nIf `agent-browser` is not found in the PATH, inform the user that this skill requires agent-browser and cannot proceed without it.\n\n### Step 2: Fetch Available Options\n\nFetch the current themes and languages from ray.so's GitHub repository using curl:\n\n```bash\n# Fetch and parse available themes\ncurl -s \"https:\u002F\u002Fraw.githubusercontent.com\u002Fraycast\u002Fray-so\u002Fmain\u002Fapp\u002F(navigation)\u002F(code)\u002Fstore\u002Fthemes.ts\" | grep -oE 'id:\\s*\"[^\"]+\"' | sed 's\u002Fid:\\s*\"\u002F\u002F;s\u002F\"\u002F\u002F' | sort -u\n\n# Fetch and parse available languages\ncurl -s \"https:\u002F\u002Fraw.githubusercontent.com\u002Fraycast\u002Fray-so\u002Fmain\u002Fapp\u002F(navigation)\u002F(code)\u002Futil\u002Flanguages.ts\" | grep -oE '^[[:space:]]*\"?[a-zA-Z0-9+#-]+\"?\\s*:\\s*\\{' | sed 's\u002F[[:space:]]*\"\u002F\u002Fg;s\u002F\".*\u002F\u002F;s\u002F:.*\u002F\u002F' | sort -u\n```\n\n### Step 3: Ask User for ALL Parameters\n\nMUST use AskUserQuestion to ask for EVERY parameter, presenting ALL available options. Ask for parameters in this order:\n\n#### 3.1 Theme Selection\n\nPresent ALL available themes. In the question, list every theme fetched from step 2. Example:\n\n```\nQuestion: \"Which theme would you like?\"\nDescription: \"Available themes: [list ALL themes from curl output]\"\nOptions (pick 4 popular ones for quick select):\n- breeze (default, purple gradient)\n- midnight (cyan-blue)\n- vercel (minimalist dark)\n- sunset (warm orange)\nNote: User can select \"Other\" to type any theme from the full list\n```\n\n#### 3.2 Language Selection\n\n**Infer the language when possible.** Skip this question if:\n- The user explicitly specified a language\n- The code comes from a file with a clear extension (e.g., `.py` → python, `.js` → javascript, `.ts` → typescript, `.rs` → rust, `.go` → go, etc.)\n- The syntax is unmistakably identifiable (e.g., `def`\u002F`import` → python, `func`\u002F`package` → go, `fn`\u002F`let mut` → rust)\n\nOnly ask this question if the language cannot be confidently inferred:\n\n```\nQuestion: \"Which language for syntax highlighting?\"\nDescription: \"Available languages: [list ALL languages from curl output]\"\nOptions:\n- auto (auto-detect)\n- javascript\n- python\n- typescript\nNote: User can select \"Other\" to type any language from the full list\n```\n\n#### 3.3 Dark\u002FLight Mode\n\n```\nQuestion: \"Dark or light mode?\"\nOptions:\n- Dark mode (default)\n- Light mode\n```\n\n#### 3.4 Background\n\n```\nQuestion: \"Show the gradient background?\"\nOptions:\n- Yes, show background (default)\n- No, transparent\u002Fminimal background\n```\n\n#### 3.5 Padding\n\n```\nQuestion: \"How much padding around the code?\"\nOptions:\n- 16 (compact)\n- 32 (small)\n- 64 (medium, default)\n- 128 (large)\n```\n\n#### 3.6 Line Numbers\n\n```\nQuestion: \"Show line numbers?\"\nOptions:\n- No (default)\n- Yes\n```\n\n#### 3.7 Title\n\n```\nQuestion: \"Add a title above the code? (e.g., filename)\"\nOptions:\n- No title (default)\n- Yes, add title\nIf yes, ask for the title text.\n```\n\nNote: Do NOT ask about output path\u002Ffilename. 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.\n\n### Step 4: Build the ray.so URL\n\n**CRITICAL: ALL parameters must be in the URL hash (after #), NOT in the query string.**\n\nBuild the URL using shell commands:\n\n```bash\n# 1. Base64 encode the code\nCODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)\n\n# 2. URL encode the base64 string\nCODE_ENCODED=$(python3 -c \"import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))\")\n\n# 3. Build the URL with ALL parameters in the hash\n# Format: https:\u002F\u002Fray.so\u002F#param1=value1&param2=value2&code=ENCODED_CODE\n# Do NOT include width parameter - let ray.so auto-size to fit content\nURL=\"https:\u002F\u002Fray.so\u002F#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}\"\n\n# Add optional parameters if needed:\n# If lineNumbers: add \"&lineNumbers=true\" before &code=\n# If title: add \"&title=URL_ENCODED_TITLE\" before &code=\n```\n\n**URL Hash Parameters:**\n| Parameter | Values | Default |\n|-----------|--------|---------|\n| theme | Any theme from list | breeze |\n| padding | 16, 32, 64, 128 | 64 |\n| background | true, false | true |\n| darkMode | true, false | true |\n| language | Any language from list, or \"auto\" | auto |\n| lineNumbers | true, false | false |\n| title | URL-encoded string | (none) |\n| width | Number (pixels) | auto |\n| code | Base64-encoded, then URL-encoded | (required) |\n\n**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.\n\n**Example URL construction:**\n```bash\n# For code: for i in range(23):\\n    print(i)\n# Theme: midnight, Padding: 64, Dark mode: true, Background: true, Language: python, Title: test.py\n\nCODE='for i in range(23):\n    print(i)'\nCODE_BASE64=$(echo -n \"$CODE\" | base64)\nCODE_ENCODED=$(python3 -c \"import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))\")\nTITLE_ENCODED=$(python3 -c \"import urllib.parse; print(urllib.parse.quote('test.py'))\")\nURL=\"https:\u002F\u002Fray.so\u002F#theme=midnight&padding=64&background=true&darkMode=true&language=python&title=${TITLE_ENCODED}&code=${CODE_ENCODED}\"\necho \"$URL\"\n```\n\n### Step 5: Capture High-Quality Image with agent-browser\n\nMUST 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.\n\n**IMPORTANT:** Always use a unique session name with `--session` to avoid stale session issues.\n\n```bash\n# Generate unique session name\nSESSION=\"rayso-$(date +%s)\"\n\n# 1. Set viewport\nagent-browser --session $SESSION set viewport 1400 900\n\n# 2. Open the URL\nagent-browser --session $SESSION open \"$URL\"\n\n# 3. Wait for the page to fully render\nagent-browser --session $SESSION wait --load networkidle\nagent-browser --session $SESSION wait 3000\n\n# 4. Load html-to-image library (same library ray.so uses internally)\nagent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement(\"script\");s.src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fhtml-to-image@1.11.11\u002Fdist\u002Fhtml-to-image.js\";s.onload=r;s.onerror=e;document.head.appendChild(s)})'\n\n# 5. Capture at 4x resolution using html-to-image (produces crisp text)\nagent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector(\"#frame > div\"),{pixelRatio:4,skipAutoScale:true})' > \u002Ftmp\u002Frayso-dataurl-$SESSION.txt\n\n# 6. Close the browser\nagent-browser --session $SESSION close\n\n# 7. Convert data URL to PNG file\nDATAURL=$(cat \u002Ftmp\u002Frayso-dataurl-$SESSION.txt | tr -d '\"' | tr -d '\\n')\necho \"$DATAURL\" | sed 's\u002Fdata:image\\\u002Fpng;base64,\u002F\u002F' | base64 -d > \u002Fpath\u002Fto\u002Foutput.png\n\n# 8. Clean up temp file\nrm \u002Ftmp\u002Frayso-dataurl-$SESSION.txt\n```\n\n**Critical notes:**\n- Uses `html-to-image` library which is what ray.so uses for its own export feature\n- `pixelRatio: 4` produces high-DPI images with crisp, sharp text (4x native resolution)\n- The data URL is captured directly from the library, not from a screenshot\n- No ImageMagick required - pure browser-based rendering at high resolution\n- Output is correctly sized with no extra whitespace\n\n### Step 6: Confirm Output and STOP\n\nReport 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.**\n\n## Complete Example\n\nUser: \"Create a code snippet image of this Python function\"\n\n```python\ndef fibonacci(n):\n    if n \u003C= 1:\n        return n\n    return fibonacci(n-1) + fibonacci(n-2)\n```\n\n1. Check `which agent-browser` - confirmed available\n\n2. Fetch themes and languages:\n```bash\ncurl -s \"https:\u002F\u002Fraw.githubusercontent.com\u002Fraycast\u002Fray-so\u002Fmain\u002Fapp\u002F(navigation)\u002F(code)\u002Fstore\u002Fthemes.ts\" | grep -oE 'id:\\s*\"[^\"]+\"' | sed 's\u002Fid:\\s*\"\u002F\u002F;s\u002F\"\u002F\u002F' | sort -u\n```\n\n3. Ask user for parameters via AskUserQuestion:\n   - Theme: user selects \"midnight\"\n   - Language: *inferred as python from `def` syntax - not asked*\n   - Dark mode: user selects \"Dark mode\"\n   - Background: user selects \"Yes\"\n   - Padding: user selects \"64\"\n   - Line numbers: user selects \"No\"\n   - Title: user selects \"No title\"\n\n4. Build URL (all params in hash, no width for auto-sizing):\n```bash\nCODE='def fibonacci(n):\n    if n \u003C= 1:\n        return n\n    return fibonacci(n-1) + fibonacci(n-2)'\nCODE_BASE64=$(echo -n \"$CODE\" | base64)\nCODE_ENCODED=$(python3 -c \"import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))\")\nURL=\"https:\u002F\u002Fray.so\u002F#theme=midnight&padding=64&background=true&darkMode=true&language=python&code=${CODE_ENCODED}\"\n```\n\n5. Capture high-quality image:\n```bash\nSESSION=\"rayso-$(date +%s)\"\n\nagent-browser --session $SESSION set viewport 1400 900\nagent-browser --session $SESSION open \"$URL\"\nagent-browser --session $SESSION wait --load networkidle\nagent-browser --session $SESSION wait 3000\n\n# Load html-to-image library\nagent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement(\"script\");s.src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fhtml-to-image@1.11.11\u002Fdist\u002Fhtml-to-image.js\";s.onload=r;s.onerror=e;document.head.appendChild(s)})'\n\n# Capture at 4x resolution\nagent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector(\"#frame > div\"),{pixelRatio:4,skipAutoScale:true})' > \u002Ftmp\u002Frayso-dataurl-$SESSION.txt\nagent-browser --session $SESSION close\n\n# Save as PNG\nDATAURL=$(cat \u002Ftmp\u002Frayso-dataurl-$SESSION.txt | tr -d '\"' | tr -d '\\n')\necho \"$DATAURL\" | sed 's\u002Fdata:image\\\u002Fpng;base64,\u002F\u002F' | base64 -d > .\u002Ffibonacci.png\nrm \u002Ftmp\u002Frayso-dataurl-$SESSION.txt\n```\n\n6. Report: \"Saved code snippet image to .\u002Ffibonacci.png\"\n\n## Image Resolution and Quality\n\nThis 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.\n\n**Output quality:**\n- Default: 4x native resolution (frame auto-sizes to content, then rendered at 4x)\n- Text is rendered at high DPI, not upscaled from low resolution\n- Gradient backgrounds and all CSS styling are preserved\n- No unnecessary empty space (frame auto-sizes to fit code)\n\n**Adjusting resolution:**\n- For smaller files: Change `pixelRatio:4` to `pixelRatio:2` in the eval command\n- For maximum quality: Use `pixelRatio:6` (same as ray.so's \"6x\" export option)\n\n**Forcing a specific width:**\n- Only add `&width=NUMBER` to the URL if you need a fixed width (e.g., for consistent sizing across multiple images)\n\n## Troubleshooting\n\n- **If agent-browser is not available:** Inform the user and do not proceed\n- If curl fails to fetch themes\u002Flanguages, use these common defaults:\n  - Themes: breeze, midnight, candy, crimson, falcon, meadow, raindrop, sunset, vercel, supabase, tailwind\n  - Languages: auto, javascript, typescript, python, rust, go, java, ruby, swift, kotlin, css, html, json, yaml, bash\n- **If parameters aren't applied:** Ensure ALL parameters are in the URL hash (after #), not the query string\n- **If title isn't showing:** The title parameter must be in the hash: `#title=filename.py&code=...`\n- **If html-to-image fails to load:** Check network connectivity; the library loads from jsdelivr CDN\n- **If capture returns empty:** The frame selector `#frame > div` may have changed; inspect the page structure\n- For very long code snippets, ray.so may truncate; consider splitting into multiple images\n- If the page doesn't load properly, increase the wait time (try 4000ms or more)\n- **If you get a blank page:** Use a fresh unique session name with `--session` flag\n- **If data URL is malformed:** Ensure quotes and newlines are stripped before base64 decoding\n\n","# ray.so Code Snippet Image Generator\n\nGenerate beautiful code snippet images using [ray.so](https:\u002F\u002Fray.so\u002F) and save them locally.\n\n## Requirements\n\n- The user MUST provide the code snippet, either directly or by pointing to a file\u002Fselection in context\n- MUST ask the user for ALL styling parameters before generating, presenting ALL available options\n- MUST use `agent-browser` for screenshot capture (check availability first)\n\n## Workflow\n\n### Step 1: Verify agent-browser Availability\n\nBefore proceeding, verify that `agent-browser` is available:\n\n```bash\nwhich agent-browser\n```\n\nIf `agent-browser` is not found in the PATH, inform the user that this skill requires agent-browser and cannot proceed without it.\n\n### Step 2: Fetch Available Options\n\nFetch the current themes and languages from ray.so's GitHub repository using curl:\n\n```bash\n# Fetch and parse available themes\ncurl -s \"https:\u002F\u002Fraw.githubusercontent.com\u002Fraycast\u002Fray-so\u002Fmain\u002Fapp\u002F(navigation)\u002F(code)\u002Fstore\u002Fthemes.ts\" | grep -oE 'id:\\s*\"[^\"]+\"' | sed 's\u002Fid:\\s*\"\u002F\u002F;s\u002F\"\u002F\u002F' | sort -u\n\n# Fetch and parse available languages\ncurl -s \"https:\u002F\u002Fraw.githubusercontent.com\u002Fraycast\u002Fray-so\u002Fmain\u002Fapp\u002F(navigation)\u002F(code)\u002Futil\u002Flanguages.ts\" | grep -oE '^[[:space:]]*\"?[a-zA-Z0-9+#-]+\"?\\s*:\\s*\\{' | sed 's\u002F[[:space:]]*\"\u002F\u002Fg;s\u002F\".*\u002F\u002F;s\u002F:.*\u002F\u002F' | sort -u\n```\n\n### Step 3: Ask User for ALL Parameters\n\nMUST use AskUserQuestion to ask for EVERY parameter, presenting ALL available options. Ask for parameters in this order:\n\n#### 3.1 Theme Selection\n\nPresent ALL available themes. In the question, list every theme fetched from step 2. Example:\n\n```\nQuestion: \"Which theme would you like?\"\nDescription: \"Available themes: [list ALL themes from curl output]\"\nOptions (pick 4 popular ones for quick select):\n- breeze (default, purple gradient)\n- midnight (cyan-blue)\n- vercel (minimalist dark)\n- sunset (warm orange)\nNote: User can select \"Other\" to type any theme from the full list\n```\n\n#### 3.2 Language Selection\n\n**Infer the language when possible.** Skip this question if:\n- The user explicitly specified a language\n- The code comes from a file with a clear extension (e.g., `.py` → python, `.js` → javascript, `.ts` → typescript, `.rs` → rust, `.go` → go, etc.)\n- The syntax is unmistakably identifiable (e.g., `def`\u002F`import` → python, `func`\u002F`package` → go, `fn`\u002F`let mut` → rust)\n\nOnly ask this question if the language cannot be confidently inferred:\n\n```\nQuestion: \"Which language for syntax highlighting?\"\nDescription: \"Available languages: [list ALL languages from curl output]\"\nOptions:\n- auto (auto-detect)\n- javascript\n- python\n- typescript\nNote: User can select \"Other\" to type any language from the full list\n```\n\n#### 3.3 Dark\u002FLight Mode\n\n```\nQuestion: \"Dark or light mode?\"\nOptions:\n- Dark mode (default)\n- Light mode\n```\n\n#### 3.4 Background\n\n```\nQuestion: \"Show the gradient background?\"\nOptions:\n- Yes, show background (default)\n- No, transparent\u002Fminimal background\n```\n\n#### 3.5 Padding\n\n```\nQuestion: \"How much padding around the code?\"\nOptions:\n- 16 (compact)\n- 32 (small)\n- 64 (medium, default)\n- 128 (large)\n```\n\n#### 3.6 Line Numbers\n\n```\nQuestion: \"Show line numbers?\"\nOptions:\n- No (default)\n- Yes\n```\n\n#### 3.7 Title\n\n```\nQuestion: \"Add a title above the code? (e.g., filename)\"\nOptions:\n- No title (default)\n- Yes, add title\nIf yes, ask for the title text.\n```\n\nNote: Do NOT ask about output path\u002Ffilename. 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.\n\n### Step 4: Build the ray.so URL\n\n**CRITICAL: ALL parameters must be in the URL hash (after #), NOT in the query string.**\n\nBuild the URL using shell commands:\n\n```bash\n# 1. Base64 encode the code\nCODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)\n\n# 2. URL encode the base64 string\nCODE_ENCODED=$(python3 -c \"import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))\")\n\n# 3. Build the URL with ALL parameters in the hash\n# Format: https:\u002F\u002Fray.so\u002F#param1=value1&param2=value2&code=ENCODED_CODE\n# Do NOT include width parameter - let ray.so auto-size to fit content\nURL=\"https:\u002F\u002Fray.so\u002F#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}\"\n\n# Add optional parameters if needed:\n# If lineNumbers: add \"&lineNumbers=true\" before &code=\n# If title: add \"&title=URL_ENCODED_TITLE\" before &code=\n```\n\n**URL Hash Parameters:**\n| Parameter | Values | Default |\n|-----------|--------|---------|\n| theme | Any theme from list | breeze |\n| padding | 16, 32, 64, 128 | 64 |\n| background | true, false | true |\n| darkMode | true, false | true |\n| language | Any language from list, or \"auto\" | auto |\n| lineNumbers | true, false | false |\n| title | URL-encoded string | (none) |\n| width | Number (pixels) | auto |\n| code | Base64-encoded, then URL-encoded | (required) |\n\n**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.\n\n**Example URL construction:**\n```bash\n# For code: for i in range(23):\\n    print(i)\n# Theme: midnight, Padding: 64, Dark mode: true, Background: true, Language: python, Title: test.py\n\nCODE='for i in range(23):\n    print(i)'\nCODE_BASE64=$(echo -n \"$CODE\" | base64)\nCODE_ENCODED=$(python3 -c \"import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))\")\nTITLE_ENCODED=$(python3 -c \"import urllib.parse; print(urllib.parse.quote('test.py'))\")\nURL=\"https:\u002F\u002Fray.so\u002F#theme=midnight&padding=64&background=true&darkMode=true&language=python&title=${TITLE_ENCODED}&code=${CODE_ENCODED}\"\necho \"$URL\"\n```\n\n### Step 5: Capture High-Quality Image with agent-browser\n\nMUST 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.\n\n**IMPORTANT:** Always use a unique session name with `--session` to avoid stale session issues.\n\n```bash\n# Generate unique session name\nSESSION=\"rayso-$(date +%s)\"\n\n# 1. Set viewport\nagent-browser --session $SESSION set viewport 1400 900\n\n# 2. Open the URL\nagent-browser --session $SESSION open \"$URL\"\n\n# 3. Wait for the page to fully render\nagent-browser --session $SESSION wait --load networkidle\nagent-browser --session $SESSION wait 3000\n\n# 4. Load html-to-image library (same library ray.so uses internally)\nagent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement(\"script\");s.src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fhtml-to-image@1.11.11\u002Fdist\u002Fhtml-to-image.js\";s.onload=r;s.onerror=e;document.head.appendChild(s)})'\n\n# 5. Capture at 4x resolution using html-to-image (produces crisp text)\nagent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector(\"#frame > div\"),{pixelRatio:4,skipAutoScale:true})' > \u002Ftmp\u002Frayso-dataurl-$SESSION.txt\n\n# 6. Close the browser\nagent-browser --session $SESSION close\n\n# 7. Convert data URL to PNG file\nDATAURL=$(cat \u002Ftmp\u002Frayso-dataurl-$SESSION.txt | tr -d '\"' | tr -d '\\n')\necho \"$DATAURL\" | sed 's\u002Fdata:image\\\u002Fpng;base64,\u002F\u002F' | base64 -d > \u002Fpath\u002Fto\u002Foutput.png\n\n# 8. Clean up temp file\nrm \u002Ftmp\u002Frayso-dataurl-$SESSION.txt\n```\n\n**Critical notes:**\n- Uses `html-to-image` library which is what ray.so uses for its own export feature\n- `pixelRatio: 4` produces high-DPI images with crisp, sharp text (4x native resolution)\n- The data URL is captured directly from the library, not from a screenshot\n- No ImageMagick required - pure browser-based rendering at high resolution\n- Output is correctly sized with no extra whitespace\n\n### Step 6: Confirm Output and STOP\n\nReport 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.**\n\n## Complete Example\n\nUser: \"Create a code snippet image of this Python function\"\n\n```python\ndef fibonacci(n):\n    if n \u003C= 1:\n        return n\n    return fibonacci(n-1) + fibonacci(n-2)\n```\n\n1. Check `which agent-browser` - confirmed available\n\n2. Fetch themes and languages:\n```bash\ncurl -s \"https:\u002F\u002Fraw.githubusercontent.com\u002Fraycast\u002Fray-so\u002Fmain\u002Fapp\u002F(navigation)\u002F(code)\u002Fstore\u002Fthemes.ts\" | grep -oE 'id:\\s*\"[^\"]+\"' | sed 's\u002Fid:\\s*\"\u002F\u002F;s\u002F\"\u002F\u002F' | sort -u\n```\n\n3. Ask user for parameters via AskUserQuestion:\n   - Theme: user selects \"midnight\"\n   - Language: *inferred as python from `def` syntax - not asked*\n   - Dark mode: user selects \"Dark mode\"\n   - Background: user selects \"Yes\"\n   - Padding: user selects \"64\"\n   - Line numbers: user selects \"No\"\n   - Title: user selects \"No title\"\n\n4. Build URL (all params in hash, no width for auto-sizing):\n```bash\nCODE='def fibonacci(n):\n    if n \u003C= 1:\n        return n\n    return fibonacci(n-1) + fibonacci(n-2)'\nCODE_BASE64=$(echo -n \"$CODE\" | base64)\nCODE_ENCODED=$(python3 -c \"import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))\")\nURL=\"https:\u002F\u002Fray.so\u002F#theme=midnight&padding=64&background=true&darkMode=true&language=python&code=${CODE_ENCODED}\"\n```\n\n5. Capture high-quality image:\n```bash\nSESSION=\"rayso-$(date +%s)\"\n\nagent-browser --session $SESSION set viewport 1400 900\nagent-browser --session $SESSION open \"$URL\"\nagent-browser --session $SESSION wait --load networkidle\nagent-browser --session $SESSION wait 3000\n\n# Load html-to-image library\nagent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement(\"script\");s.src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fhtml-to-image@1.11.11\u002Fdist\u002Fhtml-to-image.js\";s.onload=r;s.onerror=e;document.head.appendChild(s)})'\n\n# Capture at 4x resolution\nagent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector(\"#frame > div\"),{pixelRatio:4,skipAutoScale:true})' > \u002Ftmp\u002Frayso-dataurl-$SESSION.txt\nagent-browser --session $SESSION close\n\n# Save as PNG\nDATAURL=$(cat \u002Ftmp\u002Frayso-dataurl-$SESSION.txt | tr -d '\"' | tr -d '\\n')\necho \"$DATAURL\" | sed 's\u002Fdata:image\\\u002Fpng;base64,\u002F\u002F' | base64 -d > .\u002Ffibonacci.png\nrm \u002Ftmp\u002Frayso-dataurl-$SESSION.txt\n```\n\n6. Report: \"Saved code snippet image to .\u002Ffibonacci.png\"\n\n## Image Resolution and Quality\n\nThis 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.\n\n**Output quality:**\n- Default: 4x native resolution (frame auto-sizes to content, then rendered at 4x)\n- Text is rendered at high DPI, not upscaled from low resolution\n- Gradient backgrounds and all CSS styling are preserved\n- No unnecessary empty space (frame auto-sizes to fit code)\n\n**Adjusting resolution:**\n- For smaller files: Change `pixelRatio:4` to `pixelRatio:2` in the eval command\n- For maximum quality: Use `pixelRatio:6` (same as ray.so's \"6x\" export option)\n\n**Forcing a specific width:**\n- Only add `&width=NUMBER` to the URL if you need a fixed width (e.g., for consistent sizing across multiple images)\n\n## Troubleshooting\n\n- **If agent-browser is not available:** Inform the user and do not proceed\n- If curl fails to fetch themes\u002Flanguages, use these common defaults:\n  - Themes: breeze, midnight, candy, crimson, falcon, meadow, raindrop, sunset, vercel, supabase, tailwind\n  - Languages: auto, javascript, typescript, python, rust, go, java, ruby, swift, kotlin, css, html, json, yaml, bash\n- **If parameters aren't applied:** Ensure ALL parameters are in the URL hash (after #), not the query string\n- **If title isn't showing:** The title parameter must be in the hash: `#title=filename.py&code=...`\n- **If html-to-image fails to load:** Check network connectivity; the library loads from jsdelivr CDN\n- **If capture returns empty:** The frame selector `#frame > div` may have changed; inspect the page structure\n- For very long code snippets, ray.so may truncate; consider splitting into multiple images\n- If the page doesn't load properly, increase the wait time (try 4000ms or more)\n- **If you get a blank page:** Use a fresh unique session name with `--session` flag\n- **If data URL is malformed:** Ensure quotes and newlines are stripped before base64 decoding\n\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fintellectronica\u002Fagent-skills\u002Fray-so-code-snippet",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill ray-so-code-snippet",{"tool":65,"command":66},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill ray-so-code-snippet",{"tool":68,"command":69},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill ray-so-code-snippet","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fintellectronica\u002Fagent-skills\u002Fray-so-code-snippet\u002FSKILL.md",true,[],[74,84,94,103,109,116],{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":80,"publishedAt":45},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[79],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[81,82,83],"model","model hierarchy","model hierarchy skill",{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":90,"publishedAt":45},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[89],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[91,92,93],"MCP","zoom","zoom mcp",{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":45},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[100,101,102,92],"sdk","zoom apps sdk","apps",{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":45},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[105],{"skillNo":110,"name":111,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":115,"publishedAt":45},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[114],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[111],{"skillNo":117,"name":118,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":45},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[118]]