Skip to content

/website-deploy

Builds the React/Vite site, syncs to S3, and invalidates CloudFront cache. Uses the plugin's bundled deploy.sh script.

shell
$ npx -y skills add GRCEngClub/claude-grc-engineering --skill website-deploy --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/website-deploy
How auto-invocation works

Context preview

The summary Claude sees to decide when to auto-load this skill.

Builds the React/Vite site, syncs to S3, and invalidates CloudFront cache. Uses the plugin's bundled deploy.sh script.

SKILL.md

website-deploy.SKILL.md
name: website-deploy
description: Builds the React/Vite site, syncs to S3, and invalidates CloudFront cache. Uses the plugin's bundled deploy.sh script.
allowed-tools: Bash, Read, Write, Edit, Glob

Website Deploy Skill

You are running the `/grc-portfolio:deploy` skill. Your job is to build the website and deploy it to the AWS infrastructure created by `/grc-portfolio:infra`.

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.infraDeployed === true`. If not, tell the user to run `/grc-portfolio:infra` first.

Also validate that `status.buildComplete === true`. If not, tell the user to run `/grc-portfolio:build` first.

Extract needed values:

  • `aws.bucketName`
  • `aws.distributionId`
  • `aws.profile`
  • `aws.contactApiEndpoint` (if contact form enabled)
  • `aws.cloudFrontUrl`
  • `aws.domain` (if custom domain)

Step 2: Set Environment Variables (if contact form)

If `features.contactForm` is true and `aws.contactApiEndpoint` is set, ensure `.env` in the project directory contains:

VITE_CONTACT_API_ENDPOINT=<aws.contactApiEndpoint>

**Update the file non-destructively** — do not overwrite an existing `.env`:

1. If `.env` does not exist, create it with just this line. 2. If `.env` exists and already has a `VITE_CONTACT_API_ENDPOINT=` line, replace only that line. 3. If `.env` exists but does not contain `VITE_CONTACT_API_ENDPOINT=`, append the line.

Preserve any other variables the user has set (e.g. `VITE_GA_ID`, analytics keys, feature flags).

Step 3: Build the Site

cd <projectDir>
npm run build

Verify the `dist/` directory was created and contains files.

If the build fails, diagnose and fix the issue.

Step 4: Deploy to AWS

Use the toolkit's deploy script:

$TOOLKIT_DIR/scripts/deploy.sh <aws.bucketName> <aws.distributionId> <aws.profile>

Run this from the project directory (it expects `dist/` in the current working directory).

Step 5: Verify Deployment

Wait a moment for CloudFront to propagate, then tell the user their site is live.

Provide the URL:

  • If custom domain: `https://<aws.domain>`
  • Otherwise: `https://<aws.cloudFrontUrl>`

Step 6: Update Config

Update `site-config.json`:

  • Set `status.siteDeployed = true`

Step 7: Summary

Tell the user:

  • The site is deployed and live
  • Provide the live URL
  • Note that CloudFront cache invalidation takes 1-2 minutes to fully propagate
  • Suggest running `/grc-portfolio:repo` to create a GitHub repo (if not done)
  • Suggest running `/grc-portfolio:cicd` to set up automatic deployments on push

Variables

  • `$TOOLKIT_DIR` = read from `site-config.json` `toolkitDir` field
  • `$ARGUMENTS` = arguments passed after `/deploy` (expected: project directory path)
Read more
Read it on GitHub ↗
Ships withtrust-center

Open-source GRC Engineering resource for Claude. claude-grc-engineering turns technical evidence from cloud, SaaS, code, and security tools into framework-aligned findings, gap reports, remediation guidance, evidence packages, and OSCAL workflows.

Get the whole plugin, auto-invoked