website-build

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: website-build
description: Scaffolds a complete React/Vite website project from site-config.json. Generates components, styles, and configuration based on the site type and plan data.
allowed-tools: Bash, Read, Write, Edit, Glob
---

# Website Build Skill

You are running the `/grc-portfolio:build` skill. Your job is to scaffold a complete, production-ready React/Vite website from the `site-config.json` created by `/grc-portfolio:plan`.

## Step 1: Locate and Validate Config

Find `site-config.json`:
- Check `$ARGUMENTS` for a project directory path
- Check the current working directory
- Ask the user if not found

Read it and validate that `status.planComplete === true`. If not, tell the user to run `/grc-portfolio:plan` first.

Read the `siteType` field to determine which components to generate.

## Step 2: Scaffold Project Structure

Create the following structure in the project directory:

```
src/
  main.jsx
  App.jsx
  App.css
  index.css
  components/
    Navbar.jsx
    Hero.jsx
    Footer.jsx
    ContactForm.jsx  (if features.contactForm)
    ... (type-specific components)
  assets/
index.html           (Vite's entry HTML, references /src/main.jsx)
public/
  favicon.svg
package.json
vite.config.js
.env.example
.gitignore
```

## Step 3: Generate package.json

Base it on the toolkit's `examples/package.json` at `$TOOLKIT_DIR/examples/package.json`. Customize:
- Set `name` to the `projectName` from config
- Keep all dependencies the same (react, react-dom, react-router-dom)
- Keep all devDependencies the same

## Step 4: Generate vite.config.js

Copy from `$TOOLKIT_DIR/examples/vite.config.js` as-is. It's already well-configured for AWS deployment.

## Step 5: Generate Components by Site Type

### All Types (shared components)

**Navbar.jsx** -- Navigation bar with:
- Site name/logo on the left
- Navigation links based on `pages` array from config
- Mobile-responsive hamburger menu
- Smooth scroll to sections

**Hero.jsx** -- Full-width hero section with:
- Main heading (name/company/product depending on type)
- Subtitle/tagline
- CTA button(s) based on `design.ctaPreference`
- Background using the color scheme

**Footer.jsx** -- Footer with:
- Copyright notice
- Social links (if available)
- Quick navigation links

**ContactForm.jsx** (if `features.contactForm`):
- Form with name, email, company (optional), message fields
- Submits to `VITE_CONTACT_API_ENDPOINT` env var
- Loading state, success/error feedback
- Basic client-side validation

### Portfolio/Personal Components

- **About.jsx** -- Professional summary, photo placeholder
- **Skills.jsx** -- Skills organized by category in a grid
- **Projects.jsx** -- Project cards with descriptions, tech tags, links
- **Certifications.jsx** -- Certification badges/list
- **Speaking.jsx** -- Talks, podcasts, articles (if data provided)

### Business Landing Page Components

- **Services.jsx** -- Service cards with descriptions
- **Testimonials.jsx** -- Testimonial cards with quotes
- **Team.jsx** -- Team member cards
- **Pricing.jsx** -- Pricing tier cards (if data provided)

### SaaS Marketing Components

- **Features.jsx** -- Feature grid with icons and descriptions
- **Pricing.jsx** -- Pricing comparison table/cards
- **Integrations.jsx** -- Integration logos/grid
- **CTA.jsx** -- Call-to-action section with demo/signup buttons

### Brochure Components

- **About.jsx** -- Business description
- **Services.jsx** -- Service list
- **Hours.jsx** -- Business hours and location/map placeholder

## Step 6: Generate Styles

### index.css

CSS reset and base styles. Set CSS custom properties based on `design.colorScheme`:

**navy-slate (GRC default):**
```css
--color-primary: #1e3a5f;
--color-primary-dark: #152a45;
--color-secondary: #64748b;
--color-accent: #3b82f6;
--color-bg: #ffffff;
--color-bg-alt: #f8fafc;
--color-text: #1e293b;
--color-text-light: #64748b;
```

**dark-charcoal:**
```css
--color-primary: #818cf8;
--color-primary-dark: #6366f1;
--color-secondary: #9