From vfm-agent-company
Generate visual explanations, diagrams, and slides. Use when explaining complex code, architecture, data flows, or any topic that benefits from visualization. Supports ASCII diagrams, Mermaid charts, and presentation slides.
npx claudepluginhub duylinhdang1998/claude-template-agent --plugin vfm-agent-companyThis skill uses the workspace's default tool permissions.
Generate visual explanations using ASCII art, Mermaid diagrams, and structured slides.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Generate visual explanations using ASCII art, Mermaid diagrams, and structured slides.
/visual-preview --explain <topic> # Visual explanation (ASCII + Mermaid + prose)
/visual-preview --diagram <topic> # Focused diagram only
/visual-preview --slides <topic> # Presentation slides
/visual-preview --ascii <topic> # Terminal-friendly (no browser needed)
Automatically use when:
Combines ASCII overview + Mermaid details + prose explanation.
Output structure:
# {Topic} Explained
## Overview
[ASCII diagram showing high-level flow]
## Detailed Flow
[Mermaid sequence/flowchart]
## Key Concepts
[Bullet points with explanations]
## Example
[Code snippet or usage example]
Single Mermaid diagram with minimal prose.
Diagram types:
flowchart - Process flows, decision treessequenceDiagram - API calls, interactionsclassDiagram - Object relationshipserDiagram - Database schemastateDiagram - State machinesgantt - Timelines, schedulesOne concept per slide, progressive disclosure.
Slide structure:
---
# Slide 1: Title
[Main point]
---
# Slide 2: Problem
[What we're solving]
---
# Slide 3: Solution
[Diagram + explanation]
---
# Slide 4: Implementation
[Key code or steps]
---
# Slide 5: Summary
[Key takeaways]
Pure ASCII art, no external rendering needed.
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Client │────►│ Server │────►│ Database │
└─────────────┘ └─────────────┘ └─────────────┘
│ │ │
│ HTTP Request │ SQL Query │
│──────────────────►│──────────────────►│
│ │ │
│ JSON Response │ Result Set │
│◄──────────────────│◄──────────────────│
┌─────────┐ ╔═════════╗ ┏━━━━━━━━━┓
│ Simple │ ║ Double ║ ┃ Bold ┃
└─────────┘ ╚═════════╝ ┗━━━━━━━━━┛
────► ◄──── ───── ═════
│ │ │ ║
▼ ▲ │ ║
┌──────────────────────────────────────┐
│ Authentication Flow │
└──────────────────────────────────────┘
│
▼
┌────────────────┐
│ Login Request │
└───────┬────────┘
│
┌───────────┴───────────┐
▼ ▼
┌─────────────┐ ┌─────────────┐
│ Valid Creds │ │Invalid Creds│
└──────┬──────┘ └──────┬──────┘
│ │
▼ ▼
┌─────────────┐ ┌─────────────┐
│ Issue Token │ │ Return 401 │
└──────┬──────┘ └─────────────┘
│
▼
┌─────────────┐
│ Dashboard │
└─────────────┘
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
sequenceDiagram
participant C as Client
participant S as Server
participant D as Database
C->>S: POST /login
S->>D: SELECT user
D-->>S: User data
S-->>C: JWT token
erDiagram
USER ||--o{ POST : creates
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : writes
Save generated visuals to:
{project}/plans/visuals/{topic-slug}.md
If no active plan context:
plans/visuals/{topic-slug}.md
/visual-preview --explain WebSocket connection lifecycle
Output:
# WebSocket Connection Lifecycle
## Overview
┌──────────┐ HTTP Upgrade ┌──────────┐
│ Client │────────────────►│ Server │
└────┬─────┘ └────┬─────┘
│ │
│◄───── 101 Switching ──────►│
│ │
│◄═══════ WebSocket ════════►│
│ (bidirectional) │
## Detailed Flow
sequenceDiagram
Client->>Server: HTTP GET /ws (Upgrade: websocket)
Server-->>Client: 101 Switching Protocols
loop Message Exchange
Client->>Server: Send message
Server-->>Client: Send message
end
Client->>Server: Close frame
Server-->>Client: Close acknowledgment
## Key Concepts
- **Handshake**: Starts as HTTP, upgrades to WS
- **Full-duplex**: Both sides can send anytime
- **Persistent**: Single connection, no polling
- **Frames**: Messages split into frames
/visual-preview --ascii microservices architecture
Output:
┌─────────────────┐
│ Load Balancer │
└────────┬────────┘
│
┌───────────────────┼───────────────────┐
│ │ │
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ Auth API │ │ Users API │ │Orders API │
└─────┬─────┘ └─────┬─────┘ └─────┬─────┘
│ │ │
└───────────────────┼───────────────────┘
│
┌────────┴────────┐
│ Message Queue │
└────────┬────────┘
│
┌──────────────┼──────────────┐
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Auth DB │ │ Users DB │ │Orders DB │
└──────────┘ └──────────┘ └──────────┘
sequential-thinking for complex explanationsproject-manager workflow for architecture docscode-review for visualizing changes