Snipgrapher
Skill ActiveConfigures and uses snipgrapher to generate polished code snippet images, including syntax-highlighted PNGs, SVGs, and WebP exports with custom themes, profiles, and styling options. Use when the user wants to create code screenshots, turn code into shareable images, generate pretty code snippets for docs or social posts, produce syntax-highlighted images from source files, or explicitly mentions snipgrapher. Supports single-file renders, batch jobs, watch mode, and reusable named profiles via the snipgrapher CLI or npx.
To allow users to easily create shareable, syntax-highlighted code snippet images for documentation, social media, or other visual content needs.
Features
- Generate syntax-highlighted code snippet images
- Export to PNG, SVG, and WebP formats
- Support custom themes, profiles, and styling
- Handle single-file renders, batch jobs, and watch mode
- Utilize snipgrapher CLI and npx
Use Cases
- Generate code screenshots from source files
- Create shareable images of code snippets for documentation
- Produce visually appealing code snippets for social media posts
- Automate the creation of batch image assets from code
Non-Goals
- Performing code analysis or linting
- Editing or modifying source code files
- Directly integrating with collaboration platforms beyond image generation
Workflow
- Install snipgrapher (if not present)
- Initialize project configuration (optional, for repeated use)
- Define desired profiles and styling options
- Render code snippets from source files
- Verify output image existence and size
Prerequisites
- Node.js and npm/npx installed
- snipgrapher CLI tool installed
Documentation
- info:Configuration & parameter referenceWhile the SKILL.md mentions configuration and profiles, it does not explicitly document all options, parameters, or their defaults. The quick start shows basic CLI flags but lacks a comprehensive reference.
Versioning
- info:Release ManagementThe `pushedAt` date indicates recent activity, but there is no explicit versioning information (like a `version` field in metadata or GitHub releases) in the SKILL.md or README. The installation via `npx` implies using the latest version.
Code Execution
- info:ValidationThe skill invokes the `snipgrapher` CLI. While the CLI itself likely performs validation, the skill's direct implementation doesn't show explicit schema validation for its inputs.
- warning:Error HandlingThe SKILL.md mentions troubleshooting common render failures but does not detail how the skill itself handles or reports errors from the `snipgrapher` CLI. The quick start suggests verifying output size, implying manual error checking.
Errors
- warning:Actionable error messagesThe SKILL.md mentions troubleshooting common render failures but doesn't provide structured, actionable error messages for specific failure modes or remediation steps directly within the skill's invocation.
Practical Utility
- warning:Edge casesThe SKILL.md lists troubleshooting steps for common render failures like missing fonts or unsupported syntax, but these are general and not explicitly documented as structured failure modes with recovery steps for the skill itself.
Safety
- info:Halt on unexpected stateThe SKILL.md mentions verifying output existence and size, implying a check for unexpected states, but does not explicitly list machine-readable preconditions or instruct to abort on pre-state issues.
Installation
npx skills add mcollina/skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
Trust Signals
Similar Extensions
Baoyu Compress Image
100Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "compress image", "optimize image", "convert to webp", or reduce image file size.
Convert Image Format
98Convert an image between PNG, JPEG, and WebP formats with quality control for web optimization.
Logo Creator
95Create logos using AI image generation. Discuss style/ratio, generate variations, iterate with user feedback, crop, remove background, and export as SVG. Use when user wants to create a logo, icon, favicon, brand mark, mascot, emblem, or design a logo.
Trader Regime
100Detect current market regime using npx neural-trader — bull/bear/ranging/volatile classification with recommended strategy
Setup
100Use first for install/update routing — sends setup, doctor, or MCP requests to the correct OMC setup flow
Project Session Manager
100Worktree-first dev environment manager for issues, PRs, and features with optional tmux sessions