skills.rest
fluid-commerce
fluid-commerceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

site-architecture

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

Updated Mar 12, 2026
Search Tags:#mermaid#sitemap#ia#information-architecture#site-architecture#navigation-design#url-structure
One-click install
npx skills add https://github.com/fluid-commerce/DesignOS --skill site-architecture-fluid-commerce
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: site-architecture
Source: https://github.com/fluid-commerce/DesignOS/tree/main/skills/marketing/site-architecture
Command: npx skills add https://github.com/fluid-commerce/DesignOS --skill site-architecture-fluid-commerce

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plan and optimize website information architecture to help users navigate intuitively, improve findability, and support scalable growth.

Core Features & Use Cases

  • Define page hierarchy, navigation schemes, and URL patterns for any site type.
  • Generate ASCII tree hierarchies and Mermaid visual sitemaps to communicate structure to designers and developers.
  • Produce an internal linking plan and navigation spec that support the 3-click rule and flat vs. deep hierarchy decisions.

Quick Start

Provide a proposed site structure outline for a given website brief.

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 website information architecture and visualize the page hierarchy?▼

Plan website information architecture by defining page hierarchy, navigation schemes, and URL patterns, then generate ASCII tree hierarchies and Mermaid visual sitemaps to clearly communicate structure to design and development teams.

What is the best way to generate a URL map and navigation spec for a scalable site?▼

Generate a URL map and navigation spec by defining URL patterns and internal linking plans that support the 3-click rule, ensuring your site architecture balances flat versus deep hierarchy decisions for scalable growth.

How does a Mermaid sitemap diagram help with site architecture planning?▼

A Mermaid sitemap diagram visualizes page hierarchy and navigation relationships at a glance, translating complex site architecture decisions into clear, readable diagrams for designers and developers to implement.

Can I use this to create an internal linking plan that follows the 3-click rule?▼

Yes, you can create an internal linking plan that follows the 3-click rule by mapping navigation schemes and page hierarchy, ensuring users can reach any page within three clicks from the homepage.

When do I need to choose between a flat versus deep hierarchy for my site structure?▼

Choose between flat versus deep hierarchy when planning site architecture to balance findability and scalable growth, applying the 3-click rule to optimize how users navigate and discover content across the website.

Related Skills

Explore More Design & Creative Skills→
shenxingyshenxingy
8

seo-content-brief

Generate competitive SEO content briefs with word counts and keyword placement rules.

Community
Advanced
omeragaakbasomeragaakbas

site-architecture

Plan website hierarchies, navigation, URL structures, and internal linking.

Community
Intermediate
Imd11Imd11
5

site-architecture

Plan and document website architectures with ASCII trees, Mermaid diagrams, and URL maps.

Community
Advanced
mvillmowmvillmow
18

agent-hierarchy-diagram

Generate ASCII, Mermaid, and GraphML diagrams of agent hierarchy and delegation.

Community
Basic