Website Builder

SEO-Optimized Website Builder

Orchestrates complete website creation workflow: SEO analysis → sitemap planning → component selection → theme application → SEO integration → verification.

5-Step Workflow

Step 1: SEO Analysis

Create SEO research foundation (if nothing specified by user):

1. Create /planning/seo/ directory
2. Analyze target website (if provided via WebFetch):
   • Extract current SEO metadata
   • Identify primary/secondary keywords
   • Analyze page structure, headings, content
3. Create /planning/seo/analysis.md:
   • Current state assessment
   • SEO audit findings
   • Key opportunities
4. Create /planning/seo/keywords.md:
   • Primary keywords (search volume, difficulty)
   • Secondary keywords
   • Long-tail variations
   • Keyword mapping to pages
5. Create /planning/seo/competitors.md:
   • Top 3-5 competitors
   • Their keyword focus
   • Content gaps you can fill
   • Unique positioning strategy

Use WebFetch when user provides target URL:

Fetch: <user-provided-url>
Prompt: "Extract SEO metadata, primary keywords, page structure, content themes"

Step 2: Sitemap Creation

Delegate to sitemap-analyst agent:

Call sitemap-analyst with:

• Business goals (from user or inferred)
• Target audience personas
• Primary conversion objectives
• Use only sections from shadcn-ui-blocks skill
• Constraints/preferences

Agent outputs /planning/sitemap.yaml with:

• Page hierarchy (path, title, priority)
• Purpose & SEO focus per page
• CMS collections (if applicable)
• Internal linking strategy
• User journey mapping

Example invocation:

Use sitemap-analyst agent:
Context: [Business goals, audience, conversion targets]
Output destination: /planning/sitemap.yaml

Step 3: Website Build

Select & configure components:

IMPORTANT: The sitemap-analyst from Step 2 decides the pages and structure. You only implement the design and SEO aspects here.

1. Review sitemap structure

2. For each page type, use shadcn-ui-blocks skill:

   • Homepage → hero1-50 + feature + pricing/cta
   • Feature pages → feature1-266 (largest category)
   • Pricing → pricing1-35
   • Testimonials → testimonial1-28
   • FAQ → faq1-16
   • Blog → blog1-22 + blogpost1-6
   • Contact → contact1-17
   • Footer → footer1-21
   • Navigation → navbar1-16

3. Use shadcn-ui-theme skill:

   • Select theme matching brand
   • Apply CSS variables
   • Test light/dark modes
   • Verify accessibility

4. Coordinate with shadcn-website-builder agent:

   • Provide sitemap + component selections
   • Get built pages with responsive layouts
   • Review and refine

Step 4: SEO Integration

Optimize for search engines:

1. Meta Tags:

   • Title (50-60 chars): Primary keyword + brand
   • Description (150-160 chars): Call-to-action + benefit
   • Canonical URLs (prevent duplicates)
   • Open Graph (social sharing)

2. Structured Data:

   • JSON-LD Schema.org markup
   • Organization schema (homepage)
   • BreadcrumbList (navigation)
   • Product schema (if applicable)
   • FAQPage schema (FAQ sections)

3. Content Optimization:

   • H1: Single, primary keyword
   • H2-H4: Secondary keywords, natural flow
   • Image alt text: Descriptive, keyword-relevant
   • Internal links: Anchor text with keywords
   • Meta descriptions: Unique per page

4. Performance Optimization:

   • Core Web Vitals (LCP, FID, CLS)
   • Image optimization (next/image component)
   • CSS/JS minification
   • Mobile responsiveness verification
   • Page speed analysis

5. Technical SEO:

   • XML sitemap: /sitemap.xml list of all pages
   • robots.txt: Control crawler access
   • Canonical tags: Prevent duplicate content
   • Mobile-first indexing: Responsive design
   • No broken links (404 audit)

Step 5: Verification

Test implementation:

1. Page Testing:

   • Load all pages in browser
   • Verify responsive on mobile/tablet/desktop
   • Check navigation, links, forms work
   • Validate HTML (W3C validator)

2. SEO Verification:

   • Meta tags present and unique (view source)
   • Structured data valid (schema.org validator)
   • Robots.txt accessible
   • Sitemap.xml valid XML
   • Page titles/descriptions follow best practices

3. Performance Check:

   • Google PageSpeed Insights score
   • Core Web Vitals status
   • Mobile usability test
   • Accessibility audit (WCAG 2.1 AA)

4. Content Audit:

   • Keyword presence verified (tool or manual)
   • H1-H6 hierarchy correct
   • Image alt text present
   • Internal links functioning
   • CTA buttons visible and clickable

SEO Best Practices

Meta Tags

<head>
  <title>Primary Keyword | Brand (50-60 chars)</title>
  <meta name="description" content="Action-oriented description with secondary keyword (150-160 chars)">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="canonical" href="https://example.com/page">
  <meta property="og:title" content="Social title">
  <meta property="og:description" content="Social description">
  <meta property="og:image" content="Social image URL">
</head>

Structured Data (JSON-LD)

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Brand Name",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png",
  "sameAs": [
    "https://twitter.com/brand",
    "https://linkedin.com/company/brand"
  ]
}

Content Structure

• H1: One per page, primary keyword
• H2-H4: Secondary keywords, logical hierarchy
• Paragraphs: 2-4 sentences, natural keyword integration
• Images: Descriptive alt text, WebP format, lazy loading
• Internal Links: 3-5 contextually relevant per page

Core Web Vitals Targets

• Largest Contentful Paint (LCP): < 2.5 seconds
• First Input Delay (FID): < 100ms (or Interaction to Next Paint INP < 200ms)
• Cumulative Layout Shift (CLS): < 0.1

Mobile SEO

• Responsive design (no fixed widths)
• Touch-friendly buttons (44x44px minimum)
• Readable font size (16px base minimum)
• Avoid intrusive interstitials
• Fast mobile page load

Keywords to Trigger This Skill

Primary: website, SEO, landing page, web design, sitemap, homepage, site builder, web development Secondary: website creation, website build, web page design, search optimization, site structure, information architecture, web layout, digital presence

Integration Summary

Example Request Triggers

• "Build me a website with SEO"
• "Create a landing page optimized for search"
• "Design a website for my SaaS product"
• "Help me structure my site for better rankings"
• "Build a homepage that converts and ranks"
• "Create a website with proper site architecture"
• "Design a landing page with sitemap planning"

Output Artifacts

After workflow completion, user receives:

1. /planning/seo/analysis.md - SEO research summary
2. /planning/seo/keywords.md - Keyword strategy & targeting
3. /planning/seo/competitors.md - Competitive analysis
4. /planning/sitemap.yaml - Site structure (YAML format)
5. Website code with:
   • Responsive shadcn components
   • Applied theme
   • Optimized meta tags
   • Structured data
   • Performance-tuned images
   • Internal linking strategy

Note: This is an orchestrating skill. It delegates analysis to sitemap-analyst and building to shadcn-website-builder + component skills. Your role is coordinating the workflow, not implementing every step directly.