skills.rest
ArtemioPadilla
ArtemioPadillaCOMMUNITY
Explore all skills by this author →
Website𝕏@artemiopadillaGitHub

visual-companion

Render architecture diagrams, UI mockups, and data flows in a browser.

3|Updated Feb 14, 2026
Search Tags:#brainstorming#diagrams#wireframes#mockups#visual-design#data-visualization#browser-tools
One-click install
npx skills add https://github.com/ArtemioPadilla/agent-triforce --skill visual-companion-artemiopadilla
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-companion
Source: https://github.com/ArtemioPadilla/agent-triforce/tree/main/.claude/skills/visual-companion
Command: npx skills add https://github.com/ArtemioPadilla/agent-triforce --skill visual-companion-artemiopadilla

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual brainstorming often lacks a quick, browser-enabled companion to present mockups, diagrams, and visual comparisons during design conversations.

Core Features & Use Cases

  • Browser-based visuals: show architecture diagrams, UI mockups, and data-flow visuals to augment design talks.
  • Guided decision flow: prompts consent flow and per-question rendering rules to manage output modalities.
  • Fallback to text: gracefully switch to text-only when browser tools are unavailable, ensuring uninterrupted discussions.

Quick Start

Enable the browser-based companion and begin presenting mockups and diagrams alongside the discussion.

Frequently Asked Questions about visual-companion

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

FAQPage Schema
How do I show UI mockups and architecture diagrams during a live design brainstorming session?▼

To show UI mockups and architecture diagrams during a design brainstorming session, you can use a browser-based companion that renders visual comparisons and data flows in real time alongside your discussion.

What is the best way to present data-flow visuals alongside a design conversation without leaving the chat?▼

The best way to present data-flow visuals alongside a design conversation is using a companion that renders browser-based mockups and diagrams directly in the session, styled with Tailwind CSS.

Can I generate wireframes and visual comparisons in a browser without installing extra design tools?▼

Yes, you can generate wireframes and visual comparisons directly in your browser without extra design tools, provided browser tools are available to render the Tailwind CSS-styled output during your session.

How do I handle visual brainstorming when browser tools are unavailable in my current environment?▼

When browser tools are unavailable during visual brainstorming, the companion gracefully falls back to text-only output, ensuring your design discussion and data-flow mapping continue without interruption.

Does this visual design companion require consent before rendering mockups in a brainstorming session?▼

Yes, the visual design companion uses a guided consent flow with per-question rendering rules to manage output modalities and determine when to display browser-based mockups or diagrams during your brainstorming.

Related Skills

Explore More Design & Creative Skills→
leessjuleessju

sp-visual-brainstorm

Render live HTML mockups in a browser for visual UI layout brainstorming.

Community
Intermediate
SherifEldeebSherifEldeeb
5

image-generation

Generate diagrams, charts, and visual assets for security documentation.

Community
Advanced
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced
jgezelscorpjgezelscorp

excalidraw

Generate hand-drawn style diagrams, wireframes, and UI mockups in Excalidraw.

Community
Basic