Work Canvas

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

20 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add JingbiaoMei/work-canvas-skill --skill work-canvas

Manual install

git clone --depth 1 https://github.com/JingbiaoMei/work-canvas-skill.git /tmp/work-canvas-skill
mkdir -p ~/.claude/skills
cp -r /tmp/work-canvas-skill/. ~/.claude/skills/work-canvas

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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

Read the full skill on GitHub

Details

Skill name: work-canvas
Repository: JingbiaoMei/work-canvas-skill
License: Apache-2.0
Repo updated: 25 June 2026

FAQ

What does the Work Canvas skill do?

How do I install the Work Canvas skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add JingbiaoMei/work-canvas-skill --skill work-canvas. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Work Canvas popular?

It lives in JingbiaoMei/work-canvas-skill, which has 20 GitHub stars and 0 forks.

Related skills

Design Engine

rahamanbinujit/claude-design-engine

End-to-end AI design system with 190+ battle-tested styles, AI image generation, and pixel-perfect export. Designs social media posters, carousels, YouTube thumbnails, PDFs, and full websites — entirely from natural language. Includes brand onboarding, self-review quality system, Puppeteer export scripts, and 6 teachable design skills. Built through 300+ real design experiments. Use this skill when the user asks to: design a poster, create social media content, build a carousel, make a YouTube thumbnail, generate a PDF/report, design a website or landing page, create any visual content, or imp

Frontend & Design

Design Trends

growthaudit/claude-design-skills

Apply 2026 web design trends as complete styling systems to any artifact — landing pages, dashboards, presentations, components, or creative builds. Use this skill whenever the user mentions a design trend by name (e.g. "neo-brutalism", "neumorphism", "retrofuturism", "maximalism", "collage", "gamified", "dark mode", "vibrant", "bold typography", "3D immersive", "experimental navigation", "sustainable design", "motion design") or asks for something "trendy", "2026 style", "anti-design", "dopamine design", "Y2K", "retro-futuristic", "scrapbook style", "raw aesthetic", or similar. Also trigger w

Frontend & Design

Build for Good UX

alper-dev/build-for-good-ux-skill

Audit, build, or refactor frontend UI components, pages, forms, and interactive flows to implement complete UX states (loading, success, error, empty), resilient async degradation, accessible button interactions, error recovery, Fitts's Law mobile touch targets, and choice simplification. Use when creating or reviewing user-facing interfaces, form validations, multi-section dashboards, checkout flows, or gesture-sensitive mobile screens.

Frontend & Design

Interaction Design

rastian/interaction-design-skills

Apply interaction design (IxD) principles and frameworks to product and service design work. Use this skill when designing or evaluating interaction flows, micro-interactions, feedback mechanisms, affordances, mental models, component states, response time, animation and transitions, error recovery, input validation, task flows, or navigation patterns. Core audiences: product designers, UX designers, UI designers, service designers, and interaction designers working on digital products and services. Trigger on: interaction flow, micro-interaction, affordance, feedback design, state design (hov

Frontend & Design

CSS Animation

neonwatty/css-animation-skill

Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says "css animation", "animate this feature", "create a css walkthrough", "animation walkthrough", or wants to create a CSS-based visual demo of an app feature.

Frontend & Design

Html2elementor

dudaster/html2elementor

Convert HTML+CSS into Elementor JSON that imports into WordPress. Always use this skill whenever the user has HTML/CSS (pasted, file, URL, or AI-generated) and wants it to end up as an Elementor page — phrases like "convert HTML to Elementor", "import this landing into WordPress as Elementor", "make this Tailwind mockup an Elementor page", "turn my markup into Elementor JSON", "recreate this site in Elementor", or any variant. Do not try to produce Elementor JSON by hand — Elementor has non-obvious quirks (shared system-color globals that break previous pages, lazy-load hiding backgrounds, wid

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.