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
Ready-to-paste message
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-architectureOr 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.mdTechnical 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.
Popularity
- GitHub stars
- 48k
- Ranking position
- #4172
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC