Skills Graph Visualization

Skills Graph Visualization

An interactive force-directed graph visualization of Clawdbot's 74 skills and their connections.


Features

• Interactive Graph: Force-directed layout with 74 skill nodes and 1600+ connections
• Category Coloring: Skills colored by category (art:, bot:, fit:, thk:, etc.)
• Search & Filter: Search by name, description, or keywords; filter by category
• Skill Details: Click any node to see description, keywords, and content preview
• Highlighting: Connected nodes and links highlighted on selection

Quick Start

# Install dependencies
npm install

# Parse skills from [home-path]
npm run parse-skills

# Start development server
npm run dev

Then open [http://localhost:3457](http://localhost:3457)

How It Works

1. Parsing: `scripts/parse-skills.js` reads all `SKILL.md` files from `[home-path]`
2. Extraction: Extracts frontmatter (name, description), keywords, and related skills
3. Graph Building: Creates nodes for skills and edges based on:
- Explicit skill references (`/command` or `Related Skills` section)
- Shared keywords (≥2 matching keywords)
- Same category
4. Visualization: React Force Graph 2D renders the interactive graph

Categories

Regenerating Data

If skills are added/updated:

npm run parse-skills

This regenerates `data/skills.json` with the latest skill data.

Tech Stack

• Next.js 14 - React framework
• react-force-graph-2d - D3 force simulation wrapper
• gray-matter - YAML frontmatter parsing
• TypeScript - Type safety

File Structure

skills-graph/
├── data/
│   └── skills.json      # Generated graph data
├── pages/
│   ├── _app.tsx         # App wrapper
│   └── index.tsx        # Main visualization
├── scripts/
│   └── parse-skills.js  # Skill parser
├── styles/
│   └── globals.css      # Styling
└── package.json