Communitygithub.com

vidluther/pardonned

pardonned サイトをビルド、サーブ、ブラウザ操作して UI 変更を画面レベルで確認します。

pardonned とは?

このスキルは、静的 Astro サイト「pardonned」のビルド成果物を実ブラウザで検証するための一連の手順を提供します。開発者は `pnpm build` でサイトをビルドし、Python の HTTP サーバで `dist/` を配信した上で、Playwright を使ってブラウザ操作を自動化できます。特にクライアントサイドで動作する検索フィルタや並べ替え、ページネーションなど、本番ビルドでの挙動確認に重点を置いています。PostHog のスタブ問題やウィンドウ化されたページネーションの扱いなど、実際の検証で遭遇しがちな注意点も詳述されており、CI/CD や手動テストの効率化に役立ちます。主に Claude Code や Cursor などの AI エージェント環境で使用され、`.mjs` スクリプトを一時的に作成して実行するシンプルなワークフローが特徴です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidluther/pardonned/tree/HEAD/.claude/skills/verify

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

pardonned の変更を検証する

静的 Astro サイト — サーバランタイムはありません。ビルドされた dist/ を実際のブラウザで検証します。

ビルド & サーブ

pnpm build                                  # data/pardonned.db が必要です(CLAUDE.md 参照)
cd dist && python3 -m http.server 8123 --bind 127.0.0.1   # バックグラウンドで実行

ブラウザ操作

playwright はすでに devDependency(スクレイパーで使用)としてインストールされており、Chromium もセットアップ済みです。リポジトリルートに使い捨ての .mjs ファイルを作成し(node_modules から playwright を解決させるため)、node で実行した後、削除します。

主要なフローはページ上のインラインスクリプトにあります(例:/search/ のフィルタ/並べ替え/ページネーションの状態はすべてクライアントサイドで管理され、history.replaceState を介して URL パラメータに同期されます)。

注意点

  • PostHog のスタブ問題: ビルドされたページには実際の PostHog スニペットが埋め込まれており、window.posthog = e によって addInitScript で設定したスタブが上書きされます。posthog.capture の呼び出しを監視するには、ロード後にパッチを当ててください:page.evaluate(() => { window.posthog = { ...window.posthog, capture: (n, p) => window.__ev.push({n, p}) } })。
  • /search のウィンドウ化ページネーション: 1ページ目からクリック可能なのはページ 1、2、…、最後のページのみです。深いページにアクセスするには、URL で ?page=N を指定するか、「次へ」を繰り返しクリックしてください。
  • Astro の dev と build の違い: pnpm dev でも動作しますが、URL 状態の挙動は、インラインスクリプトがそのまま出荷される本番ビルドに対して検証する必要があります。

関連スキル