AIKraft/AI/Войти
AIKraft/Skills/snipgrapher

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

mcollina official Дизайн

Что делает навык

Настройка и использование snipgrapher для создания качественных изображений сниппетов кода (PNG, SVG, WebP) с подсветкой синтаксиса, кастомными темами и стилями. Используется для генерации визуальных фрагментов кода из исходных файлов.

Когда применять

  • Генерация изображений сниппетов из исходного кода
  • Настройка переиспользуемых параметров рендеринга по умолчанию
  • Пакетная обработка сниппетов для документации, постов в соцсетях или журналов изменений
  • Использование опубликованного пакета snipgrapher из npm для генерации изображений

Как работает

  1. Для разовой генерации выполнить команду npx snipgrapher render <файл> -o <выходной_файл>
  2. Для постоянной работы инициализировать конфигурацию проекта
  3. Использовать инициализированную конфигурацию для рендеринга файлов
  4. Применять кастомные темы, профили и стили при необходимости

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

Создай изображение сниппета из файла main.ts и сохрани как output.png
Настрой конфигурацию проекта для snipgrapher, чтобы использовать её для будущих рендеров
Сгенерируй пакет изображений кода для документации из папки src

Что понадобится

  • Node.js (для работы с npx и npm)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «snipgrapher» из репозитория: # https://github.com/mcollina/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r snipgrapher/ ~/.claude/skills/snipgrapher/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.