mcpField
P
pr-screenshots

pr-screenshots

github.com/petem24開発021 回インストール1 週間前に更新
リポジトリ

pr-screenshots について

pr-screenshots は、スクリーンショットを ImgBB にアップロードし、リンクを埋め込んで GitHub のプルリクエストに追加する Skill です。安全なアップロード、画像の有効期限設定、アップロード失敗時の対応も説明します。

主な機能

  1. 01スクリーンショットを ImgBB にアップロード
  2. 02Markdown 画像リンクを生成
  3. 03任意で画像の有効期限を設定
  4. 04公開画像のプライバシーリスクを確認
  5. 05アップロードエラーに対応

活用シーン

  1. 01PR にデスクトップとモバイルの画面を追加
  2. 02レビュー画像にシードデータやテストデータを表示
  3. 03指定期間後にアップロード画像を失効

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/petem24/skills --skill pr-screenshots

インストール後、Claude Code で/pr-screenshotsを入力して読み込まれたか確認します。

同梱ファイルupload.sh

詳細

PR のスクリーンショット

GitHub にはプルリクエストに画像を添付する API がないため、ImgBB にアップロードし、返されたリンクを PR に埋め込みます。

アップロードする前に

ImgBB のリンクは公開されます。リポジトリが非公開でも、URL を知っている人なら誰でも画像を閲覧できます。シードデータまたはテストデータが写っているスクリーンショットのみをアップロードしてください。実在する個人データ、シークレット、トークン、認証情報が写っている画像は、決してアップロードしないでください。迷った場合はアップロードせず、代わりに結果をテキストで説明してください。

手順

  1. デスクトップやモバイルなど、重要なサイズでスクリーンショットを撮影します。ファイル名が代替テキストになるため、それぞれ内容がわかる名前を付けてください。

  2. このスキルのディレクトリにある upload.sh スクリプトを使ってアップロードします。

    <skill-dir>/upload.sh output/screens/profile-desktop.png output/screens/profile-mobile.png
    

    ファイルごとに Markdown の画像リンクが 1 つ出力されます。-e <seconds> を渡すと、ImgBB による画像の削除時期を指定できます(例:30 日後に削除する場合は -e 2592000)。

  3. それぞれの画像に何が写っているかを添えて、リンクを PR に投稿します。

    gh pr comment <number> --body "$(cat <<'MD'
    ## Screenshots
    
    Profile page, desktop (1440px):
    ![profile-desktop](https://i.ibb.co/...)
    
    Profile page, mobile (390px):
    ![profile-mobile](https://i.ibb.co/...)
    MD
    )"
    

    自分で PR を作成する場合は、代わりに PR の本文にこのセクションを追加してください。

アップロードに失敗した場合

スクリプトから IMGBB_API_KEY が設定されていないと報告された場合は、作業を中止し、ユーザーにこのマシンではスキルリポジトリの setup.sh を使った初期設定が必要だと伝えてください。自分で実行したり、キーを探したり、別の画像ホストで代用したりしないでください。それ以外の失敗については、スクリプトのエラーメッセージを報告してください。

コメント