ray-so-code-snippet by intellectronica/agent-skills
npx skills add https://github.com/intellectronica/agent-skills --skill ray-so-code-snippet使用 ray.so 生成精美的代码片段图片并保存到本地。
agent-browser 进行截图捕获(首先检查可用性)在继续之前,验证 agent-browser 是否可用:
which agent-browser
如果在 PATH 中未找到 agent-browser,请告知用户此技能需要 agent-browser,没有它无法继续。
使用 curl 从 ray.so 的 GitHub 仓库获取当前主题和语言:
# 获取并解析可用主题
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
# 获取并解析可用语言
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
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
必须使用 AskUserQuestion 询问每个参数,呈现所有可用选项。按此顺序询问参数:
呈现所有可用主题。在问题中,列出从步骤 2 获取的所有主题。示例:
问题:"您想要哪个主题?"
描述:"可用主题:[列出 curl 输出中的所有主题]"
选项(为快速选择挑选 4 个流行的):
- breeze(默认,紫色渐变)
- midnight(青色-蓝色)
- vercel(极简深色)
- sunset(暖橙色)
注意:用户可以选择"其他"来输入完整列表中的任何主题
尽可能推断语言。 在以下情况下跳过此问题:
.py → python,.js → javascript,.ts → typescript,.rs → rust,.go → go 等)def/import → python,func/package → go,fn/let mut → rust)只有在无法自信推断语言时才询问此问题:
问题:"语法高亮使用哪种语言?"
描述:"可用语言:[列出 curl 输出中的所有语言]"
选项:
- auto(自动检测)
- javascript
- python
- typescript
注意:用户可以选择"其他"来输入完整列表中的任何语言
问题:"深色模式还是浅色模式?"
选项:
- 深色模式(默认)
- 浅色模式
问题:"显示渐变背景吗?"
选项:
- 是,显示背景(默认)
- 否,透明/极简背景
问题:"代码周围需要多少内边距?"
选项:
- 16(紧凑)
- 32(小)
- 64(中等,默认)
- 128(大)
问题:"显示行号吗?"
选项:
- 否(默认)
- 是
问题:"在代码上方添加标题吗?(例如,文件名)"
选项:
- 无标题(默认)
- 是,添加标题
如果选择是,则询问标题文本。
注意:不要询问输出路径/文件名。保存到当前工作目录,使用合理的文件名(例如,rayso-snippet.png,或如果提供了标题则基于标题,如 fibonacci.png)。只有在用户在其原始请求中明确指定了不同路径时才使用其他路径。
关键:所有参数必须在 URL 哈希中(在 # 之后),而不是在查询字符串中。
使用 shell 命令构建 URL:
# 1. 对代码进行 Base64 编码
CODE_BASE64=$(echo -n 'YOUR_CODE_HERE' | base64)
# 2. 对 base64 字符串进行 URL 编码
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
# 3. 构建 URL,所有参数都在哈希中
# 格式:https://ray.so/#param1=value1¶m2=value2&code=ENCODED_CODE
# 不要包含 width 参数 - 让 ray.so 自动调整大小以适应内容
URL="https://ray.so/#theme=THEME&padding=PADDING&background=BACKGROUND&darkMode=DARKMODE&language=LANGUAGE&code=${CODE_ENCODED}"
# 如果需要,添加可选参数:
# 如果启用行号:在 &code= 之前添加 "&lineNumbers=true"
# 如果有标题:在 &code= 之前添加 "&title=URL_ENCODED_TITLE"
URL 哈希参数:
| 参数 | 值 | 默认值 |
|---|---|---|
| theme | 列表中的任何主题 | breeze |
| padding | 16, 32, 64, 128 | 64 |
| background | true, false | true |
| darkMode | true, false | true |
| language | 列表中的任何语言,或 "auto" | auto |
| lineNumbers | true, false | false |
| title | URL 编码的字符串 | (无) |
| width | 数字(像素) | auto |
| code | Base64 编码,然后 URL 编码 | (必需) |
关于 width 的说明: 除非特别需要固定宽度,否则不要包含 width 参数。没有它,ray.so 会自动调整框架大小以适应代码内容,避免不必要的空白。
URL 构建示例:
# 代码:for i in range(23):\n print(i)
# 主题:midnight,内边距:64,深色模式:true,背景:true,语言:python,标题: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"
必须使用 agent-browser(在步骤 1 中已验证)。此方法使用 html-to-image 库(与 ray.so 的内部导出功能相同),具有高 pixelRatio,可实现清晰锐利的文本渲染。
重要: 始终使用带有 --session 的唯一会话名称,以避免会话陈旧问题。
# 生成唯一会话名称
SESSION="rayso-$(date +%s)"
# 1. 设置视口
agent-browser --session $SESSION set viewport 1400 900
# 2. 打开 URL
agent-browser --session $SESSION open "$URL"
# 3. 等待页面完全渲染
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000
# 4. 加载 html-to-image 库(与 ray.so 内部使用的库相同)
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. 使用 html-to-image 以 4 倍分辨率捕获(产生清晰的文本)
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt
# 6. 关闭浏览器
agent-browser --session $SESSION close
# 7. 将数据 URL 转换为 PNG 文件
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. 清理临时文件
rm /tmp/rayso-dataurl-$SESSION.txt
关键注意事项:
html-to-image 库,这是 ray.so 用于其自身导出功能的库pixelRatio: 4 产生高 DPI 图像,文本清晰锐利(4 倍原生分辨率)向用户报告保存的文件位置。任务完成 - 截图保存后,不要执行任何额外的检查、探索或验证。
用户:"为此 Python 函数创建代码片段图片"
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
检查 which agent-browser - 确认可用
获取主题和语言:
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
通过 AskUserQuestion 向用户询问参数:
def 语法推断为 python - 未询问构建 URL(所有参数在哈希中,无 width 参数以自动调整大小):
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}"
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
# 加载 html-to-image 库
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)})'
# 以 4 倍分辨率捕获
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
# 保存为 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
此技能使用带有 pixelRatio: 4 的 html-to-image 库来生成具有清晰锐利文本的高质量图像。这与 ray.so 用于其内置导出功能的渲染方法相同。
输出质量:
调整分辨率:
pixelRatio:4 更改为 pixelRatio:2pixelRatio:6(与 ray.so 的 "6x" 导出选项相同)强制特定宽度:
&width=NUMBER(例如,为了跨多个图像保持一致的尺寸)#title=filename.py&code=...#frame > div 可能已更改;检查页面结构--session 标志的新的唯一会话名称每周安装数
162
仓库
GitHub 星标数
228
首次出现
2026 年 1 月 21 日
安全审计
安装于
claude-code139
opencode135
codex129
gemini-cli129
cursor121
github-copilot110
Generate beautiful code snippet images using ray.so and save them locally.
agent-browser for screenshot capture (check availability first)Before proceeding, verify that agent-browser is available:
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.
Fetch the current themes and languages from ray.so's GitHub repository using curl:
# 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
MUST use AskUserQuestion to ask for EVERY parameter, presenting ALL available options. Ask for parameters in this order:
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
Infer the language when possible. Skip this question if:
.py → python, .js → javascript, .ts → typescript, .rs → rust, .go → go, etc.)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
Question: "Dark or light mode?"
Options:
- Dark mode (default)
- Light mode
Question: "Show the gradient background?"
Options:
- Yes, show background (default)
- No, transparent/minimal background
Question: "How much padding around the code?"
Options:
- 16 (compact)
- 32 (small)
- 64 (medium, default)
- 128 (large)
Question: "Show line numbers?"
Options:
- No (default)
- Yes
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.
CRITICAL: ALL parameters must be in the URL hash (after #), NOT in the query string.
Build the URL using shell commands:
# 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¶m2=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:
# 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"
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.
# 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:
html-to-image library which is what ray.so uses for its own export featurepixelRatio: 4 produces high-DPI images with crisp, sharp text (4x native resolution)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.
User: "Create a code snippet image of this Python function"
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:
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:
def syntax - not askedBuild URL (all params in hash, no width for auto-sizing):
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}"
5. Capture high-quality image:
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
6. Report: "Saved code snippet image to ./fibonacci.png"
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:
Adjusting resolution:
pixelRatio:4 to pixelRatio:2 in the eval commandpixelRatio:6 (same as ray.so's "6x" export option)Forcing a specific width:
&width=NUMBER to the URL if you need a fixed width (e.g., for consistent sizing across multiple images)#title=filename.py&code=...#frame > div may have changed; inspect the page structure--session flagWeekly Installs
162
Repository
GitHub Stars
228
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykFail
Installed on
claude-code139
opencode135
codex129
gemini-cli129
cursor121
github-copilot110
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
152,900 周安装
Opencage自动化工具:通过Rube MCP实现地理编码与反向地理编码自动化
1 周安装
Needle自动化工具包:通过Rube MCP实现Needle操作自动化
1 周安装
Hummingbot幻灯片生成器:从Markdown创建品牌风格PDF演示文稿,支持Mermaid图表
145 周安装
MX Toolbox自动化技能 - 集成Claude AI与MX记录查询工具,提升网络管理效率
1 周安装
Mural自动化技能 - 通过ComposioHQ集成Claude AI实现自动化工作流
1 周安装
Missive自动化工具:通过Rube MCP和Composio实现邮件协作自动化
1 周安装