Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

SkillScope

X-ray any Claude Code skill instantly.

SkillScope parses any SKILL.md and renders it as an interactive flowchart — triggers, steps, tool calls, and decision branches — so you actually know what you're running.

SkillScope License

Why

You've installed a dozen skills from GitHub. You've built a few of your own. But when one misfires, you're reading raw markdown trying to trace what went wrong. SkillScope turns every SKILL.md into a visual flow you can read in 10 seconds.

Features

  • One SKILL.md in, one flowchart out — Paste, browse, or drag-and-drop any skill file
  • Color-coded node types — Triggers (cyan), steps (gray), tool calls (lime), branches (amber), outputs (rose), chains (violet)
  • Skill Quality Score — 0-100 grading across 5 categories with specific fix recommendations
  • Built-in examples — Try it instantly with pre-loaded skill samples
  • PNG export — Share skill diagrams with your team
  • Zero setup — Single HTML file, opens directly in any browser

Quick Start

  1. Clone the repo:
    git clone https://github.com/silvesterdivas/skillscope.git
  2. Open app.html in your browser
  3. Paste a SKILL.md or pick a built-in example

That's it. No build step, no dependencies to install.

How It Works

SkillScope uses a 3-layer parsing engine:

  1. Frontmatter — Extracts YAML metadata (name, description, allowed-tools, hooks)
  2. Sections — Splits markdown body on ## headers into logical sections
  3. Nodes — Extracts typed nodes per section: triggers, steps, tool calls, branches, outputs, and chains

The parser then builds edges between nodes and renders them as an interactive flowchart with collapsible swim lanes.

Skill Score

The scoring engine grades skills on a 100-point scale across 5 categories:

Category Points What it checks
Frontmatter 20 name, description, allowed-tools
Structure 25 sections, When to Use, Steps, Output Format
Clarity 20 numbered steps, tool references, code blocks
Logic 15 branching, error handling, chain awareness
Best Practices 20 length, templates, focus, detailed descriptions

Each issue includes a severity level and a specific fix recommendation.

Tech Stack

  • Tailwind CSS (CDN)
  • js-yaml (CDN)
  • html2canvas (CDN)
  • Cabinet Grotesk + General Sans + JetBrains Mono (Google Fonts)
  • Vanilla JavaScript — no framework, no build step

License

MIT

About

X-ray any Claude Code skill instantly. SkillScope parses any SKILL.md and renders it as an interactive flowchart — triggers, steps, tool calls, and decision branches — so you actually know what you're running.

Resources

Stars

14 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages