From wb
Iterate on UI mockups, capturing keeps/removes/changes with full fidelity. Versions each iteration and maintains decision log.
npx claudepluginhub gvarela/workbenchThis skill is limited to using the following tools:
Helps iterate on UI mockups efficiently, capturing decisions without fidelity loss.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides TDD-style skill creation: pressure scenarios as tests, baseline agent failures, write docs to enforce compliance, verify with RED-GREEN-REFACTOR.
Helps iterate on UI mockups efficiently, capturing decisions without fidelity loss.
This skill activates when:
Before processing feedback, locate the mockup:
mockups/mockup-log.md in current projectIf mockup-log.md missing:
I can't find an active mockup session.
Options:
1. Start new mockup: /wb:create_mockup [directory] [feature]
2. Point me to existing mockup-log.md location
If giving feedback about non-mockup topic:
I'm treating this as mockup feedback for [feature] (currently v00[N]).
If this isn't about the mockup, let me know.
When user provides mockup feedback:
Acknowledge and classify the feedback:
Compound feedback (contains multiple types):
Questions and assumptions → Create beads issues:
# For questions that need answers:
bd create "UI Q: [question]" --type=task --priority=2 \
-d "From mockup iteration. Blocks: finalization"
# For assumptions that need validation:
bd create "UI Assumption: [assumption]" --type=task --priority=3 \
-d "Assuming [X]. If wrong: [impact]. Validate before implementation."
Update mockup-log.md immediately:
### Confirmed (KEEP)
- [Requirement] - confirmed [date] - "[user quote]"
### Rejected (REMOVE)
- [Idea] - rejected [date] - reason: "[user rationale]"
Summarize understanding before creating new version:
Got it. For the next version:
✓ KEEPING: [list]
✗ REMOVING: [list]
~ CHANGING: [list]
? CLARIFYING: [questions if any]
Ready to create v[N+1]?
When user confirms or says "next version":
current_version: 2)mockups/v00[N+1]/ (zero-padded: v001, v002, ..., v010)mockups/v00[N+1]/preview-v00[N+1].pngcurrent_version: [N+1], last_updated: [date]v001 - Initial draft
v002 - First iteration
v003 - Second iteration
...
v00N - Final (before design.md)
User feedback → Classify → Update log → Confirm understanding → Create version
↑ │
└──────────────────────────────────────────────────────────────┘
### v00[N] - [YYYY-MM-DD] - [Brief Description]
- **Status**: In Review
- **Changes from v00[N-1]**:
- KEPT: [what was preserved]
- REMOVED: [what was cut]
- CHANGED: [what was modified]
- **Feedback incorporated**: [summary]
- **Open questions**: [remaining unknowns]
---
version: [N]
created: [YYYY-MM-DD]
previous_version: [N-1]
---
# v00[N] Decisions
## Changes from v00[N-1]
### Added
- [New element] - reason: [user feedback/requirement]
### Removed
- [Removed element] - reason: [user feedback]
### Modified
- [Element]: [old] → [new] - reason: [rationale]
## Feedback Incorporated
| Feedback | Classification | Action Taken |
|----------|---------------|--------------|
| "[user quote]" | KEEP | Preserved [element] |
| "[user quote]" | REMOVE | Cut [element] |
| "[user quote]" | CHANGE | Modified [element] |
## Cumulative Requirements
_All confirmed requirements through this version:_
1. [Requirement from v001]
2. [Requirement from v002]
3. [New requirement this version]
## Still Open
- [ ] [Unresolved question]
CRITICAL: Never lose design decisions. Every piece of feedback must be:
When updating mockup versions:
bd create "UI Q: Icon for [element]?" --type=taskWhen user says "finalize" or "ready for design":
# Check for unresolved questions/assumptions:
bd list --status=open | grep -E "UI Q:|UI Assumption:"
If open issues exist:
⚠️ Cannot finalize - unresolved items:
| Issue | Status |
|-------|--------|
| UI Q: [question] | Open |
| UI Assumption: [assumption] | Open |
Options:
1. Resolve these first (answer questions, validate assumptions)
2. Close as "deferred to implementation" if acceptable
3. Close as "out of scope" if not needed
## UI Design: [Feature]
### Requirements (from mockup iteration)
_Confirmed through [N] mockup iterations_
1. [Requirement] - v00[X]
2. [Requirement] - v00[Y]
### Out of Scope
_Explicitly excluded during mockup iteration_
1. [Excluded item] - reason: [from REMOVE log]
### Final Mockup Reference
- Structure: `mockups/v00[final]/mockup.md`
- Visual: `mockups/v00[final]/mockup.html`
- Screenshot: `mockups/v00[final]/preview-v00[final].png`
### Open Items for Implementation
- [ ] [Remaining question]
During iteration, user can say:
| Command | Action |
|---|---|
| "keep [X]" | Add to Confirmed, preserve in next version |
| "remove [X]" | Add to Rejected, cut from next version |
| "change [X] to [Y]" | Note modification for next version |
| "next version" | Create v00[N+1] with all feedback |
| "show mockup" | Open current mockup.html in browser and screenshot |
| "show log" | Display current mockup-log.md |
| "show keeps" | List all confirmed requirements |
| "show removes" | List all rejected ideas |
| "revert to v00[N]" | Create new version based on v00[N] |
| "compare v00[A] and v00[B]" | Show differences between versions |
| "finalize" | Prepare for design.md |
When user wants to see the current mockup visually:
mcp__plugin_playwright_playwright__browser_navigate({
url: "file:///[absolute-path]/mockups/v00[N]/mockup.html"
})
mcp__plugin_playwright_playwright__browser_take_screenshot({
filename: "mockup-preview-current.png",
fullPage: true
})
Current mockup (v00[N]) preview:
[Screenshot]
This is the HTML mockup with your app's actual styles.
Any feedback on what to keep, change, or remove?
Generate visual and structural comparison:
## v00[A] → v00[B] Visual Comparison
**Screenshots:**
v00[A]:
[preview-v00A.png]
v00[B]:
[preview-v00B.png]
**Structural changes:**
**Added in v00[B]:**
- [element]
**Removed in v00[B]:**
- [element]
**Changed:**
- [element]: [v00A state] → [v00B state]
**Style/Icon changes:**
- [CSS/icon differences if any]
**Decisions between versions:**
- v00[A+1]: [summary]
- v00[A+2]: [summary]
...
User: "Keep the card layout but remove the sidebar. The header should be sticky."
Claude: Updated mockup-log.md:
✓ KEEPING:
- Card layout - "Keep the card layout"
- Header (will make sticky)
✗ REMOVING:
- Sidebar - "remove the sidebar"
~ CHANGING:
- Header: static → sticky - "header should be sticky"
Ready to create v002?
User: "Yes, and make the cards 3 columns on desktop"
Claude: Got it, adding to changes:
~ CHANGING:
- Card grid: current → 3 columns on desktop
Creating v002...
Created mockups/v002/
- mockup.md: Updated ASCII with all changes
- mockup.html: Updated HTML with all changes
- preview-v002.png: Visual screenshot
- decisions.md: Documented rationale
- mockup-log.md: Added v002 entry
[Shows preview-v002.png screenshot]
Visual preview updated with your changes. Anything else to adjust?
If session ends mid-iteration or user requests handoff:
## Pending Feedback (Not Yet Versioned)
- "[feedback 1]" - KEEP
- "[feedback 2]" - CHANGE
On resume, read mockup-log.md's "Pending Feedback" section first.