Communitygithub.com

vidluther/pardonned

Construire, servir et piloter le site pardonned compilé pour vérifier les modifications d'interface dans un navigateur réel.

Qu'est-ce que pardonned ?

Cette compétence permet de valider les modifications apportées au site statique Astro 'pardonned' en le construisant, en le servant localement et en automatisant les tests dans un navigateur réel via Playwright. Elle est conçue pour les développeurs qui travaillent sur ce projet et qui ont besoin de vérifier le comportement des scripts embarqués (filtres, tri, pagination) sur la version de production. Elle prend en charge le build avec pnpm, le serveur HTTP Python, et l'exécution de scripts Playwright jetables pour interagir avec les pages. Les pièges courants incluent le stub de PostHog (qui nécessite un patch après le chargement) et la pagination fenêtrée de /search qui limite l'accès direct aux pages profondes. Le workflow recommandé est de construire d'abord le site, puis de le servir, et enfin d'exécuter un script de test Playwright.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidluther/pardonned/tree/HEAD/.claude/skills/verify
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Vérification des modifications sur pardonned

Site statique Astro — pas de serveur d'exécution. Vérifiez avec le dossier dist/ compilé dans un navigateur réel.

Construction et service

pnpm build                                  # nécessite data/pardonned.db (voir CLAUDE.md)
cd dist && python3 -m http.server 8123 --bind 127.0.0.1   # lancer en arrière-plan

Pilotage

playwright est déjà une devDependency (utilisée par le scraper) avec Chromium installé — écrivez un fichier .mjs jetable à la racine du dépôt (pour que node résolve playwright depuis node_modules), exécutez-le avec node, puis supprimez-le.

Les flux clés se trouvent dans les scripts en ligne des pages (ex. : sur /search/, l'état de filtrage/tri/pagination est entièrement côté client, synchronisé avec les paramètres d'URL via history.replaceState).

Pièges

  • Stub de PostHog : les pages compilées intègrent le vrai snippet PostHog, qui fait window.posthog = e et écrase tout stub installé via addInitScript. Pour observer les appels à posthog.capture, patchez après le chargement : page.evaluate(() => { window.posthog = { ...window.posthog, capture: (n, p) => window.__ev.push({n, p}) } }).
  • Pagination fenêtrée sur /search : seules les pages 1, 2, …, dernière sont cliquables depuis la page 1. Pour atteindre une page profonde, chargez-la via ?page=N dans l'URL ou cliquez sur Suivant plusieurs fois.
  • Astro dev vs build : pnpm dev fonctionne aussi, mais le comportement piloté par URL doit être vérifié sur la version de production, car ce sont les scripts en ligne qui sont livrés.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community