before-and-after

Before-After スクリーンショットスキル

パッケージ： @vercel/before-and-after before-and-after は使用しないでください（パッケージ名が間違っています）。

エージェントの動作ルール

禁止事項：

• ブランチを切り替えたり、別タスクの変更を一時退避したりしないでください。タスクで既に許可されているベースラインサーバーには、独立したワークツリーを使用してください。
• ユーザーがページ全体／全スクロール範囲のキャプチャを明示的に求めない限り、--full を使用しないでください。

必須事項：

• ユーザーが PR への統合や Markdown 出力を求めている場合は、--markdown を使用してください。
• ユーザーがスマートフォン、モバイル、タブレット、レスポンシブなどに言及している場合は、--mobile ／ --tablet を使用してください。
• タスク内で既に確定している before キャプチャ、ベースライン URL、リビジョン情報を再利用してください。それらが該当する動作を示し、after キャプチャとビューポートおよび開始状態が一致していることを確認してください。
• タスクの文脈から現在の状態が after だと判断できる場合に限り、現在の状態を after として扱ってください。利用可能なコンテキストを確認しても before の状態が不明な場合は、不足しているベースラインを尋ねてください。有効な画像ペアや以前のベースラインが既にある場合は、URL を再度尋ねないでください。

キャプチャと納品

1. インストール済みの before-and-after CLI または npx @vercel/before-and-after を使用してください。
2. リモート URL の場合は、必要に応じてアクセスを確認してください。401/403 は保護されていることを示します。既存の画像ペアがある場合、URL やデプロイへのアクセス確認は不要です。
3. 不足している画像は before-and-after "<before-url>" "<after-url>" でキャプチャしてください。
4. アップロードした証拠や PR 用 Markdown が必要な場合は、before-and-after before.png after.png --markdown を一度実行してください。ローカルでのキャプチャ依頼の場合は、アップロードせずにファイルを納品してください。
5. PR への統合がタスクに含まれる場合は、Markdown を PR に追加してください。

同梱スクリプトのパスは、プロジェクトの作業ディレクトリではなく、このスキルのディレクトリを基準に解決してください。再キャプチャする代わりに、以前の証拠を再利用してください。

クイックリファレンス

# Basic usage
before-and-after <before-url> <after-url>

# With selector
before-and-after url1 url2 ".hero-section"

# Different selectors for each
before-and-after url1 url2 ".old-card" ".new-card"

# Viewports
before-and-after url1 url2 --mobile    # 375x812
before-and-after url1 url2 --tablet    # 768x1024
before-and-after url1 url2 --full      # full scroll

# From existing images
before-and-after before.png after.png --markdown

# Via npx (use full package name!)
npx @vercel/before-and-after url1 url2

フラグ	説明
-m, --mobile	モバイルのビューポート（375x812）
-t, --tablet	タブレットのビューポート（768x1024）
--size <WxH>	カスタムビューポート
-f, --full	スクロール可能なページ全体
-s, --selector	キャプチャする CSS セレクター
-o, --output	出力ディレクトリ（デフォルト：~/Downloads）
--markdown	画像をアップロードして Markdown テーブルを出力
--upload-url <url>	カスタムアップロードエンドポイント（デフォルト：0x0.st）

画像のアップロード

# Default (0x0.st - no signup needed)
./scripts/upload-and-copy.sh before.png after.png --markdown

Vercel デプロイ保護

.vercel.app URL が 401/403 を返す場合：

1. Vercel CLI を確認します：which vercel && vercel whoami
2. 利用可能な場合：vercel inspect <url> でバイパストークンを取得します
3. 利用できない場合：バイパストークンを提供するか、手動でスクリーンショットを撮るか、保護を無効にするようユーザーに伝えてください

PR への統合

# Check for gh CLI
which gh

# Get current PR
gh pr view --json number,body

# Write the existing body plus the comparison to a temporary file, then:
gh pr edit <number> --body-file /path/to/pr-body.md

gh CLI がない場合は、Markdown を出力し、手動で貼り付けるようユーザーに伝えてください。

エラーリファレンス

エラー	解決方法
command not found	npm install -g @vercel/before-and-after
could not determine executable	npx @vercel/before-and-after（フルネーム）を使用
.vercel.app で 401/403	Vercel の保護セクションを参照
要素が見つからない	セレクターがページ上に存在することを確認