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 --buildgit clone https://github.com/hubertlim/SkillForge.git
cd SkillForge
npm install
npm run dev- Drag a block from the sidebar onto the canvas
- Connect blocks by dragging from a bottom handle to a top handle
- Click a block to edit its label, description, and instructions
- Right-click a block for quick actions (duplicate, delete, change category)
- Click an edge to add a label to a connection
- Export hit the button in the top bar, pick a format (SKILL.md, Kiro, JSON), preview, copy, or download
- Screenshot click the camera icon to save your workflow as a PNG
- Share click Share to copy a link that anyone can open to load your workflow
- Import click Import to load an existing SKILL.md file or paste its content
- Gallery browse and load community-contributed skill workflows
- Presets click Presets to start from a built-in template
- 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 comprehensiveHave a great skill workflow? We'd love to feature it.
Browse skills in the app via the Gallery button, or contribute your own:
- Drop your exported
SKILL.mdfiles in thecommunity-skills/directory - Open a PR with the
community-skilllabel - See CONTRIBUTING.md for details
| Skill | Description |
|---|---|
| tdd-workflow | Test-driven development: brainstorm, plan, TDD, implement, review |
| api-first-design | API-first: requirements, schema, OpenAPI spec, implement, test |
| code-review-checklist | Code review: context, security, logic, readability, tests |
-
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)
| Layer | Tech |
|---|---|
| UI | React 19, TypeScript |
| Canvas | React Flow (@xyflow/react) |
| State | Zustand |
| Styling | Tailwind CSS |
| Icons | Lucide React |
| Screenshot | html-to-image |
| Build | Vite |
| Container | Docker |
| Deploy | GitHub Pages |
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.