Awwwards landing page
Quick answer
- 01What is it?
- Designer portfolio with Locomotive Scroll, GSAP, and Framer Motion animations. What sets it apart is how it narrows conversion optimization into one specific workflow rather than a broad, generic prompt.
- 02Inputs
- Context for conversion optimization: your goals, audience, constraints, and any source material the skill asks for.
- 03Output
- A ready-to-use result for conversion optimization: the analysis, copy, or recommendations the agent produces.
Add this skill
Install as a package
Installs this one skill package for your coding agent, including any supporting files that skill ships with — not every skill in the repository. Read the tutorial.
$ npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-pageUse in Profound
Copy this file into a new Profound Skill. That's it, nothing else to install.
Copy and create in ProfoundAwwwards Landing Page
A stunning portfolio landing page with smooth scroll animations using Locomotive Scroll, GSAP, and Framer Motion.
Tech Stack
- Framework: Next.js
- Animation: Locomotive Scroll, GSAP, Framer Motion
- Package Manager: pnpm or npm
- Dev Port: 3000
Setup
1. Clone the Template
git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-template.git .
If the directory is not empty:
git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-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
Deploy
CRITICAL: For Vercel, you MUST use
vercel build --prodthenvercel deploy --prebuilt --prod. Never usevercel --proddirectly.
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
Development
npm run dev
Opens at http://localhost:3000
Notes
- Static Next.js site - no environment variables needed
- Never run
npm run devin VM environment
Common questions
How do I install Awwwards landing page in Cursor, Claude Code, or Codex?
Run npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page in the project where you want it, then ask your agent for the skill by name. The --skill flag installs only Awwwards landing page, not every skill in the repository.
Where does Awwwards landing page come from and what license is it under?
Awwwards landing page comes from the rebyteai-template/rebyte-skills repository on GitHub. That repository has 16 GitHub stars. No license was detected on the source repository, so check with the author before redistributing it.
Prefer plain text? Read the Awwwards landing page guide as markdown.