visual-companion
Browser-based visual brainstorming companion for showing mockups, diagrams, and options.
$ npx -y skills add Surya17155/Replica --agent claude-codeHow it fires
How this agent gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
Context preview
The summary Claude sees to decide when to auto-load this agent.
Browser-based visual brainstorming companion for showing mockups, diagrams, and options.
Agent definition
visual-companion.mdVisual Companion Guide
Browser-based visual brainstorming companion for showing mockups, diagrams, and options.
When to Use
Decide per-question, not per-session. Would the user understand this better by seeing it than reading it?
**Use the browser** for visual content: UI mockups, architecture diagrams, side-by-side comparisons, design polish, spatial relationships.
**Use the terminal** for text content: requirements, conceptual choices, tradeoff lists, technical decisions, clarifying questions.
How It Works
The server watches a directory for HTML files and serves the newest one to the browser. Write HTML content to `screen_dir`, the user sees it in their browser and can click to select options.
**Content fragments vs full documents:** If your HTML starts with `<!DOCTYPE` or `<html`, served as-is. Otherwise auto-wrapped in frame template.
Starting a Session
scripts/start-server.sh --project-dir /path/to/project --open
Save `screen_dir` and `state_dir` from the response.
The Loop
1. Check server is alive, write HTML to new file in `screen_dir` 2. Tell user what to expect, share URL 3. On next turn, read `$STATE_DIR/events` for browser interactions 4. Iterate or advance 5. Unload with waiting screen when switching to terminal
CSS Classes Available
.options, .option, .cards, .card, .mockup, .split, .pros-cons, .placeholder, .mock-nav, .mock-sidebar, .mock-content, .mock-button, .mock-input
Design Tips
- Scale fidelity to the question
- 2-4 options max per screen
- Use real content when it matters
- Keep mockups simple, focus on layout
File Naming
Use semantic names, never reuse filenames. Server serves newest file by modification time.
Cleaning Up
scripts/stop-server.sh $SESSION_DIR
Read more
Visual Companion Guide
Browser-based visual brainstorming companion for showing mockups, diagrams, and options.
When to Use
Decide per-question, not per-session. Would the user understand this better by seeing it than reading it?
**Use the browser** for visual content: UI mockups, architecture diagrams, side-by-side comparisons, design polish, spatial relationships.
**Use the terminal** for text content: requirements, conceptual choices, tradeoff lists, technical decisions, clarifying questions.
How It Works
The server watches a directory for HTML files and serves the newest one to the browser. Write HTML content to `screen_dir`, the user sees it in their browser and can click to select options.
**Content fragments vs full documents:** If your HTML starts with `<!DOCTYPE` or `<html`, served as-is. Otherwise auto-wrapped in frame template.
Starting a Session
scripts/start-server.sh --project-dir /path/to/project --open
Save `screen_dir` and `state_dir` from the response.
The Loop
1. Check server is alive, write HTML to new file in `screen_dir` 2. Tell user what to expect, share URL 3. On next turn, read `$STATE_DIR/events` for browser interactions 4. Iterate or advance 5. Unload with waiting screen when switching to terminal
CSS Classes Available
.options, .option, .cards, .card, .mockup, .split, .pros-cons, .placeholder, .mock-nav, .mock-sidebar, .mock-content, .mock-button, .mock-input
Design Tips
- Scale fidelity to the question
- 2-4 options max per screen
- Use real content when it matters
- Keep mockups simple, focus on layout
File Naming
Use semantic names, never reuse filenames. Server serves newest file by modification time.
Cleaning Up
scripts/stop-server.sh $SESSION_DIR
Turn any screenshot or design reference into a precise, copy-paste-ready developer prompt — with exact hex colors, Tailwind classes, animation specs, and component structure. Ready for Lovable, Bolt, Cursor, Replit, or any AI coding agent.
Repo: Surya17155/Replica
Other agents on replica.
- GUIDE
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Open agent - spec-document-reviewer-prompt
Use this template when dispatching a spec document reviewer subagent.
Open agent - DESIGN
DESIGN.md — structured design token reference for the Stitch Design System, covering typography, color, spacing, layout, motion, and accessibility tokens for agent consumption.
Open agent