Name: snipgrapher
Author: mcollina

About

Imported from mcollina/skills (skills/snipgrapher/SKILL.md) via skills.sh. Install upstream with npx skills add mcollina/skills --skill snipgrapher. Copyright stays with the author.

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:

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 init to regenerate snipgrapher.config.json if the config file is missing or malformed

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/mcollina-skills-snipgrapher/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

mcollina-skills-snipgrapher.ocm.jsonjson

{
  "ocm": "1",
  "id": "mcollina-skills-snipgrapher",
  "kind": "skill",
  "name": "snipgrapher",
  "description": "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.",
  "publisher": "mcollina",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "snipgrapher",
      "snippets",
      "images",
      "svg",
      "png",
      "webp",
      "cli",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/mcollina/skills",
      "path": "skills/snipgrapher/SKILL.md",
      "ref": "HEAD",
      "url": "https://www.skills.sh/mcollina/skills/snipgrapher",
      "key": "mcollina/skills/skills/snipgrapher/SKILL.md"
    }
  },
  "instructions": "## When to use\n\nUse this skill when you need to:\n- Generate image snippets from source code\n- Configure reusable snippet rendering defaults\n- Batch-render snippet assets for docs, social posts, or changelogs\n- Use published `snipgrapher` from npm to generate snippet images\n\n## Quick start\n\nRender a single file to a PNG immediately with no config required:\n\n```bash\nnpx snipgrapher render file.ts -o output.png\n```\n\nFor ongoing use, initialise a project config first, then render:\n\n```bash\nnpx snipgrapher init          # creates snipgrapher.config.json\nnpx snipgrapher render file.ts --profile defa",
  "cost": {
    "context_tokens": 526
  }
}

Fetch it by URL: GET /api/v1/registry/mcollina-skills-snipgrapher/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.