site-architecture

Plan website page hierarchy, navigation, URL structures, and internal linking.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/sapelite/balloon --skill site-architecture-sapelite
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: site-architecture
Source: https://github.com/sapelite/balloon/tree/main/.agents/skills/site-architecture
Command: npx skills add https://github.com/sapelite/balloon --skill site-architecture-sapelite

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and reorganize your website’s information architecture so users can find the right pages quickly and search engines can understand the structure.

Core Features & Use Cases

  • Page hierarchy design: Creates a logical page tree using principles like the 3-click rule and flat-vs-deep structure.
  • Navigation and URL strategy: Recommends header/footer/sidebar navigation patterns, breadcrumb behavior, and clean, consistent URL patterns.
  • Internal linking plan: Defines hub-and-spoke and cross-section linking strategies to avoid orphan pages and improve crawlable relevance.
  • Deliverable-ready outputs: Produces an ASCII page hierarchy, a Mermaid visual sitemap, a URL map table, navigation spec, and internal linking plan.

Quick Start

Use the site-architecture skill to plan your site structure for a new SaaS marketing website with pages like homepage, product, pricing, about, blog, plus integrations and competitor comparison sections.

Frequently Asked Questions about site-architecture

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

FAQPage Schema
How do I design a website hierarchy that follows the 3-click rule?

Plan a flat page hierarchy by limiting key pages to three clicks from the homepage. This site architecture approach uses hub-and-spoke internal linking to ensure discoverability and prevent orphan pages.

What is the best way to structure URLs and breadcrumbs for a new SaaS website?

Align breadcrumb behavior with clean, consistent URL patterns. This site architecture strategy ensures navigation matches the page tree, improving crawlable relevance for SaaS marketing and hybrid sections.

How do I create a visual sitemap and URL map for website navigation cleanup?

Generate a visual sitemap and URL map by producing an ASCII page hierarchy, a Mermaid sitemap, and a navigation spec. This site architecture process outputs deliverable-ready documentation for restructuring website information architecture.

Can I use this site architecture approach for e-commerce and documentation structures?

Yes, this site architecture approach applies to e-commerce-like structures with scaled sections, documentation, and content/blog layouts. It designs page hierarchy and internal linking strategies tailored to these specific site types.

When should I choose a flat hierarchy over a deep hierarchy for information architecture?

Choose a flat hierarchy over a deep hierarchy when you need to maximize discoverability and minimize clicks for key pages. This site architecture decision relies on principles like the 3-click rule and cross-section linking to boost crawlable relevance.

How do internal linking strategies prevent orphan pages in website architecture?

Internal linking strategies prevent orphan pages by implementing hub-and-spoke and cross-section linking models. This site architecture technique ensures every page is connected within the navigation design, improving both user access and search engine crawling.