site-architecture

Plan website hierarchies, navigation, and URL patterns with ASCII and Mermaid deliverables.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/Wakewell-Sleep-Solutions/claude-skills-ecosystem --skill site-architecture-wakewell-sleep-solutions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-architecture
Source: https://github.com/Wakewell-Sleep-Solutions/claude-skills-ecosystem/tree/main/site-architecture
Command: npx skills add https://github.com/Wakewell-Sleep-Solutions/claude-skills-ecosystem --skill site-architecture-wakewell-sleep-solutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plan and optimize website structure, navigation, and URL patterns to improve findability and user experience.

Core Features & Use Cases

  • Information architecture planning for page hierarchy, navigation, URL patterns, and internal linking.
  • Guidance on the 3-Click Rule and ideal depth (flat vs deep hierarchies).
  • Deliverables templates: ASCII page hierarchy, Mermaid visual sitemap, URL map, and navigation spec; practical use cases across SaaS, content, and documentation sites.

Quick Start

Draft the full site structure in an ASCII tree for your target scope, then generate a Mermaid visual sitemap and URL map to begin implementation.

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 structure with clear navigation?▼

Plan website structure by defining page hierarchy, navigation paths, and URL patterns using the 3-click rule and hub-and-spoke internal linking to improve findability across SaaS, content, and documentation sites.

What is the 3-click rule in information architecture?▼

The 3-click rule in information architecture is a guideline stating users should reach any page within three clicks from the homepage, influencing whether you choose flat or deep site hierarchies for optimal user experience.

How do I create a visual sitemap using Mermaid?▼

Create a visual sitemap by drafting an ASCII page hierarchy tree for your target scope, then translating that structure into a Mermaid diagram to visualize navigation and internal linking relationships for design and development teams.

What is the best way to design a URL structure for a SaaS site?▼

Design a URL structure for a SaaS site by mapping flat vs deep hierarchies against your page tree, generating a URL map that aligns with hub-and-spoke internal linking to optimize findability and navigation patterns.

Can I generate a navigation spec for a documentation site from an ASCII tree?▼

Yes, you can generate a navigation spec for a documentation site by mapping an ASCII page hierarchy into a structured navigation design and URL map that defines findability patterns for development teams.

When should I use flat vs deep hierarchies for site architecture?▼

Use flat hierarchies to minimize click depth and improve findability for content and SaaS sites, while deep hierarchies organize complex documentation sites with strict categorization needs based on the 3-click rule.