Skill Viewer

A local web app for visualizing and exploring Claude Code skills — their trigger words, call chains, hooks, and relationships.

Features

• Relationship graph — directed DAG showing which skills invoke which (powered by Dagre + React Flow)
• Source grouping — gstack / superpowers / caveman / independent, color-coded
• Search — filter by name, description, or trigger words
• Detail panel — triggers, calls (clickable navigation), allowed tools, hooks, preamble tier, full content
• Live reload — file watcher auto-refreshes when skill files change on disk

Requirements

• Node.js 18+
• pnpm
• Claude Code skills installed at ~/.claude/skills/ and/or ~/.claude/plugins/cache/

Quick Start

# Install dependencies
pnpm install

# Terminal 1 — backend API (port 3001)
pnpm server:start

# Terminal 2 — frontend dev server (port 5173)
pnpm dev

Open http://localhost:5173

How It Works

Skill Discovery

Scans three locations:

Source	Path
gstack / independent	~/.claude/skills/*/SKILL.md
superpowers	~/.claude/plugins/cache/superpowers-marketplace/superpowers/*/skills/*/SKILL.md
caveman	~/.claude/plugins/cache/caveman/caveman/*/skills/*/SKILL.md

Relationship Detection

Parses each skill's body text with regex patterns to detect outgoing calls:

• `invoke writing-plans skill` style references
• `/skill-name` backtick patterns
• Known skill name literals (brainstorming, executing-plans, etc.)

Edges are filtered to only include skills that actually exist in the discovered set.

Stack

Layer	Tech
Backend	Node.js + Express + TypeScript (tsx)
Parsing	gray-matter (YAML frontmatter)
File watching	chokidar + WebSocket push
Frontend	React 19 + Vite + TypeScript
Graph	@xyflow/react + @dagrejs/dagre
Markdown	react-markdown

API

GET /api/skills          → Skill[]
GET /api/skills/:name    → Skill (with rawContent)
GET /api/graph           → { nodes, edges }
GET /api/search?q=       → Skill[]
WS  ws://localhost:3001  → { type: "refresh" } on file change

Project Structure

skill-viewer/
├── server/
│   ├── index.ts     # Express + WebSocket server
│   ├── parser.ts    # SKILL.md → Skill, call extraction
│   └── graph.ts     # Build nodes/edges for graph
└── src/
    ├── App.tsx
    ├── api.ts
    ├── types.ts
    └── components/
        ├── SkillGraph.tsx   # React Flow + dagre layout
        ├── SkillList.tsx    # Left panel with search
        └── SkillDetail.tsx  # Right panel detail view

License

MIT © Arismemo