snipgrapher
snipgrapherを設定・使用して、カスタムテーマやプロファイル、スタイリングオプションを活かしたシンタックスハイライト付きのPNG・SVG・WebP形式のコードスニペット画像を生成します。コードのスクリーンショット作成、ドキュメントやSNS投稿向けの見栄えの良いコード画像の生成、ソースファイルからのシンタックスハイライト画像の作成、またはユーザーが明示的にsnipgrapherについて言及した際に使用します。snipgrapher CLIまたはnpx経由で、単一ファイルのレンダリング、バッチ処理、ウォッチモード、再利用可能な名前付きプロファイルをサポートします。
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.
SKILL.md 本文
使用時期
このスキルは以下が必要な場合に使用します:
- ソースコードからイメージスニペットを生成する
- 再利用可能なスニペットレンダリングのデフォルト設定を行う
- ドキュメント、ソーシャルメディア投稿、チェンジログ用のスニペットアセットをバッチレンダリングする
- npm から公開されている
snipgrapherを使用してスニペットイメージを生成する
クイックスタート
設定不要で、単一ファイルを PNG にすぐレンダリングします:
npx snipgrapher render file.ts -o output.png
継続的な使用の場合は、まずプロジェクト設定を初期化してからレンダリングします:
npx snipgrapher init # creates snipgrapher.config.json
npx snipgrapher render file.ts --profile default -o output.png
レンダリング後、出力ファイルが存在し、ファイルサイズがゼロより大きいことを確認してから、ジョブが成功したと判断してください:
ls -lh output.png # confirm file exists and size > 0
使用方法
これらのルールファイルを順番に読んでください:
rules/setup-and-configuration.md- インストール、実行可能ファイルの選択、設定の初期化、プロファイルの定義rules/rendering-workflows.md- 単一スニペットのレンダリング、バッチジョブ、ウォッチモード、出力プラクティス
コア原則
- 最初に設定: 繰り返しレンダリングする前にプロジェクト設定を確立する
- 再現可能な出力: 名前付きプロファイルと明示的な出力パスを優先する
- ポータブルコマンド: インストール済みバイナリと
npxで動作するコマンドパターンを使用する - オートメーション対応: CLI フラグ/設定/環境変数の優先順位を意図的に活用する
レンダリング失敗の一般的なトラブルシューティング
レンダリングが失敗するか、予期しない出力が生成される場合は、以下の一般的な原因を確認してください:
- フォント不足: プロファイルまたは設定で指定されたカスタムフォントがシステムにインストールされていることを確認します
- サポートされていない構文: 言語/拡張子が snipgrapher でサポートされていることを確認します。サポートされていない場合はプレーンテキストハイライトにフォールバックします
- 出力が空または破損している:
--verboseフラグ(サポートされている場合)で再実行してエラー詳細を表示し、入力ファイルが読み取り可能で空でないことを確認します - プロファイルが見つからない: 設定ファイルが見つからないまたは不正な形式の場合は、
npx snipgrapher initを実行してsnipgrapher.config.jsonを再生成します
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- mcollina
- リポジトリ
- mcollina/skills
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/mcollina/skills / ライセンス: MIT
関連スキル
nature-response
Nature系ジャーナルの原稿修正に対する査読者への回答文について、下書き、チェック、または修正を行うことができます。査読者からのコメント、編集者の決定文、修正指示、回答案の作成、または大幅修正・軽微修正の対応方法に関するご相談があれば、対応いたします。査読報告書や回答文作成のサポートが必要な場合にご利用ください。
microsoft-docs
公式のMicrosoft文書を参照して、Azure、.NET、Agent Framework、Aspire、VS Code、GitHubなど様々な分野の概念、チュートリアル、コード例を検索します。デフォルトではMicrosoft Learn MCPを使用し、learn.microsoft.com外のコンテンツについてはContext7およびAspire MCPを使用します。
API Documentation Lookup
このスキルは、ユーザーが「Effect APIを調べる」「Effectドキュメントを確認する」「Effect関数のシグネチャを探す」「Effect.Xは何をするのか」「Effect.Xの使い方」「Effect APIリファレンス」「Effectドキュメントを取得する」といった質問をした場合や、公式のEffect-TS APIドキュメントから特定の関数シグネチャ、パラメータ、使用例を調べる必要がある場合に使用します。
knowledge-base
このスキルは、ヘルプセンターのアーキテクチャ設計、サポート記事の執筆、検索とセルフサービスの最適化が必要な場合に活用できます。ナレッジベース、ヘルプセンター、サポート記事、セルフサービス、記事テンプレート、検索最適化、コンテンツ分類、ヘルプドキュメントの設計・管理に関するあらゆるタスクで動作します。
markdown
GitHub Flavored Markdown標準に従ったMarkdownファイルのフォーマットと検証ができます。自動的なlinting処理と手動による意味的なレビューを組み合わせることで、ファイルの品質を確保します。
claude-md-enhancer
CLAUDE.mdファイルをプロジェクトタイプに合わせて分析・生成・改善します。ベストプラクティス、モジュール設計対応、技術スタックのカスタマイズに対応しています。新規プロジェクトの立ち上げ、既存のCLAUDE.mdファイルの改善、またはAI支援開発の標準化を図る際にご活用ください。