Name: pwa-screenshots
Author: newt239

Imported from newt239/newt239.dev (.claude/skills/pwa-screenshots/SKILL.md). Install upstream with npx skills add newt239/newt239.dev --skill pwa-screenshots. Copyright stays with the author.

PWA スクリーンショットの撮り直し

public/screenshots/ は手動撮影で、生成スクリプトは持たない。

手順

pnpm run generate でビルドする
pnpm run serve:static を起動する（.output/public を localhost:3100 で配信）
Chrome を --remote-debugging-port 付きで立ち上げる
CDP の Emulation.setDeviceMetricsOverride でビューポートを指定し、Page.captureScreenshot で撮る

--headless --window-size は使えない。Chrome のウィンドウ幅の下限 500px が効いてしまい、390px を指定しても 500px でレイアウトした結果を切り取った画像になる。

Chrome のリッチインストール UI の制約

JPEG か PNG
320〜3840px
最大辺が最小辺の 2.3 倍以内
form_factor ごとに同一アスペクト比

現在は narrow が 780x1688（390x844 を DPR 2 で撮影）、wide が 1280x800。

{ "ocm": "1", "id": "newt239-newt239-dev-pwa-screenshots", "kind": "skill", "name": "pwa-screenshots", "description": "newt239.dev の public/screenshots/ を撮り直す手順。PWA のリッチインストール UI 用スクリーンショットを差し替えるとき、または manifest の screenshots を更新するときに使う。", "publisher": "newt239", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "newt239.dev の public/screenshots/ を撮り直す手順。PWA のリッチインストール UI 用スクリーンショットを差し替えるとき、または manifest の screenshots を更新するときに使う。" ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/newt239/newt239.dev", "path": ".claude/skills/pwa-screenshots/SKILL.md", "ref": "863f9cef5db2ca586ed20bbe767051ee2d6c51b8", "url": "https://github.com/newt239/newt239.dev/blob/863f9cef5db2ca586ed20bbe767051ee2d6c51b8/.claude/skills/pwa-screenshots/SKILL.md", "key": "newt239/newt239.dev/.claude/skills/pwa-screenshots/SKILL.md" } }, "instructions": "# PWA スクリーンショットの撮り直し\n\n`public/screenshots/` は手動撮影で、生成スクリプトは持たない。\n\n## 手順\n\n1. `pnpm run generate` でビルドする\n2. `pnpm run serve:static` を起動する（`.output/public` を localhost:3100 で配信）\n3. Chrome を `--remote-debugging-port` 付きで立ち上げる\n4. CDP の `Emulation.setDeviceMetricsOverride` でビューポートを指定し、`Page.captureScreenshot` で撮る\n\n`--headless --window-size` は使えない。Chrome のウィンドウ幅の下限 500px が効いてしまい、390px を指定しても 500px でレイアウトした結果を切り取った画像になる。\n\n## Chrome のリッチインストール UI の制約\n\n- JPEG か PNG\n- 320〜3840px\n- 最大辺が最小辺の 2.3 倍以内\n- `form_factor` ごとに同一アスペクト比\n\n現在は narrow が 780x1688（390x844 を DPR 2 で撮影）、wide が 1280x800。", "cost": { "context_tokens": 145 } }

pwa-screenshots

About

PWA スクリーンショットの撮り直し

手順

Chrome のリッチインストール UI の制約

Use it

Manifest

Reviews