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>

README.md

@@ -26,16 +26,46 @@ A community-built library of professional skills for every field — product man
 
 **🆕 Latest release (v20.2.0 — Community PRs & New Skill):** a new **YouTube Script Writer** skill (**174 total**), a stdlib **feature-prioritisation** helper, safer installs, and robust frontmatter parsing — all from community contributors. See the [changelog](#-changelog).
 
-<!-- DEMO: replace web/docs-assets/playground.png below with web/docs-assets/playground-demo.gif
-     once recorded (see web/docs-assets/README.md for how). The link goes to the live app. -->
 ### ▶ See it in action — [try the live Skill Playground](https://mohitagw15856.github.io/pm-claude-skills/)
 
-[![Skill Playground demo — pick a skill, fill the form, run it with your own Claude key](web/docs-assets/playground.png)](https://mohitagw15856.github.io/pm-claude-skills/)
+<!-- Demo GIF generated by web/docs-assets/record-demo.mjs (Playwright). The streamed
+     output is a representative mock so no API key is needed; re-run with a live key
+     for a real call. Static fallback: web/docs-assets/playground.png -->
+[![Skill Playground demo — pick a skill, fill the form, run it with your own Claude key](web/docs-assets/playground-demo.gif)](https://mohitagw15856.github.io/pm-claude-skills/)
+
+<sub>👆 Pick any skill, fill a short form, and run it with your own key — no install required.</sub>
+
+---
+
+## 🔄 One library, the whole professional workflow
+
+These 174 skills aren't a random catalog — they cover the **full arc of professional work**, end to end. Wherever you are in the loop, there's a skill for it:
+
+```
+  DISCOVER  →   DECIDE   →    BUILD    →    SHIP    →   MEASURE   →  COMMUNICATE
+ ──────────   ──────────   ──────────   ──────────   ──────────   ─────────────
+  frame the    prioritise    design &     launch &     track &      report up
+  problem,     & spec the    engineer     release      analyse      & out
+  research     work          the work     the work     results
+        └────────────────────── feeds the next discovery ──────────────────────┘
+```
+
+| Phase | What you're doing | Start with these skills |
+|-------|-------------------|--------------------------|
+| **🔍 Discover** | Frame the problem, research, validate | `ambiguity-resolver` · `user-research-synthesis` · `competitive-analysis` · `discovery-interview-guide` |
+| **🎯 Decide** | Prioritise, spec, set goals | `rice-prioritisation` · `prd-template` · `okr-builder` · `roadmap-narrative` |
+| **🔨 Build** | Design & engineer the work | `technical-spec-template` · `design-critique` · `sprint-planning` · `architecture-decision-record` |
+| **🚀 Ship** | Launch & release | `go-to-market` · `launch-readiness` · `product-launch-checklist` · `runbook-writer` |
+| **📊 Measure** | Track outcomes & analyse | `metrics-framework` · `cohort-analysis` · `ab-test-planner` · `churn-analysis` |
+| **📣 Communicate** | Report up and out | `executive-update` · `board-deck-narrative` · `stakeholder-update` · `qbr-deck` |
+
+> New here? Start with the [**top-tier skills**](#️-skill-tiers--start-with-the-strongest), or jump straight to [**all 174 skills**](#️-all-174-skills) grouped by profession.
 
 ---
 
 ## Contents
 
+- [🔄 One library, the whole professional workflow](#-one-library-the-whole-professional-workflow)
 - [🚀 Quick Install](#-quick-install-2-minutes)
 - [🔌 Works With — Cross-Tool Compatibility](#-works-with--cross-tool-compatibility)
 - [🤖 Subagents & Slash Commands](#-subagents--slash-commands)