ray-so-code-snippet_skill

Overview

This skill generates beautiful code snippet images using ray.so and saves them locally. It walks you through selecting every styling parameter, builds a proper ray.so share URL with the code embedded, and captures a high-quality PNG using agent-browser.

How this skill works

It asks for the code (or uses a supplied file/selection), fetches available themes and languages (or uses sensible defaults), and prompts for every styling option. It base64-encodes the code, constructs a URL with all parameters in the hash, then uses agent-browser and the html-to-image library to render a high-DPI PNG and save it to the current working directory.

When to use it

• You want a polished code image for social sharing, docs, or slides.
• You need syntax-highlighted screenshots of code with consistent styling.
• You want a reproducible, scriptable way to produce high-DPI code images.
• You need the image saved locally (not just a URL) for further processing or upload.

Best practices

• Provide the code snippet or point to a file/selection up front; the skill requires the code before generating.
• Confirm all styling options before generation: theme, language (if not inferrable), dark/light, background, padding, line numbers, and optional title.
• Ensure agent-browser is installed and on PATH; the skill will not proceed without it.
• Allow the skill to auto-size (omit width) unless you explicitly need a fixed pixel width.
• Use pixelRatio 4 (default) for crisp text; lower or raise only if you know the trade-offs.

Example use cases

• Create a Twitter-ready screenshot of a short Python function with a gradient background and title.
• Generate consistent code images for a tutorial series using the same theme, padding, and optional filenames.
• Convert a selected code file into a high-resolution PNG for documentation or presentations.
• Produce multiple images from long code by splitting into chunks and rendering each with identical styling.