dejiinaworks-png

Screenshot Kit — Testing skill for Claude Code

Testing community

Claude Code skill for automated screenshot & diagram generation.

How to install Screenshot Kit

This entry records only its repository, not the path inside it, so there is no exact command to give. Open dejiinaworks-png/screenshot-kit and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Screenshot Kit does

Claude Code skill for automated screenshot & diagram generation. Browser capture + HTML-to-PNG pipeline using Playwright.

Alternatives in Testing

Playwright — claude-plugins-official Browser automation, E2E testing, screenshots 29.4k ★
Playwright — Automate real browser interactions for navigation, forms, and scraping 14.6k ★
Playwright Automation — git clone Browser automation skill for end-to-end testing and web interaction 2.3k ★

README

📸 screenshot-kit

AI でマニュアル画像を量産するための Claude Code スキル。 HTML/CSS で描いた図解と、ブラウザ画面のスクショを自動生成できます。

特徴

🎨 HTML → PNG：パステルカラー + 絵文字で読みやすい図解を大量生成
🌐 URL → PNG：複数のWebページを一括スクショ（Cookie バナー自動閉じ対応）
📐 適切なサイズ：標準 1280×800 @1x（拡大しすぎない）
🔧 CLI ベース：任意のプロジェクトから呼び出し可能
🎯 Claude Code スキル：自然言語で発動できる

インストール

グローバル（全プロジェクト共通）

cd ~/.claude/skills/
git clone https://github.com/dejiinaworks-png/screenshot-kit.git
bash screenshot-kit/scripts/install-playwright.sh

プロジェクトローカル

cd your-project/.claude/skills/
git clone https://github.com/dejiinaworks-png/screenshot-kit.git

使い方

パターン1：ブラウザ画面を一括撮影

`capture-jobs.json` を作成：

[
  {
    "url": "https://claude.ai/",
    "out": "01/homepage.png",
    "waitFor": "networkidle",
    "delay": 2000,
    "desc": "Claude.ai トップ"
  },
  {
    "url": "https://cursor.com/",
    "out": "02/cursor-top.png",
    "waitFor": "domcontentloaded",
    "delay": 3000,
    "desc": "Cursor トップ"
  }
]

実行：

node ~/.claude/skills/screenshot-kit/scripts/browser-capture.mjs \
  --config ./capture-jobs.json \
  --out-dir ./public/images

パターン2：HTML 図解を PNG 化

`templates/` に HTML を配置：

templates/
├── 3-tier-relation.html
├── step-flow.html
└── pyramid.html

実行：

node ~/.claude/skills/screenshot-kit/scripts/diagram-generate.mjs \
  --templates-dir ./templates \
  --out-dir ./public/images/diagrams

オプション

引数	デフォルト	説明
`--viewport-width`	1280	画面の幅 (px)
`--viewport-height`	800 (browser) / 900 (diagram)	画面の高さ
`--scale`	1	Retina用に2にすると2倍解像度
`--config`	`./capture-jobs.json`	ジョブ定義 JSON
`--templates-dir`	`./templates`	HTML 入力フォルダ
`--out-dir`	`./output`	PNG 出力フォルダ