skills.rest
gerald-ica
gerald-icaCOMMUNITY
Explore all skills by this author →
GitHub

site-architecture

Generate ASCII hierarchies and Mermaid sitemaps with navigation zones for site architecture.

Updated Apr 14, 2026
Search Tags:#mermaid#sitemap#information-architecture#site-architecture#navigation-design#ascii-tree#URL-structure
One-click install
npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill site-architecture-gerald-ica
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-architecture
Source: https://github.com/gerald-ica/opencode-config-snapshot/tree/main/opencode/skills/site-architecture
Command: npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill site-architecture-gerald-ica

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plan clear, scalable website structures by defining page hierarchies, navigation, and URL patterns to improve findability and usability.

Core Features & Use Cases

  • Plan page hierarchies, navigation schemas, and URL schemes tailored to different site types (SaaS, content, docs)
  • Generate ASCII trees and Mermaid sitemaps for design handoff and stakeholder review
  • Provide an internal linking blueprint and best-practice guidelines for navigation and IA across common site types

Quick Start

Describe your site goals and page inventory, and the Skill will output a full ASCII hierarchy and Mermaid sitemap.

Frequently Asked Questions about site-architecture

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

FAQPage Schema
How do I create a visual sitemap for website planning?▼

To create a visual sitemap for website planning, define your site goals and page inventory to generate a Mermaid visual sitemap. This output includes navigation zones and an ASCII hierarchy to improve overall findability and SEO.

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

The 3-click rule in site architecture is a usability guideline stating users should reach any page within three clicks. It is applied by flattening page structures and optimizing navigation schemas to ensure clear findability.

How do I generate a URL structure and navigation spec for a SaaS site?▼

To generate a URL structure and navigation spec for a SaaS site, input your page inventory and goals. The system outputs a complete URL map and navigation specification tailored to different site types like SaaS, content, or documentation.

Can I use an ASCII tree for design handoff and stakeholder review?▼

Yes, you can use an ASCII tree for design handoff and stakeholder review. It is generated alongside a Mermaid diagram to provide a clear, text-based page hierarchy that makes website structure communication straightforward.

What's the best way to plan internal linking within an information architecture?▼

The best way to plan internal linking within an information architecture is to use a dedicated blueprint. It defines optimal URL patterns and page hierarchies, flattening structures where possible to enhance SEO and user navigation.

Do I need a full page inventory before defining site architecture?▼

Yes, providing a page inventory is required before defining site architecture. Describing your site goals and existing pages allows the system to organize navigation, apply the 3-click rule, and generate accurate URL schemes.

Related Skills

Explore More Design & Creative Skills→
bongrealtybongrealty
2

site-architecture

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

Community
Intermediate
fluid-commercefluid-commerce

site-architecture

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

Official
Advanced
AlfxjxAlfxjx

my-design

Provide UI/UX design guidance for wireframing, prototyping, and visual design.

Community
Intermediate
cengo33cengo33

site-architecture

Design website page hierarchies, navigation, URL patterns, and internal linking.

Community
Advanced