Agent skill
awwwards-landing-page
Designer portfolio with Locomotive Scroll, GSAP, and Framer Motion animations.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/awwwards-landing-page-eng0ai-eng0-template-skills
SKILL.md
Awwwards 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?