Mohit
0d1dbf25a5
- Reframe the 174 skills as a DISCOVER→DECIDE→BUILD→SHIP→MEASURE→COMMUNICATE workflow with an ASCII diagram and a phase→skills table (hook for new visitors) - Replace the static playground screenshot with an animated demo GIF - Add record-demo.mjs (Playwright) to auto-generate the demo, and document it Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
52 lines
2.3 KiB
Markdown
52 lines
2.3 KiB
Markdown
# 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**.
|
||
|
||
```bash
|
||
# 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:
|
||
|
||
1. **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](https://getkap.co/) (free) or QuickTime screen recording.
|
||
- **Windows:** [ScreenToGif](https://www.screentogif.com/) (free) records straight to GIF.
|
||
- **Cross-platform:** [Peek](https://github.com/phw/peek) (Linux), or record an `.mp4` and convert with `gifski`.
|
||
2. **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`
|
||
3. Drop it in this folder and update the README hero image from `playground.png` to
|
||
`playground-demo.gif` (the `<!-- DEMO -->` comment in the README marks the spot).
|