site-architecture

Plan and validate website architectures with ASCII trees, Mermaid sitemaps, and URL maps.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/program-the-brain-not-the-heartbeat/dotfiles --skill site-architecture-program-the-brain-not-the-heartbeat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: site-architecture
Source: https://github.com/program-the-brain-not-the-heartbeat/dotfiles/tree/main/config/claude/skills/site-architecture
Command: npx skills add https://github.com/program-the-brain-not-the-heartbeat/dotfiles --skill site-architecture-program-the-brain-not-the-heartbeat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plan and validate scalable website architectures, including page hierarchy, navigation patterns, and URL structure to improve usability and SEO.

Core Features & Use Cases

  • Define hierarchical page structures (L0-L3) with ASCII trees for quick visualization.
  • Generate visual sitemaps using Mermaid diagrams and navigation-zone mappings.
  • Create robust URL maps and breadcrumb guidance to reflect site hierarchy.
  • Support internal linking strategies (hub-and-spoke) for scalable content networks.

Quick Start

Plan a 3-level SaaS marketing site with Home, Features, Pricing, Blog, Docs, and Integrations, and output an ASCII site tree, Mermaid sitemap, and URL map.

Frequently Asked Questions about site-architecture

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

FAQPage Schema
How do I plan a scalable website architecture for a SaaS or content site?

Plan scalable website architecture by defining hierarchical page structures (L0-L3), mapping navigation zones, and generating an ASCII site tree alongside a Mermaid sitemap to visualize page relationships. This approach validates usability and SEO for SaaS, content, docs, and hybrid sites.

What is the best way to visualize site hierarchy and URL structure during a redesign?

The best way to visualize site hierarchy is by generating an ASCII tree for quick structural mapping and a Mermaid sitemap for visual navigation patterns. You also create a URL map and breadcrumb guidance to reflect the site architecture accurately.

Does this site architecture planning approach support internal linking strategies?

Yes, this site architecture planning approach supports internal linking strategies by applying a hub-and-spoke model. This creates scalable content networks, ensuring robust internal linking across the defined page hierarchy and navigation zones.

Can I use Mermaid diagrams to map navigation patterns for technical documentation?

Yes, you can use Mermaid diagrams to map navigation patterns specifically for technical documentation. The process generates visual sitemaps and navigation-zone mappings that structure docs hierarchically, improving both user navigation and SEO performance.

How do I create a URL map that reflects a multi-level site hierarchy?

Create a URL map that reflects a multi-level site hierarchy by first defining the L0-L3 page structure using an ASCII tree. The URL map and breadcrumb guidance are then generated to align directly with this established site architecture and navigation spec.

When do I need to restructure an existing site's information architecture?

You need to restructure an existing site's information architecture when the current page hierarchy, URL structure, or navigation patterns no longer support scalable content. Validating a new site architecture with an ASCII tree and Mermaid sitemap improves usability.