PluginBench
Skill
Review
Audit score 70

gsap-awwwards-website

eng0ai/eng0-template-skills

How to install gsap-awwwards-website

npx skills add https://github.com/eng0ai/eng0-template-skills --skill gsap-awwwards-website
Claude Code
Cursor
Windsurf
Cline
Full instructions (SKILL.md)

Source of truth, from eng0ai/eng0-template-skills.


name: gsap-awwwards-website description: SPYLT product landing with GSAP scroll animations, React 19, and Tailwind CSS 4.

GSAP Awwwards Website

A stunning product landing page with GSAP scroll animations, modern React 19 architecture, and Tailwind CSS 4 styling.

Tech Stack

  • Framework: React 19
  • Build Tool: Vite
  • Animation: GSAP
  • Styling: Tailwind CSS 4
  • Package Manager: npm
  • Output: dist directory
  • Dev Port: 5173

Setup

1. Clone the Template

git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git .

If the directory is not empty:

git clone --depth 1 https://github.com/Eng0AI/gsap-awwwards-website-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template

2. Remove Git History (Optional)

rm -rf .git
git init

3. Install Dependencies

npm install

Build

npm run build

Creates a production build in the dist/ directory.

Deploy

CRITICAL: For Vercel, you MUST use vercel build --prod then vercel deploy --prebuilt --prod. Never use vercel --prod directly.

Vercel (Recommended)

vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN

Netlify

netlify deploy --prod --dir=dist

Development

npm run dev

Opens at http://localhost:5173

Notes

  • Static React site - no environment variables needed
  • Never run npm run dev in VM environment

Related skills

More from eng0ai/eng0-template-skills and the wider catalog.

AWawwwards-landing-page logo

awwwards-landing-page

eng0ai/eng0-template-skills

Designer portfolio with Locomotive Scroll, GSAP, and Framer Motion animations.

898 installs
FIfinancial-deep-research logo

financial-deep-research

eng0ai/eng0-template-skills

Conduct enterprise-grade financial research with multi-source synthesis, regulatory compliance tracking, and verified market analysis. Use when user needs comprehensive financial analysis requiring 10+ sources, verified claims, market comparisons, or investment research. Triggers include "financial research", "market analysis", "investment analysis", "due diligence", "financial deep dive", "compare stocks/funds", or "analyze [company/sector]". Do NOT use for simple stock quotes, basic company lookups, or questions answerable with 1-2 searches.

614 installs
R3r3f-animation logo

r3f-animation

enzed/r3f-skills

React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motion, or implementing physics-based movement.

818 installs
R3r3f-fundamentals logo

r3f-fundamentals

enzed/r3f-skills

React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling the render loop, or working with Three.js objects in React.

874 installs
R3r3f-geometry logo

r3f-geometry

enzed/r3f-skills

React Three Fiber geometry - built-in shapes, BufferGeometry, instancing with Drei. Use when creating 3D shapes, custom meshes, point clouds, lines, or optimizing with instanced rendering.

885 installs
R3r3f-interaction logo

r3f-interaction

enzed/r3f-skills

Handle pointer events, camera controls, and 3D object interactions in React Three Fiber.

2.1k installsAudited