Snipgrapher
Configures and uses snipgrapher to generate polished code snippet images, including...
Install
npx skills add mcollina/skills --skill snipgrapher -g -a claude-code -y- Repository
- mcollina/skills2k
- Category
- Engineering
- Updated
- 8d ago
- License
- MIT
- Context cost
- Lightabout 527 tokens
- Runs scripts
- No, instructions only
What it does
Configures 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.
When to use
Use this skill when you need to:
- Generate image snippets from source code
- Configure reusable snippet rendering defaults
- Batch-render snippet assets for docs, social posts, or changelogs
- Use published
snipgrapherfrom npm to generate snippet images
Quick start
Render a single file to a PNG immediately with no config required:
npx snipgrapher render file.ts -o output.png
For ongoing use, initialise a project config first, then render:
npx snipgrapher init # creates snipgrapher.config.json
npx snipgrapher render file.ts --profile default -o output.png
After rendering, verify the output exists and is non-zero in size before treating the job as successful:
ls -lh output.png # confirm file exists and size > 0
How to use
Read these rule files in order:
- rules/setup-and-configuration.md - Install, select executable, initialize config, and define profiles
- rules/rendering-workflows.md - Render single snippets, batch jobs, watch mode, and output practices
Core principles
- Configure first: establish a project config before repeated renders
- Reproducible output: prefer named profiles and explicit output paths
- Portable commands: use command patterns that work with installed binaries and
npx - Automation-friendly: rely on CLI flags/config/env precedence intentionally
Troubleshooting common render failures
If a render fails or produces an unexpected output, check for these common causes:
