Visual drag-and-drop builder for composable AI agent skills

Live Demo • Features • Quick Start • Usage • Contributing • Community Skills • Roadmap

The AI agent skills ecosystem is exploding. But creating skills today means writing YAML and Markdown files by hand.

SkillForge gives you a visual canvas where you drag skill blocks, wire them into workflows, edit instructions inline, and export in multiple formats. Works with Claude Code, Kiro, GitHub Copilot, Cursor, and any agent that reads the open skill format.

Try it now -- no install required.

• Drag and drop 15 predefined blocks across 6 categories
• Wire workflows connect blocks to define execution order
• Editable edge labels annotate connections (e.g. "on success", "if tests pass")
• Inline editing label, description, category, and Markdown instructions per node
• Multi-format export SKILL.md, Kiro steering file, or JSON
• Canvas screenshot export your workflow as a PNG image
• Import load an existing SKILL.md back onto the canvas (file upload or paste)
• Shareable links encode your workflow into a URL and share it with anyone
• Community gallery browse, preview, and load community-contributed skills
• Preset templates start from TDD, API Design, Bug Fix, or Feature Ship workflows
• Undo / Redo Ctrl+Z / Ctrl+Shift+Z with full history stack
• Keyboard shortcuts Delete, Ctrl+Z, Ctrl+Y, Ctrl+S, ? for help, Escape to close
• Right-click menu duplicate, delete, change category from context menu
• Step numbering live topological step badges on each node
• Node notes internal annotations that don't get exported
• Instruction preview truncated instructions shown directly on nodes
• Workflow stats block count, connections, category breakdown when no node selected
• Auto-layout snap nodes into a clean vertical chain
• Snap-to-grid 20px grid for clean node placement
• Validation warnings for disconnected nodes and empty instructions
• Auto-save localStorage persistence across page refreshes
• Collapsible sidebar maximize canvas space
• Search filter sidebar blocks by name or description
• Editable title click the workflow name in the header to rename
• Confirm dialog safety prompt before clearing the canvas
• Category-colored minimap each node colored by its category
• Fit-to-view button to zoom to fit all nodes
• Mobile warning friendly message on small screens
• Dark theme easy on the eyes, built for long sessions
• Dockerized one command to run
• GitHub Pages live demo auto-deployed on every push

https://hubertlim.github.io/SkillForge/

git clone https://github.com/hubertlim/SkillForge.git
cd SkillForge
docker compose up --build

Open http://localhost:5173

git clone https://github.com/hubertlim/SkillForge.git
cd SkillForge
npm install
npm run dev

1. Drag a block from the sidebar onto the canvas
2. Connect blocks by dragging from a bottom handle to a top handle
3. Click a block to edit its label, description, and instructions
4. Right-click a block for quick actions (duplicate, delete, change category)
5. Click an edge to add a label to a connection
6. Export hit the button in the top bar, pick a format (SKILL.md, Kiro, JSON), preview, copy, or download
7. Screenshot click the camera icon to save your workflow as a PNG
8. Share click Share to copy a link that anyone can open to load your workflow
9. Import click Import to load an existing SKILL.md file or paste its content
10. Gallery browse and load community-contributed skill workflows
11. Presets click Presets to start from a built-in template
12. Press ? to see all keyboard shortcuts

---
name: "tdd-workflow"
description: "Use when the user asks to build a feature using test-driven development"
---

## Step 1: Brainstorm

> Generate and explore ideas before committing to a plan

- Gather requirements from the user
- List at least 3 possible approaches
- Recommend the best path forward

## Step 2: Test First (TDD)

> Write tests before implementation code

- Write a failing test for the next requirement
- Implement the minimum code to make it pass
- Refactor while keeping tests green

## Step 3: Implement

> Write production code following best practices

- Follow the established plan step by step
- Write clean, idiomatic code

## Step 4: Code Review

> Review code for quality, security, and correctness

- Check for security vulnerabilities
- Verify error handling is comprehensive

Have a great skill workflow? We'd love to feature it.

Browse skills in the app via the Gallery button, or contribute your own:

1. Drop your exported SKILL.md files in the community-skills/ directory
2. Open a PR with the community-skill label
3. See CONTRIBUTING.md for details

• Shareable workflow links
• Import existing SKILL.md files
• Preset templates
• Undo / Redo
• Multi-format export (SKILL.md, Kiro steering, JSON)
• Right-click context menu
• Validation warnings
• Auto-layout and snap-to-grid
• localStorage persistence
• Community skill gallery
• Canvas screenshot export
• Editable edge labels
• Node notes and instruction preview
• Workflow stats panel
• GitHub Pages live demo
• Skill templates marketplace
• Multi-agent orchestration view (subagent chains)
• VS Code / Kiro extension for in-editor skill building
• Collaborative editing (multiplayer canvas)

src/
  App.tsx                          # Root component, toolbar, modal orchestration
  store.ts                         # Zustand state (nodes, edges, history, actions)
  types.ts                         # Shared TypeScript types and constants
  index.css                        # Global styles, scrollbars, React Flow overrides
  main.tsx                         # Entry point
  components/
    canvas/                        # Canvas and node rendering
      Canvas.tsx                   # React Flow canvas with drag-drop, selection, shortcuts
      SkillNode.tsx                # Custom node component (collapse, badges, preview)
      LabeledEdge.tsx              # Custom edge with editable labels
      EmptyState.tsx               # Empty canvas onboarding
      NodeContextMenu.tsx          # Right-click menu for nodes
      EdgeContextMenu.tsx          # Right-click menu for edges
      MultiSelectToolbar.tsx       # Floating toolbar for multi-selection
      ZoomIndicator.tsx            # Zoom percentage display
    panels/                        # Modal panels and editors
      NodeEditor.tsx               # Right sidebar property editor
      ExportPanel.tsx              # Multi-format export with preview
      ImportModal.tsx              # SKILL.md file/paste import
      PresetsPanel.tsx             # Simple and advanced preset templates
      GalleryPanel.tsx             # Community skill browser
      WorkflowManager.tsx          # Save/load/delete workflows
      DocsPanel.tsx                # Searchable documentation
      KeyboardHelp.tsx             # Keyboard shortcuts reference
    onboarding/                    # First-time user experience
      WelcomeScreen.tsx            # Tutorial vs docs choice
      InteractiveTutorial.tsx      # 5-step guided tutorial
      onboarding.ts                # Persistence helpers
    layout/                        # App layout
      Sidebar.tsx                  # Block palette with search and GitHub CTA
    ui/                            # Shared UI components
      Toast.tsx                    # Toast notification system
      ConfirmDialog.tsx            # Confirmation modal
      ValidationBar.tsx            # Workflow validation warnings
      WorkflowStats.tsx            # Stats panel (counts, categories)
      MobileWarning.tsx            # Small screen warning
  lib/                             # Pure logic (no React)
    skillBlocks.ts                 # 15 predefined block templates
    presets.ts                     # Simple + advanced preset definitions
    communitySkills.ts             # Bundled community skill content
    exportSkill.ts                 # SKILL.md export
    exportFormats.ts               # Multi-format export (MD, Kiro, JSON)
    importSkill.ts                 # SKILL.md parser
    shareUrl.ts                    # URL encode/decode with validation
    persistence.ts                 # localStorage state persistence
    workflowManager.ts             # Multi-workflow storage
docs/                              # Documentation and assets
community-skills/                  # Community-contributed skill workflows
.github/                           # CI, deploy, issue templates, PR template

Contributions are welcome. Please read CONTRIBUTING.md before opening a PR.

MIT -- use it, fork it, build on it.

Try SkillForge