Communitygithub.com

vidluther/pardonned

Erstelle, starte und steuere die erstellte Pardonned-Seite, um UI-Änderungen auf Browser-Ebene zu überprüfen.

Was ist pardonned?

Dieses Skill ermöglicht es dir, die statische Astro-Seite von Pardonned zu erstellen, zu serven und in einem echten Browser zu testen, um sicherzustellen, dass UI-Änderungen korrekt funktionieren. Es unterstützt die Arbeit mit der Build-Umgebung (`dist/`), das Bereitstellen über einen lokalen HTTP-Server und das automatisierte Testen mit Playwright. Der Fokus liegt auf der Verifikation von clientseitigen Funktionen wie Filter, Sortierung und Paginierung auf der `/search/`-Seite, die über URL-Parameter gesteuert werden. Wichtig ist auch das korrekte Stubben von PostHog, da die eingebauten Skripte die Analytics-Bibliothek überschreiben. Das Skill ist für Entwickler gedacht, die die Produktions-Build-Umgebung nutzen, um Inline-Skript-Verhalten zu testen.

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Überprüfen von Pardonned-Änderungen

Statische Astro-Seite – es gibt keinen Server zur Laufzeit. Überprüfe die Änderungen gegen das erstellte dist/ in einem echten Browser.

Erstellen & Serven

pnpm build                                  # benötigt data/pardonned.db (siehe CLAUDE.md)
cd dist && python3 -m http.server 8123 --bind 127.0.0.1   # im Hintergrund ausführen

Steuern

playwright ist bereits eine devDependency (wird vom Scraper verwendet) mit installiertem Chromium – schreibe eine Wegwerf-Datei .mjs im Repository-Stammverzeichnis (damit Node playwright aus node_modules auflöst), führe sie mit node aus und lösche sie danach.

Wichtige Abläufe befinden sich in Inline-Skripten auf den Seiten (z. B. auf /search/ sind Filter, Sortierung und Paginierung komplett clientseitig und werden über URL-Parameter via history.replaceState synchronisiert).

Fallstricke

  • PostHog Stubben: Die erstellten Seiten enthalten den echten PostHog-Snippet, der window.posthog = e setzt und jeden über addInitScript installierten Stub überschreibt. Um posthog.capture-Aufrufe zu beobachten, patche nach dem Laden: page.evaluate(() => { window.posthog = { ...window.posthog, capture: (n, p) => window.__ev.push({n, p}) } }).
  • Fenster-Paginierung auf /search: Von Seite 1 aus sind nur die Seiten 1, 2, …, letzte klickbar. Um eine tiefe Seite zu erreichen, lade sie über ?page=N in der URL oder klicke wiederholt auf Weiter.
  • Astro dev vs. Build: pnpm dev funktioniert ebenfalls, aber das URL-Status-Verhalten sollte gegen den Produktions-Build überprüft werden, da nur die Inline-Skripte ausgeliefert werden.

Verwandte Skills