skills.rest
SlevoDev
SlevoDevOFFICIAL
Explore all skills by this author →
GitHub

site-architecture

Plan site architecture and generate ASCII and Mermaid sitemaps.

Updated Apr 8, 2026
Search Tags:#hierarchy#information-architecture#internal-linking#site-architecture#navigation-design#url-structure#mermaid-sitemap
One-click install
npx skills add https://github.com/SlevoDev/s-tag --skill site-architecture-slevodev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-architecture
Source: https://github.com/SlevoDev/s-tag/tree/main/.claude/skills/site-architecture
Command: npx skills add https://github.com/SlevoDev/s-tag --skill site-architecture-slevodev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps product teams and information architects plan and optimize website structure, navigation, and URL patterns to improve findability and user experience.

Core Features & Use Cases

  • Define page hierarchies (L0-L3) and navigation flows
  • Create ASCII trees and Mermaid visual sitemaps
  • Propose URL structures, breadcrumbs, and internal linking strategies
  • Support for various site types (SaaS, content, docs, e-commerce, hybrid)

Quick Start

Draft a 3-level site map for the homepage, features, pricing, blog, and docs, then convert it into a Mermaid diagram for design handoff.

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 site architecture for intuitive navigation?▼

To plan site architecture, define page hierarchies (L0-L3) and navigation flows to organize pages and URL structure. This process yields actionable outputs like ASCII trees, Mermaid visual sitemaps, and URL maps to guide implementation.

What is the best way to create a visual sitemap for design handoff?▼

The best way to create a visual sitemap for design handoff is to draft a multi-level page hierarchy and convert it into a Mermaid diagram. This provides a clear, visual representation of navigation flows and internal linking strategies.

Can I use this site structure planning approach for e-commerce and SaaS platforms?▼

Yes, this site structure planning approach supports various site types including SaaS, content, docs, e-commerce, and hybrid platforms. It adapts page hierarchies and internal linking strategies to fit the specific platform context.

How do I design URL structure and breadcrumbs for a multi-level website?▼

Design URL structure and breadcrumbs by establishing consistent L0-L3 page hierarchies. This consistency enforces clear patterns across the site, yielding a comprehensive URL map and actionable internal linking strategy.

What is hub-spoke internal linking and when do I need it for site navigation?▼

Hub-spoke internal linking is a strategy connecting a primary hub page to related spoke pages to organize content clusters. You need it when designing site architecture to improve findability and establish intuitive user journeys.

Does this site architecture tool generate ASCII sitemaps?▼

Yes, this site architecture tool generates ASCII trees and Mermaid visual sitemaps as actionable outputs. These formats help document page hierarchies and navigation structures for technical implementation.

Related Skills

Explore More Product & Management Skills→
MrAlexisCordMrAlexisCord

site-architecture

Design website page hierarchies, navigation systems, and URL structures.

Community
Intermediate
fluid-commercefluid-commerce

site-architecture

Plan website information architecture and generate ASCII tree and Mermaid diagram outputs.

Official
Advanced
sachio222sachio222

site-architecture

Plan site hierarchies with L0-L3 levels, URL patterns, and hub-and-spoke linking.

Community
Advanced
mdnaimul22mdnaimul22
2

site-architecture

Audit website information architecture and generate prioritized restructuring plans.

Community
Advanced