Communitygithub.com

vidluther/pardonned

빌드된 pardonned 사이트를 구축, 제공, 브라우저에서 구동하여 UI 변경 사항을 시각적으로 확인합니다.

pardonned란 무엇인가요?

이 스킬은 정적 Astro 사이트인 pardonned의 변경 사항을 브라우저 수준에서 검증하는 방법을 제공합니다. 개발자는 실제 브라우저에서 빌드된 `dist/` 디렉토리를 사용하여 UI를 확인하며, 서버 런타임이 없는 정적 사이트 특성상 Astro dev 대신 프로덕션 빌드를 기준으로 검증해야 합니다. `playwright`가 이미 devDependency에 포함되어 있어 별도의 설치 없이 Chromium을 통해 브라우저 자동화 테스트를 수행할 수 있으며, 일회성 스크립트를 작성하여 실행 후 삭제하는 방식으로 사용됩니다. 주요 기능들은 페이지 인라인 스크립트에 구현되어 있어(예: `/search/`의 클라이언트 측 필터/정렬/페이지네이션 상태가 URL 파라미터로 동기화됨), PostHog 스텁, 페이지네이션 범위 제한, Astro dev와 빌드 간 차이 같은 주의 사항을 염두에 두고 테스트해야 합니다.

지원 대상✓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가 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을 사용하거나 다음(Next)을 반복 클릭하세요.
  • Astro dev vs 빌드: pnpm dev도 작동하지만, URL 상태 동작은 인라인 스크립트가 배포되는 방식이므로 프로덕션 빌드를 기준으로 검증해야 합니다.

관련 스킬