Claude Code Plugins

Community-maintained marketplace

Feedback

Build and deploy this React + Vite GSAP website. Use when building, deploying, or preparing the project for production.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name build-and-deploy
description Build and deploy this React + Vite GSAP website. Use when building, deploying, or preparing the project for production.

Build and Deploy GSAP Awwwards Website

CRITICAL: For Vercel, you MUST use vercel build --prod then vercel deploy --prebuilt --prod. Do NOT use vercel --prod or vercel deploy --prod directly - these will fail due to Git author permission issues in VM environments.

Workflow

1. Install Dependencies

npm install

2. Build

npm run build

This creates a production build in the dist/ directory.

3. Deploy

Vercel:

All vercel CLI commands require -t <token> or --token <token> for authentication.

# Pull project settings (also links project, creates .vercel/project.json)
vercel pull --yes -t $VERCEL_TOKEN

# Build locally for production
vercel build --prod -t $VERCEL_TOKEN

# Deploy prebuilt
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN

Netlify:

# Deploy (dist is the output directory for Vite)
netlify deploy --prod --dir=dist

Critical Notes

  • VERCEL PREBUILT MODE IS MANDATORY: Always use vercel build --prod followed by vercel deploy --prebuilt --prod. Never use vercel --prod or vercel deploy --prod without --prebuilt flag.
  • Static Site: This is a static React site with no backend - no environment variables needed
  • Output Directory: Vite outputs to dist/ directory
  • No Dev Server: Never run npm run dev in VM environment