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.