/website-build

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):**

--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:**

--color-primary: #818cf8;
--color-primary-dark: #6366f1;
--color-secondary: #94a3b8;
--color-accent: #22d3ee;
--color-bg: #0f172a;
--color-bg-alt: #1e293b;
--color-text: #f1f5f9;
--color-text-light: #94a3b8;

**white-teal:**

--color-primary: #0d9488;
--color-primary-dark: #0f766e;
--color-secondary: #64748b;
--color-accent: #06b6d4;
--color-bg: #ffffff;
--color-bg-alt: #f0fdfa;
--color-text: #1e293b;
--color-text-light: #64748b;

If `design.colorScheme` is "custom", use `design.primaryColor` and `design.accentColor` from config and derive the rest.

App.css

Component-level styles. Use the CSS custom properties from index.css. Style should match `design.style`:

• **professional**: Conservative layout, clean typography, authoritative feel
• **bold-modern**: Strong colors, larger typography, prominent shadows
• **clean-minimal**: Lots of whitespace, thin borders, subtle shadows

Step 7: Generate main.jsx and App.jsx

**main.jsx:**

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

**App.jsx:** Import and compose all generated components in order. Use a single-page layout with sections. Include smooth scrolling.

Step 8: Generate index.html

Write this file at the **project root** (`<projectDir>/index.html`), not under `public/`. Vite resolves the entry HTML from the project root, and `/src/main.jsx` is referenced as an absolute project-root path:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="{{site description from config}}" />
    <title>{{site title from config}}</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Step 9: Generate .env