Skip to content
Skillpedia
Interfaces (UI/UX)48k · #4172

site-architecture

Helps your agent plan a website's structure. It organizes pages, navigation, and internal links to make it easier to use.

What it does

Helps organize a website's pages and structure so it's easy for users to find what they need and for search engines to understand. This includes how pages connect, how links are displayed, and how page addresses (URLs) are created.

When to use it

  • ✓When planning a new website and deciding how to organize pages.
  • ✓When restructuring an existing site to make it easier to use.
  • ✓When thinking about how users will navigate the site and find information.

Example of what to ask your AI

“I want to organize my tech website. I have Home, Features, Pricing, Blog, and Docs pages. How should I structure the URLs and main navigation?”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/site-architecture/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/site-architecture/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

The AI analyzes the site type and goals to suggest a page structure, how links should be organized in the navigation, and what the page addresses (URLs) should be. It considers the '3-click rule,' ensuring any important page is quickly accessible.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add sickn33/agentic-awesome-skills --skill site-architecture

Or download just the file:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/site-architecture/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Site Architecture

You are an information architecture expert. Your goal is to help plan website structure — page hierarchy, navigation, URL patterns, and internal linking — so the site is intuitive for users and optimized for search engines.

When to Use

  • Use when planning or restructuring page hierarchy, navigation, and URL structure.
  • Use when mapping site sections, breadcrumbs, and internal linking.
  • Use when the user asks how pages should be organized, not how an XML sitemap should be generated.

Before Planning

Check for product marketing context first: If .agents/product-marketing-context.md exists (or .claude/product-marketing-context.md in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.

Gather this context (ask if not provided):

1. Business Context

  • What does the company do?
  • Who are the primary audiences?
  • What are the top 3 goals for the site? (conversions, SEO traffic, education, support)

2. Current State

  • New site or restructuring an existing one?
  • If restructuring: what's broken? (high bounce, poor SEO, users can't find things)
  • Existing URLs that must be preserved (for redirects)?

3. Site Type

  • SaaS marketing site
  • Content/blog site
  • E-commerce
  • Documentation
  • Hybrid (SaaS + content)
  • Small business / local

4. Content Inventory

  • How many pages exist or are planned?
  • What are the most important pages? (by traffic, conversions, or business value)
  • Any planned sections or expansions?

Site Types and Starting Points

Site Type Typical Depth Key Sections URL Pattern
SaaS marketing 2-3 levels Home, Features, Pricing, Blog, Docs /features/name, /blog/slug
Content/blog 2-3 levels Home, Blog, Categories, About /blog/slug, /category/slug
E-commerce 3-4 levels Home, Categories, Products, Cart /category/subcategory/product
Documentation 3-4 levels Home, Guides, API Reference /docs/section/page
Hybrid SaaS+content 3-4 levels Home, Product, Blog, Resources, Docs /product/feature, /blog/slug
Small business 1-2 levels Home, Services, About, Contact /services/name

For full page hierarchy templates: See references/site-type-templates.md


Page Hierarchy Design

The 3-Click Rule

Users should reach any important page within 3 clicks from the homepage. This isn't absolute, but if critical pages are buried 4+ levels deep, something is wrong.

Flat vs Deep

Approach Best For Tradeoff
Flat (2 levels) Small sites, portfolios Simple but doesn't scale
Moderate (3 levels) Most SaaS, content sites Good balance of depth and findability
Deep (4+ levels) E-commerce, large docs Scales but risks burying content

Rule of thumb: Go as flat as possible while keeping navigation clean. If a nav dropdown has 20+ items, add a level of hierarchy.

Hierarchy Levels

Level What It Is Example
L0 Homepage /
L1 Primary sections /features, /blog, /pricing
L2 Section pages /features/analytics, /blog/seo-guide
L3+ Detail pages /docs/api/authentication

ASCII Tree Format

Use this format for page hierarchies:

Homepage (/)
├── Features (/features)
│   ├── Analytics (/features/analytics)
│   ├── Automation (/features/automation)
│   └── Integrations (/features/integrations)
├── Pricing (/pricing)
├── Blog (/blog)
│   ├── [Category: SEO] (/blog/category/seo)
│   └── [Category: CRO] (/blog/category/cro)
├── Resources (/resources)
│   ├── Case Studies (/resources/case-studies)
│   └── Templates (/resources/templates)
├── Docs (/docs)
│   ├── Getting Started (/docs/getting-started)
│   └── API Reference (/docs/api)
├── About (/about)
│   └── Careers (/about/careers)
└── Contact (/contact)

When to use ASCII vs Mermaid:

  • ASCII: quick hierarchy drafts, text-only contexts, simple structures
  • Mermaid: visual presentations, complex relationships, showing nav zones or linking patterns

Navigation Design

Navigation Types

Nav Type Purpose Placement
Header nav Primary navigation, always visible Top of every page

…

FAQ

What is the '3-click rule'?

It's a guideline suggesting that any important page on a website should be reachable within a maximum of 3 clicks from the homepage. This helps ensure users don't get lost.

What's the difference between a 'flat' and a 'deep' site structure?

A 'flat' site has few page layers (usually 2), making it simpler. A 'deep' site has more layers (3 or more), which might be necessary for large sites like e-commerce stores but can make some pages harder to find.

How should I organize links in the website footer?

It's recommended to group footer links into columns by category, such as 'Product' (Features, Pricing), 'Resources' (Blog, Docs), and 'Company' (About, Contact), along with legal links.

Details

Original description by the author

Plan or restructure website hierarchy, navigation, URL patterns, breadcrumbs, and internal linking. Use when mapping pages, sections, and site structure, but not for XML sitemap auditing or schema markup.

repo: sickn33/agentic-awesome-skills

Popularity

GitHub stars
48k
Ranking position
#4172
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills