website-builder

name	website-builder
description	Website sitemap generation workflow. Analyzes requirements, delegates to sitemap-analyst agent, generates sitemap with shadcn-ui-blocks component selections. Use when planning website architecture, structuring pages, selecting components, or requesting sitemap/page structure planning.
version	2.0.0
dependencies	sitemap-analyst agent, shadcn-ui-blocks skill, sitemap-pages skill
allowed-tools	Read

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

Component	Purpose
sitemap-analyst	Generates sitemap with block selections (Model: sonnet)
sitemap-pages	Provides page templates/structures
shadcn-ui-blocks	929 pre-built components library

---

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.