name: aura-website-builder
description: Complete website generation with Aura UI components. Use when building full websites from specifications, including multi-page layouts, component assembly, responsive design, framework exports (React, Vue), SEO optimization, and deployment configuration. Combines aura-components with site structure, routing, and build tools.

Aura Website Builder

Overview

This skill enables complete website generation using Aura UI components. Build beautiful, responsive websites from specifications with automatic framework export, SEO optimization, and deployment-ready output.

Quick Start

1. Define Your Website

Create a website specification JSON:

{
  "name": "My Awesome Site",
  "domain": "mysite.com",
  "pages": [
    {
      "name": "home",
      "sections": ["hero", "features", "testimonials", "cta"]
    },
    {
      "name": "about",
      "sections": ["hero", "team", "mission", "cta"]
    }
  ]
}

2. Generate Website

python scripts/website_generator.py my-website.json --output ./dist

3. Export to Framework

python scripts/export_website.py ./dist --framework react --output ./my-site-react

Website Specifications

Page Configuration

{
  "title": "Page Title",
  "description": "Meta description",
  "slug": "page-slug",
  "sections": [
    {
      "type": "hero",
      "data": {
        "heading": "Welcome",
        "subheading": "Build amazing sites",
        "cta": {
          "text": "Get Started",
          "link": "/signup"
        }
      }
    }
  ]
}

Available Section Types

• hero - Hero section with CTA
• features - Feature grid/cards
• testimonials - Social proof section
• cta - Call-to-action section
• pricing - Pricing table
• faq - FAQ accordion
• stats - Statistics display
• newsletter - Newsletter signup
• team - Team member grid
• contact - Contact form
• gallery - Image gallery
• video - Video embed section

Site Structure

Generated websites follow this structure:

dist/
├── index.html           # Home page
├── about/
│   └── index.html
├── contact/
│   └── index.html
├── css/
│   ├── main.css
│   ├── components.css
│   └── animations.css
├── js/
│   ├── main.js
│   └── components.js
├── assets/
│   ├── images/
│   ├── icons/
│   └── fonts/
└── manifest.json        # PWA manifest

Theme Customization

Color Scheme

Define custom colors in theme config:

{
  "theme": {
    "colors": {
      "primary": "#6366f1",
      "secondary": "#8b5cf6",
      "accent": "#ec4899",
      "dark": "#1f2937",
      "light": "#f9fafb"
    },
    "fonts": {
      "heading": "Inter, sans-serif",
      "body": "Inter, sans-serif"
    }
  }
}

Layout Options

• Container width: sm | md | lg | xl | full
• Spacing: compact | normal | spacious
• Navigation: fixed | sticky | static
• Footer: minimal | standard | extended

Building Websites

Step 1: Create Specification

{
  "name": "Portfolio Site",
  "domain": "myportfolio.com",
  "theme": {
    "colors": {
      "primary": "#667eea",
      "secondary": "#764ba2"
    }
  },
  "pages": [...]
}

Step 2: Generate HTML

python scripts/website_generator.py portfolio.json --output dist

Step 3: Optimize Assets

python scripts/optimize_assets.py dist/

Step 4: Export to Framework

python scripts/export_website.py dist --framework react

Framework Exports

React Export

Generates React components with hooks and routing:

python scripts/export_website.py dist --framework react --output my-react-site

Creates:
- React components for each page
- React Router configuration
- Custom hooks for components
- Tailwind CSS integration

Vue Export

Generates Vue 3 components with composition API:

python scripts/export_website.py dist --framework vue --output my-vue-site

Creates:
- Vue single-file components
- Vue Router setup
- Composables for state
- Vite configuration

Next.js Export

Generates Next.js application structure:

python scripts/export_website.py dist --framework next --output my-next-site

Creates:
- Next.js pages
- API routes
- Static generation config
- Image optimization

SEO Optimization

Automatic SEO Features

• Meta tags for all pages
• Open Graph tags
• Twitter Card tags
• Sitemap generation
• Robots.txt creation
• Schema.org markup

SEO Configuration

{
  "seo": {
    "title": "My Site",
    "description": "Site description",
    "keywords": ["keyword1", "keyword2"],
    "author": "Your Name",
    "canonicalUrl": "https://mysite.com",
    "og": {
      "image": "/og-image.png",
      "type": "website"
    }
  }
}

Performance Optimization

Built-in Optimizations

• Image lazy loading
• CSS minification
• JS tree-shaking
• Asset compression
• Critical CSS extraction
• Font optimization

Performance Configuration

{
  "performance": {
    "minify": true,
    "lazyLoad": true,
    "criticalCSS": true,
    "cacheBusting": true,
    "compression": "gzip"
  }
}

Deployment

Static Hosting

# Deploy to Netlify
python scripts/deploy.py dist --host netlify

# Deploy to Vercel
python scripts/deploy.py dist --host vercel

# Deploy to GitHub Pages
python scripts/deploy.py dist --host github-pages

Docker Deployment

# Create Docker image
python scripts/create_docker.py dist --image mysite:latest

# Run container
docker run -p 80:3000 mysite:latest

Resources

scripts/

• website_generator.py - Generate full website from spec
• export_website.py - Export to React/Vue/Next.js
• optimize_assets.py - Optimize images and assets
• deploy.py - Deploy to hosting platforms
• create_docker.py - Create Docker image

references/

• specifications.md - Complete spec schema documentation
• themes.md - Theme customization guide
• deployment-guide.md - Deployment instructions for various hosts