ZSeven-W

Agent Skill Visualizer — Design skill for Claude Code

Design community

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.

![Screenshot](./screenshot.png)

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

Related Skills

Dsh File Upload — Design skill for Claude Code

Dsh File Upload

DeepSeek Harness (dsh) file-message plugin: Claude-style drag-and-drop / paperclip upload, content sniffing, d

Design community
Flowpiler — Design skill for Claude Code

Flowpiler

A visual editor for Claude Code workflows. Drag nodes onto a canvas, wire them together, and Flowpiler compile

Design community
Codex Visual Builder Guild — Design skill for Claude Code

Codex Visual Builder Guild

Free H70-C+ Spark Skill Graphs guild for Codex visual builder loops with imagegen and vision.

Design community
Claude Style Patch — Design skill for Claude Code

Claude Style Patch

A drop-in CLAUDE.md style section that changes how Claude writes prose.

Design community
Website Builder Setup — Design skill for Claude Code

Website Builder Setup

Build professional animated websites with Claude Code — no coding needed. One install, three tools: UI/UX Pro

Design community
Forge Skill Builder — Design skill for Claude Code

Forge Skill Builder

Author a valid Forge SKILL.md (frontmatter + body + optional scripts) end-to-end. Use this when the user wants

Design community

Related Agents

Ga4 Audience Builder — Development agent for Claude Code

Ga4 Audience Builder

GA4 audience builder. Proposes Audience definitions based on observed funnel drop-off and ecomm event volumes,

Development community
UI Agent — Design agent for Claude Code

UI Agent

Use when the user needs UI/UX design decisions, component architecture, layout, typography, color system, or v

Design community
Unity UI Builder — Design agent for Claude Code

Unity UI Builder

Builds UI screens with both code and visual setup via MCP. Handles UGUI Canvas optimization, UI Toolkit USS/UX

Design community