Files

T

Mohit 0d1dbf25a5 docs: add workflow lifecycle diagram and animated demo GIF to README

- 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>

2026-06-19 09:05:53 +01:00

2.3 KiB

Raw Blame History

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 .mp4 and convert with gifski.
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
Drop it in this folder and update the README hero image from playground.png to playground-demo.gif (the  comment in the README marks the spot).

2.3 KiB Raw Blame History Unescape Escape

Docs assets

Re-recording the hero demo GIF (automated)

Recording manually (alternative)

2.3 KiB

Raw Blame History