[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77VR49W2BHHMA9GEFN2NRXD":3,"skill-same:01M77VR49W2BHHMA9GEFN2NRXD":46},{"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":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":6,"updatedAt":31,"install":32,"resources":45},"01M77VR49W2BHHMA9GEFN2NRXD","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.","Reihantt6\u002Fsns-myagent","Reihantt6","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F219822095?v=4","01M77KK94PV8B7C2D9XWXNS8DJ","Mohamad Reihan tegar prasetya","01M77KK958QFMTHYXGXFV7KZ79",2,"MIT","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fray-so-code-snippet\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\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# 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","# 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",{"description":7},"main","58843b159d7a4050d6b785a98b908cce505c0b92","agent\u002Fskills\u002Fray-so-code-snippet",0,"https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent","https:\u002F\u002Fgithub.com\u002FReihantt6","reihsns.web.id","2026-08-19 20:08:18",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add Reihantt6\u002Fsns-myagent --skill ray-so-code-snippet",{"tool":38,"command":39},"bunx","bunx skills add Reihantt6\u002Fsns-myagent --skill ray-so-code-snippet",{"tool":41,"command":42},"pnpm","pnpm dlx skills add Reihantt6\u002Fsns-myagent --skill ray-so-code-snippet","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fray-so-code-snippet\u002FSKILL.md",true,[],[47,54,61,68,75,82],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M77XDCYZ407XYMF2T4P6F7VT","youtube-transcript","Extract transcripts from YouTube videos. Use when the user asks for a transcript, subtitles, or captions of a YouTube video and provides a YouTube URL (youtube.com\u002Fwatch?v=, youtu.be\u002F, or similar). Supports output with or without timestamps.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-transcript\u002FSKILL.md",[],[],{"skillNo":55,"name":56,"nameZh":6,"description":57,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":19},"01M77XD7PBC98J6MXGJJ2TJ8DX","youtube-thumbnail-design","YouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization. Covers safe zones, text placement, face expression psychology, and A\u002FB testing. Use for: YouTube thumbnails, video cover images, click-through optimization. Triggers: youtube thumbnail, thumbnail design, video thumbnail, click through rate, ctr optimization, youtube cover, video cover image, thumbnail maker, thumbnail tips, youtube design, video preview image","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-thumbnail-design\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":19},"01M77XD2541C8HXJ6RHYZP4NGJ","youtube-short-maker","Make YouTube Shorts that hold attention with Pexo — vertical 9:16, fast-paced, hook in the first 3 seconds. Describe your topic and Pexo writes the script, generates the shots, picks the models, and assembles a finished Short with music and captions. Use for YouTube Shorts: \"youtube short\", \"make a youtube short\", \"shorts video\", \"short-form video\". NOT for long-form or landscape video.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-short-maker\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":19},"01M77XCXKVSYK7KTZ3PQBVVGFD","xcode-project-setup","Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fxcode-project-setup\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":19},"01M77XCR1DV8ZQK2NHWKVY4EWX","x402","Set up Browser Use Cloud payments with x402 — pay per request from a crypto wallet (USDC on Base mainnet), no signup or API key. Two setups it works out up front — \"just use it\" (set up a wallet so you or Claude Code can run cloud browser tasks paid from the wallet — Claude writes and runs throwaway scripts, nothing touches your codebase) or \"build it in\" (install the SDK and write the key + code into your project). Walks through wallet setup, funding, .env, and a ~$1 test run. Use when the user asks about x402, pay-per-use, USDC payments, or wants Browser Use Cloud without an API key. For the free-tier signup (reverse-CAPTCHA → API key), use `browser-use cloud signup` or the `cloud` skill instead.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fx402\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M77XCMD3R3ZBZQQSW6E0793B","x-twitter-scraper","Build GitHub Copilot workflows with Xquik X API SDKs, REST endpoints, hosted Apify Actor runs, MCP tools, TweetClaw OpenClaw plugin installs, signed webhooks, tweet search, user lookup, follower exports, media actions, and agent automation.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fx-twitter-scraper\u002FSKILL.md",[],[]]