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:
- Missing fonts: ensure any custom font specified in the profile or config is installed on the system
- Unsupported syntax: confirm the language/extension is supported by snipgrapher; fall back to plain text highlighting if not
- Empty or corrupt output: re-run with
--verbose(if supported) to surface error details, and verify the input file is readable and non-empty - Profile not found: run
npx snipgrapher initto regeneratesnipgrapher.config.jsonif the config file is missing or malformed