skills.rest
Nerfherder16
Nerfherder16COMMUNITY
Explore all skills by this author →
GitHub

visual-plan

Render build plan task graphs from .autopilot/spec.md and progress.json into standalone HTML diagrams.

Updated Mar 12, 2026
Search Tags:#automation#html#dependencies#visualization#svg#phases#build-plan
One-click install
npx skills add https://github.com/Nerfherder16/BrickLayer --skill visual-plan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-plan
Source: https://github.com/Nerfherder16/BrickLayer/tree/main/.claude/skills/visual-plan
Command: npx skills add https://github.com/Nerfherder16/BrickLayer --skill visual-plan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build teams need a clear, shareable visualization of complex build plans. Visual-plan converts raw spec data into a self-contained HTML diagram that shows tasks, dependencies, and phase boundaries without relying on external assets.

Core Features & Use Cases

  • Parse .autopilot/spec.md and .autopilot/progress.json to render a dependency graph.
  • Produce a standalone HTML diagram with color-coded statuses and embedded SVG output.
  • Provide a fallback task list for readability and auditing.

Quick Start

Run the /visual-plan command to generate a self-contained HTML diagram from the current spec.

Frequently Asked Questions about visual-plan

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an HTML build plan diagram from project specs?▼

An HTML build plan diagram is generated by parsing .autopilot/spec.md and progress.json files to render a self-contained dependency graph with embedded SVG, phase markers, and task statuses.

What is the best way to visualize project dependencies and phases in a standalone file?▼

Visualizing project dependencies in a standalone file is best achieved by generating a self-contained HTML diagram with embedded SVG, which removes the need for external assets while clearly marking phase boundaries and task statuses.

Can I render a task graph if my build plan has circular dependencies?▼

Rendering a task graph with circular dependencies is supported by the cycle detection mechanism, which identifies these loops during spec and progress data parsing to ensure the visualization accurately reflects the build plan structure.

Does generating a build plan visualization require any external libraries or assets?▼

Generating a build plan visualization does not require external libraries or assets, because the output is a completely self-contained HTML file with embedded SVG output and a fallback task table for readability.

How do I audit build plan tasks if the visual dependency graph is unreadable?▼

To audit build plan tasks if the visual dependency graph is unreadable, you can reference the fallback task list provided within the generated HTML output, which ensures task readability and auditing alongside the visual diagram.

Related Skills

Explore More Product & Management Skills→
hheydaroffhheydaroff

spec-to-tasks

Parse SPEC.md files into structured tasks.json for Ralph Loop execution.

Community
Intermediate
JuanMS20JuanMS20

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML files with inline SVG.

Community
Intermediate
cfardevcfardev

cu-edit

Modify use case markdown files and synchronize roadmap status.

Community
Intermediate
FlexNetOSFlexNetOS

plan-dependency-graph

Construct dependency graphs from target and dimension definitions.

Official
Advanced