From 6ed1aae8f16b78ea7cb55c84c7ec7248dfcaf046 Mon Sep 17 00:00:00 2001
From: Kieran Klaassen <kieranklaassen@gmail.com>
Date: Thu, 4 Dec 2025 09:14:54 -0800
Subject: [PATCH] [2.9.2] Add screenshot documentation step to /work command
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added step to capture before/after screenshots for UI changes
- Use Playwright MCP tools for screenshots
- Upload via 0x0.st (imgup skill)
- Updated PR template with before/after table format
- Updated quality checklist

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../.claude-plugin/plugin.json                |  2 +-
 plugins/compound-engineering/CHANGELOG.md     |  6 +++
 .../commands/workflows/work.md                | 40 ++++++++++++++++---
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/plugins/compound-engineering/.claude-plugin/plugin.json b/plugins/compound-engineering/.claude-plugin/plugin.json
index d79f990..6227789 100644
--- a/plugins/compound-engineering/.claude-plugin/plugin.json
+++ b/plugins/compound-engineering/.claude-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "compound-engineering",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "AI-powered development tools. 24 agents, 19 commands, 11 skills, 2 MCP servers for code review, research, design, and workflow automation.",
   "author": {
     "name": "Kieran Klaassen",
diff --git a/plugins/compound-engineering/CHANGELOG.md b/plugins/compound-engineering/CHANGELOG.md
index 3922e34..d9fc0b4 100644
--- a/plugins/compound-engineering/CHANGELOG.md
+++ b/plugins/compound-engineering/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to the compound-engineering plugin will be documented in thi
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.9.2] - 2025-12-04
+
+### Added
+
+- **`/work` command** - Added screenshot documentation step for UI changes. Before creating PRs, use Playwright to capture before/after screenshots, upload via 0x0.st (using imgup skill), and include in PR description.
+
 ## [2.9.1] - 2025-12-04
 
 ### Changed
diff --git a/plugins/compound-engineering/commands/workflows/work.md b/plugins/compound-engineering/commands/workflows/work.md
index f40fd1f..d5691c4 100644
--- a/plugins/compound-engineering/commands/workflows/work.md
+++ b/plugins/compound-engineering/commands/workflows/work.md
@@ -172,7 +172,34 @@ This command takes a work document (plan, specification, or todo file) and execu
    )"
    ```
 
-2. **Create Pull Request**
+2. **Capture Screenshots for UI Changes** (if applicable)
+
+   For any design changes, new views, or UI modifications:
+
+   ```bash
+   # Start the dev server if not already running
+   bin/dev  # Run in background
+
+   # Use Playwright to take screenshots at mobile width (320px)
+   # Navigate to relevant pages and capture before/after states
+   ```
+
+   Using Playwright MCP tools:
+   - `browser_resize` to set mobile viewport (320x568 or similar)
+   - `browser_navigate` to go to affected pages
+   - `browser_snapshot` to check page state
+   - `browser_take_screenshot` to capture images
+
+   Then upload screenshots using the imgup skill:
+   ```bash
+   # Upload to 0x0.st (recommended, no API key needed)
+   curl -F "file=@screenshot-before.png" https://0x0.st
+   curl -F "file=@screenshot-after.png" https://0x0.st
+   ```
+
+   Include the URLs in your PR description.
+
+3. **Create Pull Request**
 
    ```bash
    git push -u origin feature-branch-name
@@ -187,8 +214,10 @@ This command takes a work document (plan, specification, or todo file) and execu
    - Tests added/modified
    - Manual testing performed
 
-   ## Screenshots/Videos
-   [If UI changes]
+   ## Before / After Screenshots
+   | Before | After |
+   |--------|-------|
+   | ![before](URL) | ![after](URL) |
 
    ## Figma Design
    [Link if applicable]
@@ -198,7 +227,7 @@ This command takes a work document (plan, specification, or todo file) and execu
    )"
    ```
 
-3. **Notify User**
+4. **Notify User**
    - Summarize what was completed
    - Link to PR
    - Note any follow-up work needed
@@ -249,8 +278,9 @@ Before creating PR, verify:
 - [ ] Linting passes (use linting-agent)
 - [ ] Code follows existing patterns
 - [ ] Figma designs match implementation (if applicable)
+- [ ] Before/after screenshots captured and uploaded (for UI changes)
 - [ ] Commit messages follow conventional format
-- [ ] PR description includes summary and testing notes
+- [ ] PR description includes summary, testing notes, and screenshots
 
 ## When to Use Reviewer Agents