visual-architect

Translate software specifications and codebase findings into implementation plans and HTML visual reviews.

8|Updated Jun 18, 2026
One-click install
npx skills add https://github.com/ddobrin/plan-skills --skill visual-architect-ddobrin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-architect
Source: https://github.com/ddobrin/plan-skills/tree/main/plugins/plan/skills/visual-architect
Command: npx skills add https://github.com/ddobrin/plan-skills --skill visual-architect-ddobrin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill transforms complex software planning work into a precise machine-readable implementation plan and a self-contained visual review document, making architecture, dependencies, risks, and execution steps easier to validate before coding begins.

Core Features & Use Cases

  • Codebase-Grounded Planning: Investigates the existing codebase and maps specifications to exact files, dependencies, tests, integration points, and implementation steps.
  • Visual Plan Rendering: Produces a companion HTML document with architecture diagrams, file maps, annotated code, API contracts, schema views, wireframes, open questions, and planning comments.
  • Use Case: Use it when a milestone requires detailed human review of architecture and execution sequencing while preserving a structured plan that downstream planning, engineering, validation, and audit workflows can consume unchanged.

Quick Start

Use the visual-architect skill to analyze the active milestone specification and codebase, then create the required plan.md and derived visual-plan.html artifacts for review.

Frequently Asked Questions about visual-architect

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

FAQPage Schema
How do I turn a software specification into a visual architecture plan for review?

Visual architecture planning renders software specifications into a machine-readable implementation plan and a companion HTML document with architecture diagrams. This makes dependencies, risks, and execution sequences easier to validate before coding begins.

What is the best way to generate implementation plans from an existing codebase?

Generating implementation plans from an existing codebase requires read-only codebase investigation to map specifications to exact files, dependencies, tests, and integration points. The process yields a structured plan.md artifact for downstream engineering and audit workflows.

Can I include Mermaid diagrams in my HTML architecture review document?

You can include Mermaid diagrams in your HTML architecture review document through explicit Mermaid source fallbacks. This ensures architecture diagrams, schema views, and wireframes render correctly within synchronized HTML output for human review.

Does visual planning for feature development support API design and schema mapping?

Visual planning for feature development supports API design, schema mapping, and risk validation within structured milestone workflows. It produces annotated code and API contracts inside a visual review document to ground architecture planning in codebase realities.

Why do I need a synchronized HTML output alongside my implementation plan?

A synchronized HTML output is needed alongside your implementation plan to provide a self-contained visual review artifact for human stakeholders. It visualizes open questions, file maps, and planning comments that a standard markdown plan cannot render for architecture review.

When should I not use automated architecture planning for refactoring tasks?

You should not use automated architecture planning for refactoring tasks if your milestone lacks detailed software specifications or requires modifying the codebase during investigation. The process demands read-only codebase analysis and exact plan structure to preserve downstream audit requirements.