site-generator

SKILL 3: Site Generator

Generate a complete, production-ready website based on the site brief from the site-interviewer skill.

Overview

This skill reads the site-brief.json file produced by the site-interviewer skill and generates a fully functional website with responsive design, modern styling, accessibility features, and integration points for forms and newsletter signup.

The skill intelligently chooses between two complexity levels:

• Simple: Pure HTML/CSS for 1-5 static pages (landing pages, portfolios, simple marketing sites)
• Complex: Vite + vanilla JavaScript for dynamic sites with interactive features

What This Skill Does

1. Analyzes Site Brief

• Reads site-brief.json from the current directory
• Extracts: business type, brand colors, fonts, page count, special features
• Determines complexity level (simple vs complex)

2. Generates Website Structure

For simple sites:

generated-site/
├── index.html
├── styles.css
├── [page-name].html (for each page beyond home)
├── vercel.json
├── .gitignore
└── README.md

For complex sites:

generated-site/
├── package.json
├── vite.config.js
├── index.html
├── main.js
├── style.css
├── vercel.json
├── .gitignore
└── src/
    ├── components/
    ├── utils/
    └── styles/

3. Implements Modern Features

HTML & Structure:

• Semantic HTML5 (header, nav, main, section, article, footer)
• Complete meta tags (viewport, charset, description)
• Open Graph tags for social sharing
• Favicon link placeholder
• Proper heading hierarchy (h1, h2, h3)

Styling:

• CSS custom properties for brand colors and fonts
• Mobile-first responsive design (320px, 768px, 1024px breakpoints)
• Smooth scroll behavior
• Scroll animations with Intersection Observer
• Professional typography with system fonts or Google Fonts

JavaScript (Complex Sites):

• Smooth scroll navigation
• Scroll-triggered animations
• Mobile menu toggle
• Form handling with validation
• Toast notifications for success/error