Website Sitemap Generator

Generates website architecture with intelligent shadcn-ui-blocks component selection. Output: Markdown sitemap with copy-paste pnpm commands.

WORKFLOW

Triggered by: User request for website sitemap/architecture planning

References: .claude/docs/prompts/website-build/01-sitemap.md

Process

1. •

   Gather Requirements

   • •Business name, industry, target audience
   • •Goals and objectives
   • •Required pages (homepage, about, services, contact, etc.)
   • •Brand voice and values
2. •

   Delegate to sitemap-analyst Agent

   • •Agent model: sonnet (architecture/reasoning)
   • •Agent reads:
     • •.claude/skills/sitemap-pages/ → Page templates
     • •.claude/skills/shadcn-ui-blocks/docs/ → Block descriptions
   • •Agent matches sections to best-fit blocks (NOT sequential)
   • •Agent generates pnpm dlx shadcn add commands
3. •

   Output

   • •File: .claude/planning/[project]/sitemap.md
   • •Format: Markdown
   • •Contains:
     • •Page structure (routes, sections)
     • •Selected shadcn-ui-blocks with reasons
     • •Copy-paste ready pnpm commands
     • •Internal linking strategy
     • •User journeys

Example Sitemap Output

# Sitemap: Local Studios

## 1. Homepage (/)
**Template:** sitemap-pages/pages/homepage.md

### Sections

**Hero Section**
- Block: @shadcnblocks/hero-18
- Reason: Clean CTA with background video support
- Command: `pnpm dlx shadcn add @shadcnblocks/hero-18`

**Features Grid**
- Block: @shadcnblocks/feature-12
- Reason: Icon-based 3-column layout, perfect for services
- Command: `pnpm dlx shadcn add @shadcnblocks/feature-12`

Next Steps

After receiving sitemap.md, user should:

1. •

   Execute Commands

   • •Run each pnpm dlx shadcn add command
   • •Downloads shadcn-ui-blocks to project
2. •

   Manual Integration

   • •Insert downloaded blocks into page files
   • •Create global.css with theme/colors
3. •

   Optional Workflows (separate prompts):

   • •02-unsplash.md → Integrate stock images
   • •03-animation.md → Add mikroanimations
   • •04-seo.md → SEO optimization
   • •05-midjourney.md → Generate AI image prompts

Keywords to Trigger This Skill

Primary: sitemap, website architecture, page structure, website planning Secondary: site structure, information architecture, component selection, page planning

Integration Summary

Example Request Triggers

• •"Create a sitemap for my website"
• •"Plan website architecture"
• •"Generate page structure with component selections"
• •"Help me structure my site pages"
• •"Build a sitemap with shadcn blocks"

Output Artifact

User receives:

.claude/planning/[project]/sitemap.md containing:

• •Page hierarchy (routes, sections)
• •Selected shadcn-ui-blocks with reasons
• •Copy-paste ready pnpm dlx shadcn add commands
• •Internal linking strategy
• •User journey mapping

Note: This skill now focuses ONLY on sitemap generation. SEO, animations, and image integration are handled by separate optional workflow prompts.