Skip to content

ZSeven-W/agent-skill-visualizer

Repository files navigation

Agent Skill Visualizer

Visual drag-drop workflow builder for Agent skills. Export to SKILL.md format for OpenClaw/Claude Code.

Screenshot

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 dev

Usage

  1. Drag nodes from the left panel to the canvas
  2. Connect nodes by dragging from output to input handles
  3. Configure nodes by clicking on them
  4. Export to SKILL.md format

Tech Stack

  • React + TypeScript
  • Vite
  • @xyflow/react

License

MIT

About

Visual drag-drop workflow builder for Agent skills

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors