Agent skill · creative production · mcollina
snipgrapher
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.
Why this skill is useful
Provides specific commands and configuration patterns for generating code snippet images that the AI wouldn't reliably generate on its own.
What it needs
Requires snipgrapher installed locally. About 2k tokens when loaded. Last updated 2026-08-03. 1,894 stars on the source repository.
What this skill does
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 snipgrapher from npm to generate snippet images Quick start Render a single file to a PNG immediately with no config required: For ongoing use, initialise a project config first, then render: After rendering, verify the output exists and is non-zero in size before treating the job as successful: 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 init to regenerate snipgrapher.config.json if the config file is missing or malformed
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mcollina/snipgrapher