Mockup Gallery
Local design review for HTML mockups. Yay/nay ratings, page assignment with route detection, component tracking, and multi-project sessions.
Install
claude plugin marketplace add tyroneross/RossLabs-AI-Toolkit
claude plugin install mockup-gallery@rosslabs-ai-toolkit
The Problem
Mockup review is a folder of HTML files and a chat thread. Which version did the designer rate yay? Which component inside that mockup is the one to ship? Which route does it map to? Three weeks later nobody remembers and the build ships against the wrong reference.
What I Built
npx mockup-gallery opens a local UI at http://localhost:8787 that browses every HTML mockup in your project, captures ratings and notes, and assigns the winners to specific pages or screens.
Impact
Each project gets a stable port derived from its path, so multiple galleries run at once without collisions. Implementation tracking flags which components have already shipped, so review sessions do not re-debate settled UI. Auto-save to file means the rating database is a plain text artifact you can diff, commit, or hand to another reviewer.
How It Works
The gallery scans a mockups/ folder and auto-detects the project type (Next.js routes, SwiftUI views, Python endpoints, static pages). Filenames fuzzy-match to routes for pre-selection. Ratings (yay/nay with notes) color-code the sidebar. Selected mockups get pinned to specific pages, saved mockups get bookmarked, archived mockups move out of active review. Component tagging works inside each mockup for finer-grained tracking.