work-canvaslisted

Turn an agent's own work — progress, debugging, analysis, comparisons, decisions — into one self-contained, reviewable HTML page (a "work canvas" / 网页看板) the user opens in a browser. Use when the user asks to create an interactive, reviewable, "alignment", progress, status, comparison, or summary HTML / dashboard / report / 看板 to see where a long task stands, review and comment, compare options, or decide next steps — especially for long-running, multi-subsystem, or trial-and-error tasks where terminal logs are the wrong medium. Also use to close out a `/goal` command session with a progress/status report. Covers three artifact types: (1) progress/status reports, (2) review/decision memos, (3) comparison/leaderboards. Not for building product UIs or shipping web apps — use the frontend-design or web-artifacts-builder skills for those.
JingbiaoMei/work-canvas-skill · ★ 18 · Web & Frontend · score 79

Install: claude install-skill JingbiaoMei/work-canvas-skill

# work-canvas Produce **one self-contained HTML file** that renders an agent's work for a human to understand and act on. The output is a capture of work (a report/board), not an application. ## Workflow 1. **Pick the artifact type** and read its reference: | The user wants to… | Type | Read | |---|---|---| | See where a long/messy task stands, what broke, what's next | **Progress / status report** | `references/progress-report.md` | | Close out a `/goal` command session with a status artifact | **Progress / status report** | `references/progress-report.md` | | Review analysis or a plan, comment, and decide | **Review / decision memo** | `references/review-decision.md` | | Weigh options head-to-head and pick a winner | **Comparison / leaderboard** | `references/comparison.md` | If it's a blend (e.g. a progress report that ends in a decision), lead with the primary type and borrow blocks from the other. 2. **Write the body.** Copy `assets/starter.html` and fill the header, the **What needs your input** box, and the body sections from the reference's component recipes. Leave the `[[PASTE base.css]]` and `[[PASTE interactions.js]]` markers in place; reference local images with `[[IMG path]]`. 3. **Inline into one self-contained file.** - **Default (cheapest):** `python assets/assemble.py body.html canvas.html` — inlines + minifies `base.css` and `interactions.js` and embeds `[[IMG]]` images as `data:` URIs. The model never reads