ux-collablisted

Visual-first UI/UX collaboration loop using agent-browser (primary), Playwright MCP (alternative), Figma MCP (design system/specs), and Lucid (wireframes). Use when designing or iterating on UI, reviewing the live app visually, creating wireframes, making layout decisions, discussing design before building, or running a design→build→verify loop. Trigger phrases: 'let's work on the UI', 'show me what it looks like', 'create a wireframe', 'design the layout', 'take a screenshot', 'browser view', 'before we build let's decide'.
Signpainterreverberation581/ux-collab · ★ 0 · Web & Frontend · score 78

Install: claude install-skill Signpainterreverberation581/ux-collab

# UX Collaboration Skill A structured loop for visual-first UI/UX design and implementation. Works with any web app running locally — project-specific routes, surfaces, and brand tokens are configured per-project via `.ux-collab.md` (see [Project Setup](docs/project-setup.md)). ## When to Use - Any session where UI/UX decisions need to be made before or during coding - When the user wants to see the live app, discuss layout, or compare before/after states - When a design decision is unresolved and a wireframe would help - When iterating on an existing surface - When building from Figma designs with Code Connect ## Prerequisites — Check Before Starting At session start, verify the required tools are available. **agent-browser is preferred** — use Playwright MCP only when you need specific features it provides. **Quick check via npm (if ux-collab is installed as a package):** ```bash npm run check # Verifies agent-browser, ImageMagick, MCP configs ``` **Manual checks:** ``` 1. agent-browser (PRIMARY) → Check: agent-browser --version → Install if missing: brew install agent-browser # macOS (fastest) npm install -g agent-browser # any platform → First run: agent-browser install # Downloads Chrome for Testing 2. ImageMagick (screenshot optimization) → Check: which convert && which identify → Install: brew install imagemagick # macOS sudo apt install imagemagick # Ubuntu/Debian 3. Playwrig