Mohit
7b02261a3c
- Add compare-mode demo GIF + its Playwright recorder; embed in README eval section - Expand evals/cases.json (6 → 15 flagship skills) so more skills can be eval-scored and sample-generated - Add --generate-missing mode to build-samples.mjs - Add generate-samples.yml: workflow_dispatch job that generates real sample outputs via the ANTHROPIC_API_KEY secret (key never leaves GitHub) and commits Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Docs assets
Images used in the main README.
playground-demo.gif— animated hero demo (shown in the README).playground.png— static screenshot / fallback.
Re-recording the hero demo GIF (automated)
record-demo.mjs drives the live Playground with Playwright and records a video.
The navigation, skill selection, and form-fill are real; the streamed model output
is a representative mock, so no API key is needed.
# 1. Serve the playground locally
cd web && python3 -m http.server 8080 &
# 2. Build the skills data if it is stale
node web/build-skills.mjs
# 3. Record (Playwright + a matching Chromium must be installed)
# npx playwright install chromium # one-time, if needed
node web/docs-assets/record-demo.mjs # writes a .webm into this folder
# 4. Convert the .webm to an optimized GIF (two-pass palette)
cd web/docs-assets
V=$(ls *.webm | head -1)
ffmpeg -y -i "$V" -vf "fps=13,scale=1080:-1:flags=lanczos,palettegen=stats_mode=diff" /tmp/palette.png
ffmpeg -y -i "$V" -i /tmp/palette.png \
-lavfi "fps=13,scale=1080:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle" \
playground-demo.gif
rm -f *.webm
For a fully live recording (real Claude call instead of the mock), comment out the
window.fetch override in record-demo.mjs and set a key via localStorage first.
Recording manually (alternative)
To replace the static screenshot with a short looping demo:
- Record a ~15–25s clip of the live Playground (https://mohitagw15856.github.io/pm-claude-skills/):
pick a skill → fill the form → run → result streams in.
- macOS: Kap (free) or QuickTime screen recording.
- Windows: ScreenToGif (free) records straight to GIF.
- Cross-platform: Peek (Linux), or record an
.mp4and convert withgifski.
- Export as GIF named
playground-demo.gif, ideally ≤ ~1200px wide and < 5 MB (GitHub renders it inline; keep it small so the README loads fast).- From an mp4:
npx gifski --fps 12 --width 1100 -o playground-demo.gif demo.mp4
- From an mp4:
- Drop it in this folder and update the README hero image from
playground.pngtoplayground-demo.gif(the<!-- DEMO -->comment in the README marks the spot).