Consulting Slide Generator

コンサルティングファーム品質のスライド図解をHTML+Tailwindで生成。McKinsey/BCG風のビジネス資料、提案書、プレゼンテーション用の図解を作成する際に使用。対応: (1) 課題提起スライド（数字+プログレスバー）, (2) ソリューションフロー（ステップ図）, (3) 2x2マトリクス（軸に意味...

Security Scan

The skill's files and runtime instructions match its stated purpose (generate HTML slides and convert them to PNG); no hidden endpoints, secret access, or unrelated privileges were found — but it relies on a local headless Chrome binary and pulls CSS/fonts from public CDNs, which you should be aware of before running.

Purpose & Capability

The skill's name/description (generate consulting-quality slides as HTML + Tailwind and convert to PNG) matches the included templates and examples. One inconsistency: metadata lists no required binaries, but the provided html2png.sh invokes google-chrome --headless, so a headless Chrome/Chromium binary is effectively required to produce PNGs.

Instruction Scope

SKILL.md describes reading templates, writing HTML to slides/<project>/<slide>.html and converting to PNG via scripts/html2png.sh. The instructions do not attempt to read unrelated system files, environment variables, or send data to non-standard endpoints. Note: templates load tailwind (cdn.tailwindcss.com) and Google Fonts (fonts.googleapis.com) at render time — rendering the HTML will make network requests to those CDNs.

Install Mechanism

There is no install spec (instruction-only) and only a small conversion script is included. No archives are downloaded by the skill itself. However, the skill assumes an existing headless Chrome/Chromium binary; it does not provide/install one.

Credentials

The skill declares no required environment variables, credentials, or config paths. Its templates and scripts do not reference any secrets or unrelated environment variables.

Persistence & Privilege

The skill does not request persistent presence (always:false), does not modify other skills or system-wide settings, and does not store credentials. It reads/writes files under the project (slides/...) as described.

Assessment

This skill appears to do exactly what it says: generate HTML slides (Tailwind + Google Fonts) and convert them to PNG using a local headless Chrome. Before installing/running: 1) Ensure you have google-chrome or chromium-headless on PATH (the skill metadata didn't declare this dependency). 2) Be aware that rendering the HTML will load resources from cdn.tailwindcss.com and fonts.googleapis.com (network requests to public CDNs). If you need offline or private usage, swap those CDN references for local copies. 3) The included scripts write files under your working directory (e.g., slides/<project>/<slide>.html) and run a local binary to produce PNGs — run in a sandbox if the source is untrusted. 4) If you want a stricter declaration, ask the maintainer to add 'google-chrome' (or chromium) to the declared required binaries or provide an alternative conversion path (e.g., instructions for headless Chromium or puppeteer).

コンサルファーム品質のスライド図解をHTML+Tailwindで生成する。

生成ワークフロー

Step 1: スライドタイプを特定

タイプ	用途	テンプレート
problem	課題提起（数字で説得）	assets/templates/problem.html
solution	ソリューションフロー	assets/templates/solution.html
matrix	2x2マトリクス	assets/templates/matrix.html
compare	比較・Do/Don't	assets/templates/compare.html
process	プロセスフロー	assets/templates/process.html

Step 2: テンプレートを読み込み、内容を置換

Step 3: HTMLを保存

slides/<project-name>/<slide-name>.html

Step 4: PNGに変換

bash scripts/html2png.sh input.html output.png

デザイン原則

詳細は references/design-principles.md を参照。

必須ルール

1. 12カラムグリッド - grid-cols-12 で構成
2. 3レベル階層 - Eyebrow → Title → Body
3. 2-3色配色 - Navy + Accent (Red/Green/Gold)
4. 意図的な余白 - 詰め込まない
5. 数字は大きく - text-5xl font-black + プログレスバー

配色

Navy:   #0f172a, #1e293b, #334155
Red:    #dc2626
Green:  #059669
Gold:   #ca8a04

フォント

• Noto Sans JP (Google Fonts CDN)
• ウェイト: 300, 400, 500, 700, 900

スライドタイプ別ガイド

Problem（課題提起）

• 左: メッセージ / 右: 数字+プログレスバー
• 推定値には注釈

Solution（ソリューション）

• ステップ横並び（5段階）
• Navy→Greenグラデーション
• 下部に効果3カラム

Matrix（2x2）

• 軸に意味を持たせる
• 各セルに優先度バッジ

Compare（比較）

• Do/Don't 2カラム
• ✓/✗ アイコン

Process（プロセス）

• 縦フロー + ゲート
• Yes/No分岐

出力仕様

• 解像度: 1200 x 675 px
• フォーマット: HTML → PNG