$npx -y skills add norahe0304-art/30x-seo --skill 30x-seo-architectureWebsite architecture planning: page hierarchy, navigation, URL structure, internal linking strategy. Use when user says "site structure", "page hierarchy", "URL structure", "navigation design", or "information architecture". NOT for XML sitemaps (use seo-sitemap).
| 1 | # Site Architecture |
| 2 | |
| 3 | [PROTOCOL]: Update this header on changes, then check CLAUDE.md |
| 4 | |
| 5 | 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. |
| 6 | |
| 7 | ## Before Planning |
| 8 | |
| 9 | **Check for product marketing context first:** |
| 10 | 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. |
| 11 | |
| 12 | Gather this context (ask if not provided): |
| 13 | |
| 14 | ### 1. Business Context |
| 15 | - What does the company do? |
| 16 | - Who are the primary audiences? |
| 17 | - What are the top 3 goals for the site? (conversions, SEO traffic, education, support) |
| 18 | |
| 19 | ### 2. Current State |
| 20 | - New site or restructuring an existing one? |
| 21 | - If restructuring: what's broken? (high bounce, poor SEO, users can't find things) |
| 22 | - Existing URLs that must be preserved (for redirects)? |
| 23 | |
| 24 | ### 3. Site Type |
| 25 | - SaaS marketing site |
| 26 | - Content/blog site |
| 27 | - E-commerce |
| 28 | - Documentation |
| 29 | - Hybrid (SaaS + content) |
| 30 | - Small business / local |
| 31 | |
| 32 | ### 4. Content Inventory |
| 33 | - How many pages exist or are planned? |
| 34 | - What are the most important pages? (by traffic, conversions, or business value) |
| 35 | - Any planned sections or expansions? |
| 36 | |
| 37 | --- |
| 38 | |
| 39 | ## Site Types and Starting Points |
| 40 | |
| 41 | | Site Type | Typical Depth | Key Sections | URL Pattern | |
| 42 | |-----------|--------------|--------------|-------------| |
| 43 | | SaaS marketing | 2-3 levels | Home, Features, Pricing, Blog, Docs | `/features/name`, `/blog/slug` | |
| 44 | | Content/blog | 2-3 levels | Home, Blog, Categories, About | `/blog/slug`, `/category/slug` | |
| 45 | | E-commerce | 3-4 levels | Home, Categories, Products, Cart | `/category/subcategory/product` | |
| 46 | | Documentation | 3-4 levels | Home, Guides, API Reference | `/docs/section/page` | |
| 47 | | Hybrid SaaS+content | 3-4 levels | Home, Product, Blog, Resources, Docs | `/product/feature`, `/blog/slug` | |
| 48 | | Small business | 1-2 levels | Home, Services, About, Contact | `/services/name` | |
| 49 | |
| 50 | **For full page hierarchy templates**: See [references/site-type-templates.md](references/site-type-templates.md) |
| 51 | |
| 52 | --- |
| 53 | |
| 54 | ## Page Hierarchy Design |
| 55 | |
| 56 | ### The 3-Click Rule |
| 57 | |
| 58 | 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. |
| 59 | |
| 60 | ### Flat vs Deep |
| 61 | |
| 62 | | Approach | Best For | Tradeoff | |
| 63 | |----------|----------|----------| |
| 64 | | Flat (2 levels) | Small sites, portfolios | Simple but doesn't scale | |
| 65 | | Moderate (3 levels) | Most SaaS, content sites | Good balance of depth and findability | |
| 66 | | Deep (4+ levels) | E-commerce, large docs | Scales but risks burying content | |
| 67 | |
| 68 | **Rule of thumb**: Go as flat as possible while keeping navigation clean. If a nav dropdown has 20+ items, add a level of hierarchy. |
| 69 | |
| 70 | ### Hierarchy Levels |
| 71 | |
| 72 | | Level | What It Is | Example | |
| 73 | |-------|-----------|---------| |
| 74 | | L0 | Homepage | `/` | |
| 75 | | L1 | Primary sections | `/features`, `/blog`, `/pricing` | |
| 76 | | L2 | Section pages | `/features/analytics`, `/blog/seo-guide` | |
| 77 | | L3+ | Detail pages | `/docs/api/authentication` | |
| 78 | |
| 79 | ### ASCII Tree Format |
| 80 | |
| 81 | Use this format for page hierarchies: |
| 82 | |
| 83 | ``` |
| 84 | Homepage (/) |
| 85 | ├── Features (/features) |
| 86 | │ ├── Analytics (/features/analytics) |
| 87 | │ ├── Automation (/features/automation) |
| 88 | │ └── Integrations (/features/integrations) |
| 89 | ├── Pricing (/pricing) |
| 90 | ├── Blog (/blog) |
| 91 | │ ├── [Category: SEO] (/blog/category/seo) |
| 92 | │ └── [Category: CRO] (/blog/category/cro) |
| 93 | ├── Resources (/resources) |
| 94 | │ ├── Case Studies (/resources/case-studies) |
| 95 | │ └── Templates (/resources/templates) |
| 96 | ├── Docs (/docs) |
| 97 | │ ├── Getting Started (/docs/getting-started) |
| 98 | │ └── API Reference (/docs/api) |
| 99 | ├── About (/about) |
| 100 | │ └── Careers (/about/careers) |
| 101 | └── Contact (/contact) |
| 102 | ``` |
| 103 | |
| 104 | **When to use ASCII vs Mermaid**: |
| 105 | - ASCII: quick hierarchy drafts, text-only contexts, simple structures |
| 106 | - Mermaid: visual presentations, complex relationships, showing nav zones or linking patterns |
| 107 | |
| 108 | --- |
| 109 | |
| 110 | ## Navigation Design |
| 111 | |
| 112 | ### Navigation Types |
| 113 | |
| 114 | | Nav Type | Purpose | Placement | |
| 115 | |----------|---------|-----------| |
| 116 | | Header nav | Primary navigation, always visible | Top of every page | |
| 117 | | Dropdown menus | Organize sub-pages under parent | Expands from header items | |
| 118 | | Footer nav | Secondary links, legal, sitemap | Bottom of every page | |
| 119 | | Sidebar nav | Section navigation (docs, blog) | Left side within a section | |
| 120 | | Breadcrumbs | Show current location in hierarchy | Below header, above content | |
| 121 | | Contextual links | Related content, next steps | Within page content | |
| 122 | |
| 123 | ### Header Navig |