From wb
Iterate on UI mockups, capturing keeps/removes/changes with full fidelity. Versions each iteration and maintains decision log.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wb:mockup-iterationThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Helps iterate on UI mockups efficiently, capturing decisions without fidelity loss.
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.
npx claudepluginhub gvarela/workbench --plugin wbGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.