Website Builder Patterns

Website Builder Patterns Skill

How to Use This Skill

1. Review the patterns and templates below
2. Select the appropriate site type (docs, product, landing)
3. Follow the implementation guide for your chosen type
4. Use the deployment patterns for GCP deployment

When to Use

Use this skill when:

• Creating new CODITECT product sites (dms.coditect.ai, workflow.coditect.ai)
• Building documentation portals (docs.coditect.ai)
• Creating landing pages for new products
• Implementing consistent branding across CODITECT sites

Site Type Patterns

Pattern 1: Documentation Site

Use Case: Technical documentation, user guides, API reference

docs-site/
├── src/
│   ├── components/
│   │   ├── DocLayout.tsx       # Main documentation layout
│   │   ├── Sidebar.tsx         # Navigation sidebar
│   │   ├── TOC.tsx             # Table of contents
│   │   ├── CodeBlock.tsx       # Syntax highlighted code
│   │   └── SearchBar.tsx       # Documentation search
│   ├── pages/
│   │   ├── index.tsx           # Docs home
│   │   └── [[...slug]].tsx     # Dynamic doc pages
│   └── lib/
│       ├── mdx.ts              # MDX processing
│       └── navigation.ts       # Nav generation
├── content/
│   ├── getting-started/
│   │   ├── index.mdx
│   │   └── first-project.mdx
│   ├── guides/
│   ├── reference/
│   └── api/
├── public/
│   ├── favicon.ico
│   └── og-image.png
├── tailwind.config.js
├── Dockerfile
└── cloudbuild.yaml

Pattern 2: Product Landing Site

Use Case: Product-specific marketing and features

product-site/
├── src/
│   ├── components/
│   │   ├── Hero.tsx            # Hero section
│   │   ├── Features.tsx        # Feature grid
│   │   ├── Pricing.tsx         # Pricing cards
│   │   ├── Testimonials.tsx    # Customer quotes
│   │   └── CTA.tsx             # Call-to-action
│   ├── pages/
│   │   ├── index.tsx           # Landing page
│   │   ├── features.tsx        # Features page
│   │   ├── pricing.tsx         # Pricing page
│   │   └── contact.tsx         # Contact form
│   └── data/
│       ├── features.json
│       └── pricing.json
├── public/
│   ├── images/
│   └── videos/
├── Dockerfile
└── cloudbuild.yaml

Pattern 3: Multi-Page Static Site

Use Case: Company pages, legal, about

static-site/
├── src/
│   ├── components/
│   │   ├── Layout.tsx
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── templates/
│   │       ├── PageHeader.tsx
│   │       ├── StaticPageLayout.tsx
│   │       └── LegalPageLayout.tsx
│   └── pages/
│       ├── about.tsx
│       ├── privacy.tsx
│       ├── terms.tsx
│       └── security.tsx
├── Dockerfile
└── cloudbuild.yaml

Reusable Template Components

PageHeader Component

// src/components/templates/PageHeader.tsx
interface PageHeaderProps {
  title: string;
  subtitle?: string;
  badge?: string;
  badgeColor?: 'primary' | 'secondary' | 'success' | 'warning';
}

export function PageHeader({ title, subtitle, badge, badgeColor = 'primary' }: PageHeaderProps) {
  const badgeColors = {
    primary: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200',
    secondary: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
    success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
    warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
  };

  return (
    <div className="text-center mb-12">
      {badge && (
        <span className={`inline-block px-3 py-1 rounded-full text-sm font-medium mb-4 ${badgeColors[badgeColor]}`}>
          {badge}
        </span>
      )}
      <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
        {title}
      </h1>
      {subtitle && (
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
          {subtitle}
        </p>
      )}
    </div>
  );
}

ProductLandingLayout Component

// src/components/templates/ProductLandingLayout.tsx
interface ProductLandingLayoutProps {
  product: {
    name: string;
    tagline: string;
    description: string;
    features: Feature[];
    pricing: PricingTier[];
    ctaText: string;
    ctaLink: string;
  };
  children?: React.ReactNode;
}

export function ProductLandingLayout({ product, children }: ProductLandingLayoutProps) {
  return (
    <div className="min-h-screen bg-white dark:bg-gray-900">
      {/* Hero */}
      <section className="py-20 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <h1 className="text-5xl font-bold mb-6 text-gray-900 dark:text-white">
            {product.name}
          </h1>
          <p className="text-2xl text-gray-600 dark:text-gray-400 mb-8">
            {product.tagline}
          </p>
          <a
            href={product.ctaLink}
            className="btn-primary text-lg px-8 py-3"
          >
            {product.ctaText}
          </a>
        </div>
      </section>

      {/* Features */}
      <section className="py-16 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-6xl mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Features</h2>
          <div className="grid md:grid-cols-3 gap-8">
            {product.features.map((feature, i) => (
              <FeatureCard key={i} {...feature} />
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section className="py-16">
        <div className="max-w-6xl mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Pricing</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {product.pricing.map((tier, i) => (
              <PricingCard key={i} {...tier} />
            ))}
          </div>
        </div>
      </section>

      {children}
    </div>
  );
}

Deployment Patterns

Cloud Run Deployment

# cloudbuild.yaml
steps:
  # Build the container
  - name: 'gcr.io/cloud-builders/docker'
    args: ['build', '-t', 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}:$COMMIT_SHA', '.']

  # Push to Container Registry
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}:$COMMIT_SHA']

  # Deploy to Cloud Run
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: gcloud
    args:
      - 'run'
      - 'deploy'
      - '${_SERVICE_NAME}'
      - '--image'
      - 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}:$COMMIT_SHA'
      - '--region'
      - 'us-central1'
      - '--allow-unauthenticated'
      - '--memory'
      - '256Mi'
      - '--cpu'
      - '1'

substitutions:
  _SERVICE_NAME: 'docs-coditect'

images:
  - 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}:$COMMIT_SHA'

Dockerfile for Static Sites

# Dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

Nginx Configuration

# nginx.conf
server {
    listen 8080;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;

    # SPA fallback
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
}

DNS and SSL Configuration

DNS Setup (Cloud DNS)

# Create DNS zone (if not exists)
gcloud dns managed-zones create coditect-ai \
  --dns-name="coditect.ai." \
  --description="CODITECT DNS zone"

# Add A record for docs subdomain
gcloud dns record-sets create docs.coditect.ai. \
  --zone="coditect-ai" \
  --type="A" \
  --ttl="300" \
  --rrdatas="CLOUD_RUN_IP"

# Or CNAME for Cloud Run
gcloud dns record-sets create docs.coditect.ai. \
  --zone="coditect-ai" \
  --type="CNAME" \
  --ttl="300" \
  --rrdatas="docs-coditect-xxxxx-uc.a.run.app."

SSL Certificate (Managed)

# Cloud Run handles SSL automatically
# For custom domains, map the domain:
gcloud run domain-mappings create \
  --service docs-coditect \
  --domain docs.coditect.ai \
  --region us-central1

Quality Checklist

Pre-Deployment

• All pages render without console errors
• Dark mode toggle works
• Mobile responsive (test at 320px, 768px, 1024px)
• Lighthouse score > 90 for Performance, Accessibility, SEO
• All internal links work
• External links open in new tab
• Images have alt text
• Favicon and og:image configured

Post-Deployment

• SSL certificate valid
• DNS resolves correctly
• No CORS errors
• Analytics tracking active
• Error monitoring configured
• CDN caching verified

Success Output

When this skill completes successfully, you should see:

✅ SKILL COMPLETE: website-builder-patterns

Completed:
- [x] Site type selected and structure created
- [x] Reusable components implemented
- [x] Tailwind CSS configured with CODITECT branding
- [x] Dockerfile and nginx.conf created
- [x] cloudbuild.yaml deployed to GCP
- [x] DNS and SSL configured
- [x] Pre-deployment quality checks passed
- [x] Site deployed and verified

Outputs:
- src/ - React/Vite site structure
- Dockerfile - Multi-stage build configuration
- nginx.conf - Production web server config
- cloudbuild.yaml - GCP deployment pipeline
- public/ - Static assets with favicon and og-image

Site URL: https://[subdomain].coditect.ai
Lighthouse Score: 90+ (Performance, Accessibility, SEO)

Completion Checklist

Before marking this skill as complete, verify:

• Site structure matches pattern (docs/product/static)
• All pages render without console errors
• Dark mode toggle works correctly
• Mobile responsive at 320px, 768px, 1024px breakpoints
• Lighthouse score >90 for Performance, Accessibility, SEO
• All internal links work
• External links open in new tab with rel="noopener"
• Images have alt text
• Favicon and og:image configured
• Dockerfile builds successfully: docker build -t test .
• nginx.conf tested locally
• cloudbuild.yaml syntax valid
• SSL certificate active and valid
• DNS resolves correctly: dig [subdomain].coditect.ai
• No CORS errors in production
• Analytics tracking configured (if required)
• CDN caching headers verified

Failure Indicators

This skill has FAILED if:

• ❌ Site structure doesn't match selected pattern type
• ❌ Console errors on any page
• ❌ Dark mode not implemented or broken
• ❌ Mobile layout breaks at standard breakpoints
• ❌ Lighthouse score <80 on any metric
• ❌ Broken internal links or 404 errors
• ❌ Dockerfile build fails
• ❌ Cloud Run deployment errors
• ❌ SSL certificate invalid or missing
• ❌ DNS doesn't resolve after 24 hours
• ❌ CORS errors blocking functionality
• ❌ Images missing or broken

When NOT to Use

Do NOT use website-builder-patterns when:

• Modifying existing auth.coditect.ai - Use frontend-react-typescript-expert agent instead
• Backend API development - Use backend-architecture-patterns skill
• Mobile app development - Use mobile-developer agent
• Simple static page - Direct HTML/CSS may be simpler
• Content management system needed - Consider Strapi, Contentful integration
• E-commerce functionality - Use dedicated e-commerce platforms (Shopify, WooCommerce)
• Complex SPA with routing - Consider Next.js patterns instead
• Multi-tenant application - Use microservices-patterns skill

Alternative Approaches:

• Next.js for SSR/ISR: Better SEO for dynamic content
• Gatsby for static site generation: Better performance for large sites
• Webflow/Squarespace: No-code alternatives for simple marketing sites
• Direct React without Vite: If custom webpack needed

Anti-Patterns (Avoid)

Anti-Pattern	Problem	Solution
Skipping site type selection	Mixed patterns, inconsistent structure	Choose docs/product/static pattern first
Hardcoding colors	Inconsistent branding, hard to maintain	Use Tailwind config with CODITECT brand colors
No dark mode	Poor UX, accessibility issues	Implement dark mode toggle from start
Ignoring mobile	Broken layouts, high bounce rate	Test at 320px, 768px, 1024px breakpoints
Missing Lighthouse checks	Poor performance in production	Run Lighthouse before deployment
Single-stage Dockerfile	Large image size, slow deployments	Use multi-stage build (builder + nginx)
Port 80 in Cloud Run	Cloud Run requires 8080	Always use port 8080 in nginx config
No caching headers	Slow repeat visits, high bandwidth	Configure nginx caching for static assets
Missing security headers	Vulnerable to XSS, clickjacking	Add X-Frame-Options, CSP headers in nginx
Skipping DNS validation	Site unreachable after deployment	Verify DNS with dig before announcing
No fallback for SPA	404 on direct URL access	Configure try_files $uri /index.html
Committing .env files	Secrets exposure	Use .env.example only, .gitignore .env

Principles

This skill embodies these CODITECT principles:

1. Pattern Reuse - Established docs/product/static patterns eliminate reinvention
2. Separation of Concerns - Clear distinction between content, styling, and deployment
3. Progressive Enhancement - Mobile-first responsive design scales up to desktop
4. Accessibility First - Dark mode, alt text, semantic HTML from start
5. Automation - cloudbuild.yaml automates entire deployment pipeline
6. Performance - Multi-stage Docker builds minimize image size
7. Security - nginx security headers, SSL by default, no exposed secrets
8. Observability - Lighthouse scores provide quantitative quality metrics

Full Principles: CODITECT-STANDARD-AUTOMATION.md

---

Related Components

• Agent: website-builder
• Commands: /build-site, /deploy-site
• Scripts: build-website.py, deploy-website.sh
• Workflows: WEBSITE-BUILD-WORKFLOWS.md