gs-brand-doc について
gs-brand-docは、Markdown文書にGeneric Serviceのブランドスタイルを適用し、PDFを生成するスキルです。ブランド提案書などの作成向けで、ローカルテンプレートやReactによるPDF生成にも対応します。
主な機能
- 01文書へのGSブランドスタイル適用
- 02MarkdownからのPDF生成
- 03ロゴとページ番号の追加
- 04React PDFレンダリング対応
活用シーン
- 01ブランド提案書PDFの作成
- 02MarkdownへのGSスタイル適用
- 03ReactプロジェクトでのPDF生成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ genericservice/ claude-skills --skill gs-brand-docインストール後、Claude Code で/gs-brand-docを入力して読み込まれたか確認します。
同梱ファイルassets/gs-brand.cssscripts/generate_pdf.sh
詳細
GS ブランドドキュメントジェネレーター
このスキルは、最新のウェブベースツールを使って、Generic Service(GS)の産業向けブランドアイデンティティを Markdown ドキュメントに適用し、洗練されたブランド仕様の PDF を出力するためのリソースを提供します。
PDF 生成の基本方針:スタイル付き PDF や提案書の作成を依頼された場合は、必ず汎用の pdf スキルではなく、まずこのスキルを使用します。生成する前に、ワークスペースにローカルのテンプレートシステム(例:components/pdf/、scripts/generate-pdf、または package.json 内の @react-pdf/renderer)があるかを積極的に確認します。ローカルテンプレートがあれば、それを使用します。なければ、以下に記載する GS ブランドのスタイルシートを使用します。
ブランドガイドライン
GS ブランドのパレット(v4)は、工業的でコントラストの強い外観が特徴です。
- フォント:IBM Plex Mono(本文は最低 15px、ラベルは 13px)
- アンバー:
#D4A843 - ニアブラック:
#0A0A0A - ウォームホワイト:
#F5F0EB - ライトアクセント:
#7A5C0F - システムグレー:
#6B6B6B - 本文グレー:
#808080
ロゴは GS のダークマークです:https://genericservice.app/brand/gs-mark-dark-192.png。
ブランド仕様の PDF を生成する(Markdown から PDF へ)
Markdown ファイル(例:proposal.md)に GS ブランドを適用して PDF を生成するには、付属のスクリプトを使用します。
bash <path-to-skill>/scripts/generate_pdf.sh <path-to-markdown-file>
このスクリプトは npx -y md-to-pdf を自動的に使用し、assets/gs-brand.css スタイルシートを適用して印刷マージンを設定し、ヘッダーに GS ロゴ、フッターにページ番号を追加します。
ヘッドレス Chrome のトラブルシューティング(Linux)
この Linux 環境で md-to-pdf、Puppeteer、または Playwright を実行する際、Chromium の起動に失敗することがよくあります。失敗時の復旧にかかる手間を省くため、ブラウザーの引数(または CLI フラグ。例:md-to-pdf --launch-options '{ "args": ["--no-sandbox", "--disable-setuid-sandbox"] }')に --no-sandbox と --disable-setuid-sandbox が渡されていることを必ず確認してください。
例
bash ~/.gemini/skills/gs-brand-doc/scripts/generate_pdf.sh ../azdocs/proposal.md
最新のスタックへの対応
プロジェクトで Next.js/React が使われている場合は、package.json 内に @react-pdf/renderer があるか確認します。存在する場合は、Markdown 変換ではなく React コンポーネントを使ってプログラムから PDF を生成してください。これにより、GS ブランドに沿った、より洗練されたレイアウトを作成できます。
エージェント型ワークフローとバイブコーディング
- ドキュメントの反復的な生成: 特に複雑な Markdown の表や画像がある場合、最初の実行で PDF のレイアウトが完璧になるとは限りません。Markdown を下書きし、PDF を生成して出力を確認し、特定の書式やマージンの問題を切り分け、Markdown の構造または CSS のオーバーライドを一度に 1 つずつ調整して、ブランド基準を満たすまで再生成します。
- バイブコーディング: 大幅なレイアウト変更を行う前や、複雑な CSS 印刷ルールのオーバーライドを試す前に、作業中の Markdown の下書きをローカルにコミットします。
CSS アセット
HTML を生成する場合や別のツールを使う場合は、元の CSS ファイルが assets/gs-brand.css にあります。ドキュメントのレンダリングに合わせて調整された印刷メディアクエリが含まれています。