dev-util-visual-companion

Coordinate server-backed browser-based visual brainstorming to capture and refine UI mockups.

Updated Jun 17, 2025
One-click install
npx skills add https://github.com/nikbrunner/dots --skill dev-util-visual-companion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-util-visual-companion
Source: https://github.com/nikbrunner/dots/tree/main/common/.agents/skills/dev-util-visual-companion
Command: npx skills add https://github.com/nikbrunner/dots --skill dev-util-visual-companion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Browser-based visual brainstorming companion for UI design—capture existing UI, iterate on mockups, and export clean references for implementation.

Core Features & Use Cases

  • Capture, compare, and iterate on UI mockups directly in the browser.
  • Export clean references to hand off to design and development teams.
  • Use case: run a quick design sprint to evaluate layout options for a new dashboard.

Quick Start

Start a new session with the visual companion server and begin drafting your first mockups.

Frequently Asked Questions about dev-util-visual-companion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a browser-based visual brainstorming session for UI mockups?▼

To run visual brainstorming for UI mockups, start a local server that coordinates a WebSocket-based event stream for interactions, then draft and refine layouts directly in your browser. You need a directory of mockups and references to persist your session data.

Can I compare layout options and color schemes for mobile and web contexts?▼

Yes, you can compare layout options and color schemes across web and mobile contexts. The visual companion workflow captures existing UI and lets you evaluate component relationships side-by-side to refine your mockups before implementation.

Do I need a WebSocket connection to iterate on UI design ideas?▼

Yes, a WebSocket-based event stream is required to coordinate the visual brainstorming workflow. This local server architecture enables real-time interactions for capturing and refining UI mockups directly in the browser.

How do I export clean UI references to hand off to development teams?▼

You export clean references for development teams by finalizing your mockups within the visual companion session. The workflow persists your refined layouts and component relationships to a local directory for implementation handoff.

What is the best way to evaluate dashboard layout options during a design sprint?▼

The best way to evaluate dashboard layout options during a design sprint is using a server-backed visual brainstorming workflow. It lets you capture existing UI, iterate on mockups in the browser, and compare layout variations before exporting references.

Are there limitations when using a local server for design brainstorming?▼

Using a local server for design brainstorming requires maintaining a WebSocket event stream and a local directory to persist sessions. Without this server infrastructure active, the browser-based mockup capture and iteration workflow cannot function.