Ray So Code Snippet

Turns ray.so's gradient code screenshots into a proper CLI workflow. It fetches the latest themes and languages directly from ray.so's GitHub repo, walks you through every styling option (theme, padding, dark mode, background, line numbers), then uses agent-browser with the html-to-image library to capture at 4x resolution for crisp text. Smart enough to infer language from file extensions or syntax so you're not always answering questions. The implementation is thorough, maybe overly so. It base64 encodes your code, builds the URL hash correctly, and saves a PNG to your current directory. If you're already using ray.so manually and want to skip the browser, this automates the whole thing with better image quality than a screenshot.

skills.sh installs: 522
GitHub stars: 301
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add intellectronica/agent-skills --skill ray-so-code-snippet --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

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:

# 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

SKILL.md on GitHub