// Scaffolds a complete React/Vite website project from site-config.json. Generates components, styles, and configuration based on the site type and plan data.
| 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 |
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.
Find site-config.json:
$ARGUMENTS for a project directory pathRead 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.
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
Base it on the toolkit's examples/package.json at $TOOLKIT_DIR/examples/package.json. Customize:
name to the projectName from configCopy from $TOOLKIT_DIR/examples/vite.config.js as-is. It's already well-configured for AWS deployment.
Navbar.jsx -- Navigation bar with:
pages array from configHero.jsx -- Full-width hero section with:
design.ctaPreferenceFooter.jsx -- Footer with:
ContactForm.jsx (if features.contactForm):
VITE_CONTACT_API_ENDPOINT env varCSS 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.
Component-level styles. Use the CSS custom properties from index.css. Style should match design.style:
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.
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>
.env.example:
# Contact Form API endpoint (from /grc-portfolio:infra deployment)
VITE_CONTACT_API_ENDPOINT=
.gitignore:
node_modules
dist
.env
.env.local
.DS_Store
*.log
If features.contactForm is true, copy $TOOLKIT_DIR/lambda/contact-form-handler.js into a lambda/ directory in the project.
Run:
cd <projectDir>
npm install
npm run build
If the build fails, fix the errors. Common issues:
Update site-config.json:
status.buildComplete = trueTell the user:
<projectDir>npm run dev to preview locally/grc-portfolio:preflight next to check AWS readiness$TOOLKIT_DIR = read from site-config.json toolkitDir field$ARGUMENTS = arguments passed after /build (expected: project directory path)Build and deploy a production-ready Trust Center for any company. Use this skill whenever someone asks to create a trust center, compliance portal, security page, or wants to publish their SOC 2/SOC 3/ISO 27001/HIPAA/compliance posture publicly. Also triggers when someone mentions gated document access for audit reports, NDA-based document sharing, or wants to replace paid trust center tools like Secureframe, Vanta, Drata, or SafeBase. Even if they just say "I need a place to share my SOC 2 with customers" — that's a trust center. Use this skill.
NIST Cybersecurity Framework v2.0 expert. Reference-depth knowledge of the six Functions (Govern, Identify, Protect, Detect, Respond, Recover), Categories and Subcategories, Profiles (Current vs Target), Tiers, Implementation Examples, and the practitioner workflow of using CSF as a board-readable cybersecurity outcomes language. Backed by the SCF crosswalk for control-by-control mechanics.
Verbatim reference for all 320 NIST 800-171A Rev 2 assessment objectives, plus the Rev 2 → Rev 3 control crosswalk. Use for AO-level lookups (e.g., 3.1.1[c]), evidence planning, and forward-mapping to Rev 3. Pairs with cmmc-expert.
CMMC v2.0 expert for DoD contractors. Covers NIST 800-171 Rev 2 (14 families, 110 controls), SPRS scoring, POA&M rules, 32 CFR Part 170, DFARS clauses, scoping, ESP/CSP, C3PAO assessment lifecycle, and Rev 2 → Rev 3 transition.
Interpret testssl-inspector normalized findings, recommend remediations, and tie evidence back to SCF anchor controls plus SOC 2 / NIST 800-53 r5 / PCI DSS 4.0.1 / ISO 27002:2022 equivalents derived from SCF crosswalks.
Sets up GitHub Actions CI/CD workflow for automatic deployment to AWS on push to main. Uses GitHub OIDC for keyless AWS authentication.