ワンクリックでManusで任意のスキルを実行

skill-visualizer

スター17

フォーク1

更新日2026年1月29日 07:27

Generate interactive HTML visualizations of the skills collection, codebase structure, or dependency graphs. Uses D3.js for interactive visualization with collapsible nodes, color-coded categories, and hover details. Triggers on "visualize skills", "generate skill map", "codebase visualization", or "show skill dependencies".

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

mhylle

mhylle/claude-skills-collection

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Skill Visualizer

Generate interactive HTML visualizations for exploring skills, codebase structure, and dependencies.

Overview

This skill creates browser-viewable HTML files with interactive diagrams. It supports multiple visualization types and outputs self-contained HTML files that open directly in any browser.

Arguments

$0: Output type - skills, codebase, or deps (default: skills)

Examples:

/skill-visualizer - Generate skills collection map
/skill-visualizer skills - Generate skills collection map
/skill-visualizer codebase - Generate codebase structure visualization
/skill-visualizer deps - Generate skill dependency graph

Visualization Types

Skills Map (`skills`)

Generates an interactive force-directed graph of all skills showing:

Skill nodes with name and type indicator
Color coding by skill type:
- Green: Orchestrators (context: fork)
- Blue: Read-only (allowed-tools restrictions)
- Orange: Hybrid (standard skills)
Hover tooltips with skill descriptions
Drag to reposition nodes

Codebase Structure (`codebase`)

Generates a treemap visualization of the project structure:

Directory hierarchy with expandable nodes
File type distribution by color
Size indicators for each file/directory

Dependency Graph (`deps`)

Generates a directed graph showing skill dependencies:

Which skills invoke other skills
Integration points between skills
Visual workflow representation

Usage

Invoke the skill with desired output type
The skill runs Python scripts to analyze the codebase
Generates self-contained HTML with embedded CSS/JS
Opens in default browser automatically

# Run directly
python ~/.claude/skills/skill-visualizer/scripts/visualize.py skills

# Output location
docs/visualizations/skills-map-YYYY-MM-DD.html

Output

All visualizations are saved to docs/visualizations/:

skills-map-YYYY-MM-DD.html
codebase-structure-YYYY-MM-DD.html
skill-deps-YYYY-MM-DD.html

HTML Features

Self-contained: No external dependencies (D3.js embedded)
Responsive design: Works on any screen size
Interactive: Pan, zoom, drag nodes
Tooltips: Hover for details
Dark theme: Easy on the eyes
Export-ready: Can screenshot for documentation

Python Scripts

The skill uses Python scripts in scripts/ directory:

visualize.py - Main visualization generator
Requires only standard library (no pip install needed)

このリポジトリの他の Skills

同じリポジトリ

design-language

mhylle/claude-skills-collection

Design and manufacture someone's OWN reusable visual design language and save it as durable files — design tokens (css/tokens.css + a W3C design-tokens.json), a DESIGN_LANGUAGE.md contract, and a living multi-page styleguide — that future sessions and other projects read to build UI in one consistent, ownable style. Use this whenever the goal is to create, define, set up, or establish a design language, design system, house style, visual identity, or brand look captured once as files and reused across many UIs or projects; to make apps stop looking templated, generic, or like every other Claude/Anthropic app (the default warm-beige + terracotta + pillowy-card look); or to get tokens plus a contract that tells Claude how to build in that style every time. It is reaction-first — it researches real references, renders live options the user reacts to, and dials each dimension (color, typography, spacing, shape, elevation, motion, imagery, components, patterns, voice) from conventional to experimental. This produc

2026-06-2717

ship-issue

mhylle/claude-skills-collection

One-command issue-to-merge pipeline orchestrator. Drives a GitHub issue through nine stages (preflight, plan, implement, review, ci, cloud_review, deploy, e2e, logs) with two human gates, persisting all run state to files so a crashed or interrupted run resumes losslessly. Triggers on "/ship-issue" with an issue number or URL. User-invoked only.

2026-06-1217

tt-workflow-build

mhylle/claude-skills-collection

Tasktracker-native trigger for a PARALLEL build via the Claude Code Workflow tool. Thin by design — it does two things, then drives to done: (1) ensure a tasktracker project exists (use the existing one, or create one), then (2) start a dynamic `Workflow` that builds it, tracking the work in tasktracker and using the build + verify skills. It does NOT analyze parallelism up front, ask the user to choose a mode, hand back, or fall back to a sequential skill — get a project, start the workflow, drive autonomously to done (pausing only at real human gates like deploy). Use when the user wants a build driven by the parallel Workflow engine — typically after /tt-brainstorm + /tt-create-plan, or standalone. Triggers on "/tt-workflow-build", "build this with a workflow", "parallel build (tasktracker)", "fan out the build". Prefer /tt-implement-plan or /tt-workflow-run only when the WHOLE job is irreducibly sequential; prefer /tt-workflow-audit for read-only analysis.

2026-06-0117

tt-implement-plan

mhylle/claude-skills-collection

Tasktracker-native plan orchestrator. Drives execution of a plan whose phases are stored as tasktracker phase tasks (NOT a docs/plans/*.md file). Honours active-task discipline (setActiveTask before every artifact-producing call, pauseActiveTask before user waits, clearActiveTask on phase done), respects the locked phase body (design notes go to sub-tasks, never to the phase description), logs defects/learnings/frictions through tasktracker insights as they surface, and delegates the actual implementation to /implement-phase. Use whenever the user wants to "implement the plan", "run the plan", or "work through the phases" AND the plan was created with /tt-create-plan (or otherwise lives in tasktracker). Triggers on "tt implement plan", "tt implement", "implement plan (tasktracker)", "/tt-implement-plan", "execute the tasktracker plan", or any plan-execution request inside a session that already has a tasktracker active task or project. Prefer this over the plain /implement-plan skill whenever a tasktracker MC

2026-06-0117

tt-implement-phase

mhylle/claude-skills-collection

Tasktracker-native per-phase executor. Runs a SINGLE phase whose scope and sub-tasks live as tasktracker phase + sub-task rows (NOT in a docs/plans/*.md file). Honours active-task discipline (setActiveTask on phase AND on each sub-task as worked), respects the locked phase body (HTTP 422 on description edit — design notes go to sub-tasks), updates sub-task status via tasktracker_updateTaskStatus as work progresses, logs defects/learnings/frictions through tasktracker insights, and delegates code work to subagents when a subagent-dispatch tool is available — otherwise does the work in-context itself (graceful degradation), never stalling. Used by /tt-implement-plan as the per-phase unit of work; can also be invoked directly with a phase task id. Triggers when /tt-implement-plan delegates a phase, or manually with "/tt-implement-phase <phase-task-id>", "tt implement phase", "execute phase (tasktracker)", "/tt-implement-phase". Prefer this over the plain /implement-phase skill whenever a tasktracker MCP is avail

2026-06-0117

tt-brainstorm

mhylle/claude-skills-collection

Tasktracker-native Socratic brainstorming. Refines a raw idea into a frozen brainstorm document tree stored in tasktracker (NOT in docs/brainstorms/*.md), with every chosen/deferred/rejected option recorded as a decision and an optional one-way promotion into a task tree. Use whenever a user wants to brainstorm, explore, refine, or "think through" an idea AND the work is (or will be) tracked in tasktracker. Triggers on "tt brainstorm", "brainstorm with tasktracker", "brainstorm in tasktracker", "explore this idea (tasktracker)", "/tt-brainstorm", or any brainstorm-style request inside a session that already has a tasktracker active task or project. Prefer this over the plain /brainstorm skill whenever a tasktracker MCP is available — the artifacts integrate with /tt-create-plan and /tt-implement-plan, so picking the file-based variant in a tasktracker project just creates orphan markdown.

2026-06-0117

name	skill-visualizer
description	Generate interactive HTML visualizations of the skills collection, codebase structure, or dependency graphs. Uses D3.js for interactive visualization with collapsible nodes, color-coded categories, and hover details. Triggers on "visualize skills", "generate skill map", "codebase visualization", or "show skill dependencies".
allowed-tools	Bash(python *), Read, Glob, Write
argument-hint	[type: skills\|codebase\|deps]

Skill Visualizer

Generate interactive HTML visualizations for exploring skills, codebase structure, and dependencies.

Overview

This skill creates browser-viewable HTML files with interactive diagrams. It supports multiple visualization types and outputs self-contained HTML files that open directly in any browser.

Arguments

$0: Output type - skills, codebase, or deps (default: skills)

Examples:

/skill-visualizer - Generate skills collection map
/skill-visualizer skills - Generate skills collection map
/skill-visualizer codebase - Generate codebase structure visualization
/skill-visualizer deps - Generate skill dependency graph

Visualization Types

Skills Map (`skills`)

Generates an interactive force-directed graph of all skills showing:

Skill nodes with name and type indicator
Color coding by skill type:
- Green: Orchestrators (context: fork)
- Blue: Read-only (allowed-tools restrictions)
- Orange: Hybrid (standard skills)
Hover tooltips with skill descriptions
Drag to reposition nodes

Codebase Structure (`codebase`)

Generates a treemap visualization of the project structure:

Directory hierarchy with expandable nodes
File type distribution by color
Size indicators for each file/directory

Dependency Graph (`deps`)

Generates a directed graph showing skill dependencies:

Which skills invoke other skills
Integration points between skills
Visual workflow representation

Usage

Invoke the skill with desired output type
The skill runs Python scripts to analyze the codebase
Generates self-contained HTML with embedded CSS/JS
Opens in default browser automatically

# Run directly
python ~/.claude/skills/skill-visualizer/scripts/visualize.py skills

# Output location
docs/visualizations/skills-map-YYYY-MM-DD.html

Output

All visualizations are saved to docs/visualizations/:

skills-map-YYYY-MM-DD.html
codebase-structure-YYYY-MM-DD.html
skill-deps-YYYY-MM-DD.html

HTML Features

Self-contained: No external dependencies (D3.js embedded)
Responsive design: Works on any screen size
Interactive: Pan, zoom, drag nodes
Tooltips: Hover for details
Dark theme: Easy on the eyes
Export-ready: Can screenshot for documentation

Python Scripts

The skill uses Python scripts in scripts/ directory:

visualize.py - Main visualization generator
Requires only standard library (no pip install needed)

skill-visualizer

Skill Visualizer

Overview

Arguments

Visualization Types

Skills Map (skills)

Codebase Structure (codebase)

Dependency Graph (deps)

Usage

Output

HTML Features

Python Scripts

このリポジトリの他の Skills

このリポジトリの他の Skills

Skill Visualizer

Overview

Arguments

Visualization Types

Skills Map (skills)

Codebase Structure (codebase)

Dependency Graph (deps)

Usage

Output

HTML Features

Python Scripts

Skills Map (`skills`)

Codebase Structure (`codebase`)

Dependency Graph (`deps`)

Skills Map (`skills`)

Codebase Structure (`codebase`)

Dependency Graph (`deps`)