site-architecture

Name: site-architecture
Author: coreyhaines31

bycoreyhaines31· 76 skills

Installs

84k

Stars

42k

Forks

6.6k

How to install site-architecture?

coreyhaines31/marketingskills/site-architecture

$npx -y skills add coreyhaines31/marketingskills --skill site-architecture

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/coreyhaines31/marketingskills" --skill "coreyhaines31/marketingskills/site-architecture"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/coreyhaines31/marketingskills" that are relevant to the current task. Run `npx skills add "https://github.com/coreyhaines31/marketingskills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Site Architecture
2
3	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.
4
5	## Before Planning
6
7	Check for product marketing context first:
8	If `.agents/product-marketing.md` exists (or `.claude/product-marketing.md`, or the legacy `product-marketing-context.md` filename, in older setups), read it before asking questions. Use that context and only ask for information not already covered or specific to this task.
9
10	Gather this context (ask if not provided):
11
12	### 1. Business Context
13	- What does the company do?
14	- Who are the primary audiences?
15	- What are the top 3 goals for the site? (conversions, SEO traffic, education, support)
16
17	### 2. Current State
18	- New site or restructuring an existing one?
19	- If restructuring: what's broken? (high bounce, poor SEO, users can't find things)
20	- Existing URLs that must be preserved (for redirects)?
21
22	### 3. Site Type
23	- SaaS marketing site
24	- Content/blog site
25	- E-commerce
26	- Documentation
27	- Hybrid (SaaS + content)
28	- Small business / local
29
30	### 4. Content Inventory
31	- How many pages exist or are planned?
32	- What are the most important pages? (by traffic, conversions, or business value)
33	- Any planned sections or expansions?
34
35	---
36
37	## Site Types and Starting Points
38
39	\| Site Type \| Typical Depth \| Key Sections \| URL Pattern \|
40	\|-----------\|--------------\|--------------\|-------------\|
41	\| SaaS marketing \| 2-3 levels \| Home, Features, Pricing, Blog, Docs \| `/features/name`, `/blog/slug` \|
42	\| Content/blog \| 2-3 levels \| Home, Blog, Categories, About \| `/blog/slug`, `/category/slug` \|
43	\| E-commerce \| 3-4 levels \| Home, Categories, Products, Cart \| `/category/subcategory/product` \|
44	\| Documentation \| 3-4 levels \| Home, Guides, API Reference \| `/docs/section/page` \|
45	\| Hybrid SaaS+content \| 3-4 levels \| Home, Product, Blog, Resources, Docs \| `/product/feature`, `/blog/slug` \|
46	\| Small business \| 1-2 levels \| Home, Services, About, Contact \| `/services/name` \|
47
48	For full page hierarchy templates: See [references/site-type-templates.md](references/site-type-templates.md)
49
50	---
51
52	## Page Hierarchy Design
53
54	### The 3-Click Rule
55
56	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.
57
58	### Flat vs Deep
59
60	\| Approach \| Best For \| Tradeoff \|
61	\|----------\|----------\|----------\|
62	\| Flat (2 levels) \| Small sites, portfolios \| Simple but doesn't scale \|
63	\| Moderate (3 levels) \| Most SaaS, content sites \| Good balance of depth and findability \|
64	\| Deep (4+ levels) \| E-commerce, large docs \| Scales but risks burying content \|
65
66	Rule of thumb: Go as flat as possible while keeping navigation clean. If a nav dropdown has 20+ items, add a level of hierarchy.
67
68	### Hierarchy Levels
69
70	\| Level \| What It Is \| Example \|
71	\|-------\|-----------\|---------\|
72	\| L0 \| Homepage \| `/` \|
73	\| L1 \| Primary sections \| `/features`, `/blog`, `/pricing` \|
74	\| L2 \| Section pages \| `/features/analytics`, `/blog/seo-guide` \|
75	\| L3+ \| Detail pages \| `/docs/api/authentication` \|
76
77	### ASCII Tree Format
78
79	Use this format for page hierarchies:
80
81	```
82	Homepage (/)
83	├── Features (/features)
84	│ ├── Analytics (/features/analytics)
85	│ ├── Automation (/features/automation)
86	│ └── Integrations (/features/integrations)
87	├── Pricing (/pricing)
88	├── Blog (/blog)
89	│ ├── [Category: SEO] (/blog/category/seo)
90	│ └── [Category: CRO] (/blog/category/cro)
91	├── Resources (/resources)
92	│ ├── Case Studies (/resources/case-studies)
93	│ └── Templates (/resources/templates)
94	├── Docs (/docs)
95	│ ├── Getting Started (/docs/getting-started)
96	│ └── API Reference (/docs/api)
97	├── About (/about)
98	│ └── Careers (/about/careers)
99	└── Contact (/contact)
100	```
101
102	When to use ASCII vs Mermaid:
103	- ASCII: quick hierarchy drafts, text-only contexts, simple structures
104	- Mermaid: visual presentations, complex relationships, showing nav zones or linking patterns
105
106	---
107
108	## Navigation Design
109
110	### Navigation Types
111
112	\| Nav Type \| Purpose \| Placement \|
113	\|----------\|---------\|-----------\|
114	\| Header nav \| Primary navigation, always visible \| Top of every page \|
115	\| Dropdown menus \| Organize sub-pages under parent \| Expands from header items \|
116	\| Footer nav \| Secondary links, legal, sitemap \| Bottom of every page \|
117	\| Sidebar nav \| Section navigation (docs, blog) \| Left side within a section \|
118	\| Breadcrumbs \| Show current location in hierarchy \| Below header, above content \|
119	\| Contextual links \| Related content, next steps \| Within page content \|
120
121	### Header Navigation Rules
122
123	- 4-7 items max in the primary nav (more causes decision paralysis)
124	- CTA button goes rightmost (e.g., "Start Free Trial," "Get Started")
125	- Logo links to homepage (left side)
126	- Order by priority: most important/visited pages first
127	- If you have a mega menu, limit to 3-4 columns
128
129	### Footer Organization
130
131	Group footer links into columns:
132	- Product: Features, Pricing, Integrations, Changelog
133	- Resources: Blog, Case Studies, Templates, Docs
134	- Company: About, Careers, Contact, Press
135	- Legal: Privacy, Terms, Security
136
137	### Breadcrumb Format
138
139	```
140	Home > Features > Analytics
141	Home > Blog > SEO Category > Post Title
142	```
143
144	Breadcrumbs should mirror the URL hierarchy. Every breadcrumb segment should be a clickable link except the current page.
145
146	For detailed navigation patterns: See [references/navigation-patterns.md](references/navigation-patterns.md)
147
148	---
149
150	## URL Structure
151
152	### Design Principles
153
154	1. Readable by humans — `/features/analytics` not `/f/a123`
155	2. Hyphens, not underscores — `/blog/seo-guide` not `/blog/seo_guide`
156	3. Reflect the hierarchy — URL path should match site structure
157	4. Consistent trailing slash policy — pick one (with or without) and enforce it
158	5. Lowercase always — `/About` should redirect to `/about`
159	6. Short but descriptive — `/blog/how-to-improve-landing-page-conversion-rates` is too long; `/blog/landing-page-conversions` is better
160
161	### URL Patterns by Page Type
162
163	\| Page Type \| Pattern \| Example \|
164	\|-----------\|---------\|---------\|
165	\| Homepage \| `/` \| `example.com` \|
166	\| Feature page \| `/features/{name}` \| `/features/analytics` \|
167	\| Pricing \| `/pricing` \| `/pricing` \|
168	\| Blog post \| `/blog/{slug}` \| `/blog/seo-guide` \|
169	\| Blog category \| `/blog/category/{slug}` \| `/blog/category/seo` \|
170	\| Case study \| `/customers/{slug}` \| `/customers/acme-corp` \|
171	\| Documentation \| `/docs/{section}/{page}` \| `/docs/api/authentication` \|
172	\| Legal \| `/{page}` \| `/privacy`, `/terms` \|
173	\| Landing page \| `/{slug}` or `/lp/{slug}` \| `/free-trial`, `/lp/webinar` \|
174	\| Comparison \| `/compare/{competitor}` or `/vs/{competitor}` \| `/compare/competitor-name` \|
175	\| Integration \| `/integrations/{name}` \| `/integrations/slack` \|
176	\| Template \| `/templates/{slug}` \| `/templates/marketing-plan` \|
177
178	### Common Mistakes
179
180	- Dates in blog URLs — `/blog/2024/01/15/post-title` adds no value and makes URLs long. Use `/blog/post-title`.
181	- Over-nesting — `/products/category/subcategory/item/detail` is too deep. Flatten where possible.
182	- Changing URLs without redirects — Every old URL needs a 301 redirect to its new URL. Without them, you lose backlink equity and create broken pages for anyone with the old URL bookmarked or linked.
183	- IDs in URLs — `/product/12345` is not human-readable. Use slugs.
184	- Query parameters for content — `/blog?id=123` should be `/blog/post-title`.
185	- Inconsistent patterns — Don't mix `/features/analytics` and `/product/automation`. Pick one parent.
186
187	### Breadcrumb-URL Alignment
188
189	The breadcrumb trail should mirror the URL path:
190
191	\| URL \| Breadcrumb \|
192	\|-----\|-----------\|
193	\| `/features/analytics` \| Home > Features > Analytics \|
194	\| `/blog/seo-guide` \| Home > Blog > SEO Guide \|
195	\| `/docs/api/auth` \| Home > Docs > API > Authentication \|
196
197	---
198
199	## Visual Sitemap Output (Mermaid)
200
201	Use Mermaid `graph TD` for visual sitemaps. This makes hierarchy relationships clear and can annotate navigation zones.
202
203	### Basic Hierarchy
204
205	```mermaid
206	graph TD
207	HOME[Homepage] --> FEAT[Features]
208	HOME --> PRICE[Pricing]
209	HOME --> BLOG[Blog]
210	HOME --> ABOUT[About]
211
212	FEAT --> F1[Analytics]
213	FEAT --> F2[Automation]
214	FEAT --> F3[Integrations]
215
216	BLOG --> B1[Post 1]
217	BLOG --> B2[Post 2]
218	```
219
220	### With Navigation Zones
221
222	```mermaid
223	graph TD
224	subgraph Header Nav
225	HOME[Homepage]
226	FEAT[Features]
227	PRICE[Pricing]
228	BLOG[Blog]
229	CTA[Get Started]
230	end
231
232	subgraph Footer Nav
233	ABOUT[About]
234	CAREERS[Careers]
235	CONTACT[Contact]
236	PRIVACY[Privacy]
237	end
238
239	HOME --> FEAT
240	HOME --> PRICE
241	HOME --> BLOG
242	HOME --> ABOUT
243
244	FEAT --> F1[Analytics]
245	FEAT --> F2[Automation]
246	```
247
248	For more Mermaid templates: See [references/mermaid-templates.md](references/mermaid-templates.md)
249
250	---
251
252	## Internal Linking Strategy
253
254	### Link Types
255
256	\| Type \| Purpose \| Example \|
257	\|------\|---------\|---------\|
258	\| Navigational \| Move between sections \| Header, footer, sidebar links \|
259	\| Contextual \| Related content within text \| "Learn more about [analytics](/features/analytics)" \|
260	\| Hub-and-spoke \| Connect cluster content to hub \| Blog posts linking to pillar page \|
261	\| Cross-section \| Connect related pages across sections \| Feature page linking to related case study \|
262
263	### Internal Linking Rules
264
265	1. No orphan pages — every page must have at least one internal link pointing to it
266	2. Descriptive anchor text — "our analytics features" not "click here"
267	3. 5-10 internal links per 1000 words of content (approximate guideline)
268	4. Link to important pages more often — homepage, key feature pages, pricing
269	5. Use breadcrumbs — free internal links on every page
270	6. Related content sections — "Related Posts" or "You might also like" at page bottom
271
272	### Hub-and-Spoke Model
273
274	For content-heavy sites, organize around hub pages:
275
276	```
277	Hub: /blog/seo-guide (comprehensive overview)
278	├── Spoke: /blog/keyword-research (links back to hub)
279	├── Spoke: /blog/on-page-seo (links back to hub)
280	├── Spoke: /blog/technical-seo (links back to hub)
281	└── Spoke: /blog/link-building (links back to hub)
282	```
283
284	Each spoke links back to the hub. The hub links to all spokes. Spokes link to each other where relevant.
285
286	### Link Audit Checklist
287
288	- [ ] Every page has at least one inbound internal link
289	- [ ] No broken internal links (404s)
290	- [ ] Anchor text is descriptive (not "click here" or "read more")
291	- [ ] Important pages have the most inbound internal links
292	- [ ] Breadcrumbs are implemented on all pages
293	- [ ] Related content links exist on blog posts
294	- [ ] Cross-section links connect features to case studies, blog to product pages
295
296	---
297
298	## Output Format
299
300	When creating a site architecture plan, provide these deliverables:
301
302	### 1. Page Hierarchy (ASCII Tree)
303	Full site structure with URLs at each node. Use the ASCII tree format from the Page Hierarchy Design section.
304
305	### 2. Visual Sitemap (Mermaid)
306	Mermaid diagram showing page relationships and navigation zones. Use `graph TD` with subgraphs for nav zones where helpful.
307
308	### 3. URL Map Table
309
310	\| Page \| URL \| Parent \| Nav Location \| Priority \|
311	\|------\|-----\|--------\|-------------\|----------\|
312	\| Homepage \| `/` \| — \| Header \| High \|
313	\| Features \| `/features` \| Homepage \| Header \| High \|
314	\| Analytics \| `/features/analytics` \| Features \| Header dropdown \| Medium \|
315	\| Pricing \| `/pricing` \| Homepage \| Header \| High \|
316	\| Blog \| `/blog` \| Homepage \| Header \| Medium \|
317
318	### 4. Navigation Spec
319	- Header nav items (ordered, with CTA)
320	- Footer sections and links
321	- Sidebar nav (if applicable)
322	- Breadcrumb implementation notes
323
324	### 5. Internal Linking Plan
325	- Hub pages and their spokes
326	- Cross-section link opportunities
327	- Orphan page audit (if restructuring)
328	- Recommended links per key page
329
330	---
331
332	## Task-Specific Questions
333
334	1. Is this a new site or are you restructuring an existing one?
335	2. What type of site is it? (SaaS, content, e-commerce, docs, hybrid, small business)
336	3. How many pages exist or are planned?
337	4. What are the 5 most important pages on the site?
338	5. Are there existing URLs that need to be preserved or redirected?
339	6. Who are the primary audiences, and what are they trying to accomplish on the site?
340
341	---
342
343	## Related Skills
344
345	- content-strategy: For planning what content to create and topic clusters
346	- programmatic-seo: For building SEO pages at scale with templates and data
347	- seo-audit: For technical SEO, on-page optimization, and indexation issues
348	- cro: For optimizing individual pages for conversion
349	- schema: For implementing breadcrumb and site navigation structured data
350	- competitors: For comparison page frameworks and URL patterns

6 picks

Type

Run `npx skills use "https://github.com/coreyhaines31/marketingskills" --skill "coreyhaines31/marketingskills/site-architecture"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/coreyhaines31/marketingskills" that are relevant to the current task. Run `npx skills add "https://github.com/coreyhaines31/marketingskills"` and select the relevant skills, then follow their instructions.

site-architecture

How to install site-architecture?

Related

site-architecture

How to install site-architecture?

Related