gsap-awwwards-website — Claude Code skill: GSAP landing page
This skill scaffolds a product landing template built on React 19, GSAP scroll animations and Tailwind CSS 4.
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a claude-codeWhat gsap-awwwards-website does
The skill hands your agent a working recipe: clone the template, install dependencies, build, deploy. The stack is React 19 with Vite, GSAP for animation, Tailwind CSS 4 for styling, npm as the package manager. Dev server runs on port 5173, and the production build lands in dist.
Cloning uses git clone with --depth 1. If the target directory already has files, the skill clones into a temp folder and moves everything over. Then npm install and npm run build. Git history can be wiped and reinitialised.
Vercel gets a hard rule: run vercel build --prod first, then vercel deploy --prebuilt --prod. Calling vercel --prod directly is off the table. No environment variables are needed since the site is static, and npm run dev should not be started inside a VM.
What it helps with
- scaffold a landing template into an empty directory
- build static output into the
distfolder - deploy to Vercel without breaking the build step
- move template files into a directory that already has content
- serve the site locally on port 5173
Example prompts for the agent
- scaffold the gsap-awwwards-website template in this folder
- build the project and prep it for Vercel deployment
- move the template into a non-empty directory and install dependencies
How to install gsap-awwwards-website
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a claude-code2Manually: put the files in place
~/.claude/skills/gsap-awwwards-website/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/gsap-awwwards-website/
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a codex2Manually: put the files in place
.agents/skills/gsap-awwwards-website/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a cursor2Manually: put the files in place
.cursor/skills/gsap-awwwards-website/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install rebyteai-template/rebyte-skills gsap-awwwards-website2Manually: put the files in place
.github/skills/gsap-awwwards-website/SKILL.md1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a gemini-cli2Platform CLI
gemini skills install https://github.com/rebyteai-template/rebyte-skills --path gsap-awwwards-websiteManually: put the files in place
.devin/skills/gsap-awwwards-website/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about gsap-awwwards-website
How do I install gsap-awwwards-website in Claude?
Run npx skills add rebyteai-template/rebyte-skills --skill gsap-awwwards-website -a claude-code. The skill file then sits at ~/.claude/skills/gsap-awwwards-website/SKILL.md.
What does gsap-awwwards-website do?
It scaffolds a product landing template on React 19 with GSAP scroll animations and Tailwind CSS 4, builds it through Vite and supplies the deploy commands.
Why can't I deploy to Vercel with vercel --prod?
The skill flags this as critical: build with vercel build --prod, then run vercel deploy --prebuilt --prod. The direct call gives a different result.
