intellectronica/agent-skills/ray-so-code-snippet

Name: ray-so-code-snippet
Author: intellectronica

Claude Code and agent skill by intellectronica/agent-skills

Trust tier 2

community

LLM review pending

Source check pending

Checking that the SKILL.md file is still in the repository.

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.

Install

npx vskill@latest install intellectronica/agent-skills/ray-so-code-snippet

SKILL.md

ray.so Code Snippet Image Generator

Generate beautiful code snippet images using 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:

bash

which agent-browser

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:

bash

# Fetch and parse available themes
curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u
 
# Fetch and parse available languages
curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/util/languages.ts" | grep -oE '^[[:space:]]*"?[a-zA-Z0-9+#-]+"?\s*:\s*\{' | sed 's/[[:space:]]*"//g;s/".*//;s/:.*//' | sort -u

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:

Question: "Which theme would you like?"
Description: "Available themes: [list ALL themes from curl output]"
Options (pick 4 popular ones for quick select):
- breeze (default, purple gradient)
- midnight (cyan-blue)
- vercel (minimalist dark)
- sunset (warm orange)
Note: User can select "Other" to type any theme from the full list

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:

Question: "Which language for syntax highlighting?"
Description: "Available languages: [list ALL languages from curl output]"
Options:
- auto (auto-detect)
- javascript
- python
- typescript
Note: User can select "Other" to type any language from the full list

3.3 Dark/Light Mode

Question: "Dark or light mode?"
Options:
- Dark mode (default)
- Light mode

3.4 Background

Question: "Show the gradient background?"
Options:
- Yes, show background (default)
- No, transparent/minimal background

3.5 Padding

Question: "How much padding around the code?"
Options:
- 16 (compact)
- 32 (small)
- 64 (medium, default)
- 128 (large)

3.6 Line Numbers

Question: "Show line numbers?"
Options:
- No (default)
- Yes

3.7 Title

Question: "Add a title above the code? (e.g., filename)"
Options:
- No title (default)
- Yes, add title
If yes, ask for the title text.

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:

bash

# 1. Base64 encode the code
CODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)
 
# 2. URL encode the base64 string
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
 
# 3. Build the URL with ALL parameters in the hash
# Format: https://ray.so/#param1=value1&param2=value2&code=ENCODED_CODE
# Do NOT include width parameter - let ray.so auto-size to fit content
URL="https://ray.so/#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}"
 
# Add optional parameters if needed:
# If lineNumbers: add "&lineNumbers=true" before &code=
# If title: add "&title=URL_ENCODED_TITLE" before &code=

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:

bash

# For code: for i in range(23):\n    print(i)
# Theme: midnight, Padding: 64, Dark mode: true, Background: true, Language: python, Title: test.py
 
CODE='for i in range(23):
    print(i)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
TITLE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('test.py'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&title=${TITLE_ENCODED}&code=${CODE_ENCODED}"
echo "$URL"

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.

bash

# Generate unique session name
SESSION="rayso-$(date +%s)"
 
# 1. Set viewport
agent-browser --session $SESSION set viewport 1400 900
 
# 2. Open the URL
agent-browser --session $SESSION open "$URL"
 
# 3. Wait for the page to fully render
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000
 
# 4. Load html-to-image library (same library ray.so uses internally)
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'
 
# 5. Capture at 4x resolution using html-to-image (produces crisp text)
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt
 
# 6. Close the browser
agent-browser --session $SESSION close
 
# 7. Convert data URL to PNG file
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > /path/to/output.png
 
# 8. Clean up temp file
rm /tmp/rayso-dataurl-$SESSION.txt

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"

python

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

Check which agent-browser - confirmed available

Fetch themes and languages:

bash

curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

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"

Build URL (all params in hash, no width for auto-sizing):

bash

CODE='def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&code=${CODE_ENCODED}"

Capture high-quality image:

bash

SESSION="rayso-$(date +%s)"
 
agent-browser --session $SESSION set viewport 1400 900
agent-browser --session $SESSION open "$URL"
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000
 
# Load html-to-image library
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'
 
# Capture at 4x resolution
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt
agent-browser --session $SESSION close
 
# Save as PNG
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > ./fibonacci.png
rm /tmp/rayso-dataurl-$SESSION.txt

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

This is the start of the file. Read the full SKILL.md on GitHub.

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/ray-so-code-snippet/SKILL.md

Popularity

Repository stars: 228
Repository forks: 18
7-day trend score: 27

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 17 Mar 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/intellectronica/agent-skills/ray-so-code-snippet/badge)](https://verified-skill.com/skills/intellectronica/agent-skills/ray-so-code-snippet)

Something wrong with this skill or its page? Tell us.