/build-site

Build a CODITECT website from templates.

System Prompt

⚠️ EXECUTION DIRECTIVE: When the user invokes this command, you MUST:

1. IMMEDIATELY execute - no questions, no explanations first
2. ALWAYS show full output from build process
3. ALWAYS provide summary with next steps after execution completes

DO NOT:

• Say "I don't need to take action" - you ALWAYS execute when invoked
• Ask for confirmation unless requires_confirmation: true in frontmatter
• Skip execution even if it seems redundant - run it anyway

The user invoking the command IS the confirmation.

---

Usage

/build-site [type] [options]

Arguments

Site Types

Type	Description	Template
docs	Documentation portal	MDX + Vite
product	Product landing page	ProductLandingLayout
static	Static pages	StaticPageLayout
landing	Marketing landing	Custom hero + CTA

Options

Option	Description	Default
--name	Site name (e.g., dms, workflow)	Required
--source	Source content directory	./docs
--output	Output directory	./{name}-site
--template	Template to use	Auto-detect
--deploy	Deploy after build	false

Examples

Build Documentation Site

/build-site docs --name docs --source ./docs --output ./docs-site

Build Product Landing Page

/build-site product --name dms --template ProductLandingLayout

Build and Deploy

/build-site docs --name docs --deploy

Execution Steps

When invoked, execute these steps:

Step 1: Validate Arguments

# Check required arguments
if [ -z "$SITE_NAME" ]; then
  echo "Error: --name is required"
  exit 1
fi

Step 2: Create Project Structure

# Create site directory
mkdir -p $OUTPUT_DIR
cd $OUTPUT_DIR

# Initialize Vite project
npm create vite@latest . -- --template react-ts

# Install dependencies
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Apply Template

# Copy template files based on site type
case $SITE_TYPE in
  docs)
    cp -r templates/docs/* .
    ;;
  product)
    cp -r templates/product/* .
    ;;
  static)
    cp -r templates/static/* .
    ;;
esac

Step 4: Configure Tailwind

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... full color palette
          900: '#0c4a6e',
        },
      },
    },
  },
  plugins: [],
}

Step 5: Copy Content

# If docs type, copy markdown content
if [ "$SITE_TYPE" = "docs" ]; then
  cp -r $SOURCE_DIR/* content/
fi

Step 6: Build

npm run build

Step 7: Verify Build

# Check dist directory exists
ls -la dist/

# Verify key files
test -f dist/index.html && echo "✅ index.html exists"
test -d dist/assets && echo "✅ assets directory exists"

Step 8: Deploy (if requested)

if [ "$DEPLOY" = "true" ]; then
  /deploy-site ${SITE_NAME}.coditect.ai --source ./dist
fi

Output

After successful execution, provide:

✅ Site built successfully!

📁 Output: ./docs-site/dist
📊 Build size: 1.2 MB (gzipped: 320 KB)
⏱️ Build time: 12.3s

📋 Files created:
  - dist/index.html
  - dist/assets/index-abc123.js
  - dist/assets/index-def456.css

🚀 Next steps:
  1. Preview locally: cd docs-site && npm run preview
  2. Deploy: /deploy-site docs.coditect.ai --source ./docs-site/dist
  3. Configure DNS: See C.4.1 in PILOT-PARALLEL-EXECUTION-PLAN.md

Integration

This command uses:

• Agent: website-builder
• Skill: website-builder-patterns
• Script: scripts/build-website.py

Related Commands

• /deploy-site - Deploy built site to GCP
• /verify-site - Verify site health after deployment

Required Tools

Tool	Purpose	Required
Bash	Execute npm, vite, tailwind commands	Yes
Write	Create config files (tailwind.config.js)	Yes
Read	Verify source content	Yes
Glob	Find template files	Optional

External Requirements:

• Node.js 18+ installed
• npm or pnpm available
• Source content directory exists

Output Validation

Before marking complete, verify output contains:

• Arguments validated (--name provided)
• Project structure created
• Template applied correctly
• Build completed without errors
• dist/ directory created with index.html
• Build size reported
• Next steps provided (preview/deploy commands)

Success Output

When site build completes:

✅ COMMAND COMPLETE: /build-site
Site Type: <docs|product|static|landing>
Name: <site-name>
Output: <output-path>/dist
Build Size: X.X MB (gzipped: Y KB)
Build Time: Z.Zs

Completion Checklist

Before marking complete:

• Arguments validated
• Project structure created
• Template applied
• Build completed
• Output verified

Failure Indicators

This command has FAILED if:

• ❌ Missing --name argument
• ❌ Template not found
• ❌ Build failed
• ❌ No dist/ created

When NOT to Use

Do NOT use when:

• Modifying existing site (edit directly)
• Need custom framework (build manually)
• No template matches needs

Anti-Patterns (Avoid)

Anti-Pattern	Problem	Solution
Skip template	Inconsistent design	Use appropriate template
No verification	Broken build	Check dist/ output
Wrong type	Feature mismatch	Match type to purpose

Principles

This command embodies:

• #3 Complete Execution - All build steps
• #1 Self-Provisioning - Auto-install deps
• #6 Clear, Understandable - Clear output

Full Standard: CODITECT-STANDARD-AUTOMATION.md