Agent Skill Visualizer — Design skill for Claude Code
Visual drag-drop workflow builder for Agent skills.
How to install Agent Skill Visualizer
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open ZSeven-W/agent-skill-visualizer and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Agent Skill Visualizer does
Visual drag-drop workflow builder for Agent skills.
Alternatives in Design
- Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
- Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★
- Pair — Fuse two extracted designs into a single hybrid identity 3.6k ★
README
Agent Skill Visualizer
Visual drag-drop workflow builder for Agent skills. Export to SKILL.md format for OpenClaw/Claude Code.
Features
- 🎨 Drag & Drop Interface - Visual workflow builder
- 🔧 Node Types
- ⚡ Trigger - Skill activation conditions
- ⚙️ Action - Execute commands/tools
- ❓ Condition - Branching logic
- 🔄 Loop - Iteration
- 📤 Export - Generate SKILL.md for OpenClaw/Claude Code
Quick Start
# Install dependencies
npm install
# Start development server
npm run devUsage
- Drag nodes from the left panel to the canvas
- Connect nodes by dragging from output to input handles
- Configure nodes by clicking on them
- Export to SKILL.md format
Tech Stack
- React + TypeScript
- Vite
- @xyflow/react
License
MIT
Related Skills
FlowAI
Visual drag-and-drop platform for building, executing, and deploying LangGraph agentic workflows
Dsh File Upload
DeepSeek Harness (dsh) file-message plugin: Claude-style drag-and-drop / paperclip upload, content sniffing, d
Aside Visualizer
Aside account-skill port of codexclaw dev-visualizer: visual documents, SVG/HTML explainers and paged PDF repo
Brain Edit Slides
✏️ Canva-style visual Edit Mode for any HTML presentation built with Claude Code - drag, edit text, paste scre
Flowpiler
A visual editor for Claude Code workflows. Drag nodes onto a canvas, wire them together, and Flowpiler compile
Codex Visual Builder Guild
Free H70-C+ Spark Skill Graphs guild for Codex visual builder loops with imagegen and vision.
Related Agents
Ga4 Audience Builder
GA4 audience builder. Proposes Audience definitions based on observed funnel drop-off and ecomm event volumes,
Design Interaction
Interaction Designer on the Atlas bench. Distinguishes click, hover, focus, selection, drag, keyboard, path, m
Boxbox Visualizer
Takes the analyzer's graph.json and renders a beautiful, beginner-friendly self-contained HTML diagram. Used b
