awwwards-landing-page — Claude Code skill: install and setup
Provides instructions for scaffolding a Next.js designer portfolio with GSAP and Locomotive Scroll. Useful for shipping an animated static site quickly.
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a claude-codeWhat awwwards-landing-page does
This skill teaches coding agents how to set up an animated designer portfolio based on Next.js. The underlying template relies on Locomotive Scroll, GSAP, and Framer Motion for interface transitions. It clones clean code directly from the Eng0AI/awwwards-landing-page-template repository without requiring any environment variables.
The workflow covers cloning into empty or existing directories, managing packages with npm or pnpm, and local testing on port 3000. Do not run npm run dev inside VMs. Deployments to Vercel have a strict requirement: never run vercel --prod directly. Instead, the agent must execute vercel build --prod followed by vercel deploy --prebuilt --prod. Netlify deployment is also documented.
What it helps with
- scaffold a Next.js designer portfolio with scroll animations
- clone the landing page template into a non-empty directory safely
- execute prebuilt production releases on Vercel
- publish the static site directly to Netlify
Example prompts for the agent
- Clone the awwwards-landing-page repository here and install dependencies using pnpm
- Prepare the portfolio build and deploy it to Vercel using prebuilt production artifacts
- Reset the Git history in this portfolio folder and initialize a fresh repository
How to install awwwards-landing-page
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a claude-code2Manually: put the files in place
~/.claude/skills/awwwards-landing-page/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/awwwards-landing-page/
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a codex2Manually: put the files in place
.agents/skills/awwwards-landing-page/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a cursor2Manually: put the files in place
.cursor/skills/awwwards-landing-page/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install rebyteai-template/rebyte-skills awwwards-landing-page2Manually: put the files in place
.github/skills/awwwards-landing-page/SKILL.md1Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a gemini-cli2Platform CLI
gemini skills install https://github.com/rebyteai-template/rebyte-skills --path awwwards-landing-pageManually: put the files in place
.devin/skills/awwwards-landing-page/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -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 awwwards-landing-page
How do I install awwwards-landing-page in Claude Code?
Run npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a claude-code. The agent can also read instructions from ~/.claude/skills/awwwards-landing-page/SKILL.md.
What does this skill do?
It guides the assistant through cloning, configuring, and publishing a static Next.js portfolio that uses GSAP, Framer Motion, and Locomotive Scroll.
How should this project be deployed on Vercel?
Never deploy with direct vercel --prod. You must build artifacts first with vercel build --prod, then deploy them using vercel deploy --prebuilt --prod.
