skills.rest
pgoell
pgoellCOMMUNITY
Explore all skills by this author →
Website𝕏@pagoellGitHub

visualizing-options

Renders HTML mockups and diagrams in a local browser server for clickable design feedback.

Updated Mar 18, 2026
Search Tags:#local server#wireframes#mockups#browser preview#design options#html fragments#click feedback
One-click install
npx skills add https://github.com/pgoell/pgoell-claude-tools --skill visualizing-options-pgoell
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visualizing-options
Source: https://github.com/pgoell/pgoell-claude-tools/tree/main/plugins/workbench/skills/visualizing-options
Command: npx skills add https://github.com/pgoell/pgoell-claude-tools --skill visualizing-options-pgoell

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Text-only terminal conversations make it hard to evaluate visual design choices like layouts, wireframes, and architecture diagrams. This Skill spawns a local server that renders HTML content fragments in the user's browser and records their clicks back as JSON events, closing the feedback loop between agent and user. ## Core Features & Use Cases - Browser-Based Mockups: Write HTML fragments to a session directory and the server serves the newest screen with a themed frame, selection indicators, and light/dark mode styling. - Click Event Capture: User selections in the browser are recorded as JSON lines in a state file, which the agent reads on the next turn to merge with terminal feedback. - Divergent Design Exploration: Show 3-4 deliberately different aesthetic directions side by side when the user cannot articulate visual preferences, then converge on iterations. - Use Case: During a UI design discussion, present three dashboard layout options in the browser, let the user click their favorite, and iterate on the chosen direction with refined versions. ## Quick Start Start the visual companion server for this project and show me three layout options for the homepage in my browser.

Frequently Asked Questions about visualizing-options

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

FAQPage Schema
How do I show design mockups in a browser during an AI chat session?▼

Run scripts/start-server.sh with --project-dir pointing at your project. The script returns a local URL, a screen directory, and a state directory; write HTML fragments to the screen directory and the browser displays the newest file automatically.

How does the browser send user clicks back to the agent?▼

A helper script injected into each page opens a WebSocket to the server and sends click events with the selected choice. The server appends these events as JSON lines to the events file in the state directory, which the agent reads on its next turn.

When should I use the browser instead of the terminal for design questions?▼

Use the browser when the content itself is visual, such as wireframes, layout comparisons, or architecture diagrams. Use the terminal for conceptual choices, requirements, tradeoff lists, and technical decisions where the answer is words rather than a visual preference.

Does the visualizing-options server work on Windows or in Codex?▼

Yes. The start script auto-detects Windows (Git Bash/MSYS) and Codex environments and switches to foreground mode, since those environments reap detached background processes. On Windows, launch the Bash tool call with run_in_background set to true.

Why did the brainstorm server shut down during my session?▼

The server exits automatically after 30 minutes of inactivity or when its owner process dies. Check for a server-stopped file in the state directory and restart with start-server.sh; sessions created with --project-dir persist in .workbench/brainstorm/.

What are the limitations of HTML content fragments versus full documents?▼

Fragments are wrapped in the server's frame template, which provides theming, CSS classes, and selection infrastructure, so you cannot fully control the page. Only write full documents starting with <!DOCTYPE or <html when you need complete control over rendering.

Related Skills

Explore More Design & Creative Skills→
luke-selrailuke-selrai

brainstorming

Clarify creative ideas into actionable design directions through structured inquiry.

Community
Advanced
aah-stackaah-stack

frontend-design

Create distinctive frontend interfaces with intentional typography, styling systems, and responsive layouts.

Community
Advanced
useblocksuseblocks
24

pharaoh-decide

Record design decisions as sphinx-needs directives with decided_by, alternatives, and rationale.

Official
Advanced
tyler-dot-earthtyler-dot-earth
1

visual-explainer

Generate self-contained HTML pages explaining systems, code changes, plans, and data.

Community
Advanced