К основному содержанию
скилл CX Codex

snipgrapher — скилл для Claude Code: что делает и как установить

Генерирует изображения сниппетов кода в форматах PNG, SVG и WebP через утилиту snipgrapher. Пригодится для подготовки иллюстраций в документацию, чейнджлоги и публикации в соцсетях.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add mcollina/skills --skill snipgrapher -a claude-code
Открыть на GitHub

Что делает snipgrapher

Скилл учит агента создавать скриншоты кода с подсветкой синтаксиса через утилиту snipgrapher или npx. Инструмент поддерживает одиночные файлы, пакетную обработку и режим watch. Итоговые изображения можно сохранять в PNG, SVG или WebP. Стили и темы фиксируются в файле snipgrapher.config.json через именованные профили.

Перед серией снимков скилл советует выполнить npx snipgrapher init. Это исключит расхождения в оформлении. После сборки агент проверяет размер файла командой ls -lh, чтобы исключить пустой вывод. Если в профиле задан кастомный шрифт, операционная система должна содержать его заранее, иначе рендер упадёт.

Какие задачи решает

  • создать изображение с кодом в формате PNG, SVG или WebP
  • настроить файл конфигурации snipgrapher.config.json с именованными профилями
  • пакетно сгенерировать иллюстрации кода для документации и чейнджлогов
  • запустить режим watch для автоматического обновления картинок при правках исходников

Примеры запросов агенту

  • Сделай красивый PNG-скриншот файла src/index.ts с помощью snipgrapher
  • Инициализируй snipgrapher.config.json и сгенерируй SVG для docs/example.py по профилю default
  • Подготовь WebP-сниппеты из папки examples для публикации в чейнджлоге

Как установить snipgrapher

1Через Skills CLI (Vercel)

npx skills add mcollina/skills --skill snipgrapher -a claude-code

2Вручную: положить файлы

~/.claude/skills/snipgrapher/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/snipgrapher/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора11

typescript-magician Устраняет ошибки TypeScript, заменяет any на строгие типы и строит типобезопасные дженерики. Помогает навести порядок в типах кодовой базы. CX Codex +1 2 800установок nodejs-core Скилл для правок и отладки ядра Node.js: коммиты и PR в nodejs/node, нативные краши, V8, node-gyp, N-API и libuv. CX Codex +1 1 900установок documentation Скилл структурирует техническую документацию по фреймворку Diátaxis. Он помогает писать туториалы, инструкции how-to, справочники и концептуальные статьи без каши в структуре. CX Codex +1 1 800установок octocat Скилл связывает агента с Git и GitHub через gh CLI. Он пригодится для PR, issue, проверок CI, веток и анализа истории репозитория. CX Codex +1 1 300установок init Собирает AGENTS.md из того, что агент не выведет из кода: нестандартные команды, ловушки, локальные договорённости. И выкидывает из файла всё остальное. CX Codex +1 1 300установок oauth Настраивает авторизацию OAuth 2.0 и 2.1 в приложениях на Fastify с защитой через PKCE и ротацией токенов. Пригодится для проверки JWT, настройки сессий и устранения ошибок redirect URI. CX Codex +1 1 300установок skill-optimizer Скилл для тех, кто пишет и правит скиллы: помогает понять, почему модель их не применяет, и не ухудшают ли они вывод. CX Codex +1 1 400установок linting-neostandard-eslint9 Скилл настраивает ESLint 9 с flat config и базой neostandard в проектах на JavaScript и TypeScript. Помогает перейти с устаревшего .eslintrc и запустить проверки в CI. CX Codex +1 1 100установок

Похожие

baoyu-compress-image JimLiu Сжимает изображения в WebP или PNG через системные утилиты вроде sips и cwebp. Пригодится для быстрой оптимизации картинок прямо в репозитории проекта. CX Codex +1 28 200установок cli-anything-mermaid HKUDS Консольный интерфейс для создания и экспорта диаграмм Mermaid в SVG или PNG без графического редактора. Пригодится ИИ-агентам для визуализации архитектуры прямо из терминала. CX Codex +1 519установок excalidraw Agents365-ai Скилл рисует диаграммы, блок-схемы и схемы архитектуры в файлах .excalidraw и выгружает их в PNG или SVG. Пригодится, когда систему проще показать, чем описать словами. CX Codex +1 4 600установок tldraw-skill Agents365-ai Создаёт схемы в формате .tldr и экспортирует их в PNG или SVG через CLI. Пригодится для визуализации архитектуры сервисов и потоков данных. CX Codex +1 3 700установок hand-drawn-diagrams nexu-io Скилл генерирует скетч-диаграммы Excalidraw по текстовому запросу. Он создаёт анимированный SVG, ссылку для редактирования и выгрузку в PNG. CX Codex +1 2 800установок beautiful-mermaid intellectronica Рендерит диаграммы Mermaid в векторные SVG и растровые PNG через библиотеку Beautiful Mermaid. Пригодится для визуализации архитектуры, баз данных и рабочих процессов. CX Codex +1 1 800установок

Рядом в теме «Тексты и документация»

Всё по теме «Тексты и документация» →

Вопросы о snipgrapher

Как установить snipgrapher в Claude Code?

Выполните команду npx skills add mcollina/skills --skill snipgrapher -a claude-code.

Какие форматы файлов поддерживает snipgrapher?

Скилл позволяет сохранять сниппеты с подсветкой синтаксиса в PNG, SVG и WebP.

Что делать, если при генерации изображения возникает ошибка шрифта?

Убедитесь, что все пользовательские шрифты из конфига snipgrapher.config.json установлены в вашей операционной системе. При неподдерживаемом синтаксисе языка рендер переключается на обычный текст.

Исходный текст

SKILL.md · MIT
---
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.
metadata:
  tags: snipgrapher, snippets, images, svg, png, webp, cli
---

## 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:

```bash
npx snipgrapher render file.ts -o output.png
```

For ongoing use, initialise a project config first, then render:

```bash
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:

```bash
ls -lh output.png   # confirm file exists and size > 0
```

## How to use

Read these rule files in order:

- [rules/setup-and-configuration.md](rules/setup-and-configuration.md) - Install, select executable, initialize config, and define profiles
- [rules/rendering-workflows.md](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

© mcollina · MIT · mcollina/skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой