Awwwards Landing Page
Spin up a portfolio-quality marketing landing with smooth scroll and motion without designing from scratch.
Overview
awwwards-landing-page is an agent skill for the Validate phase that provisions a Next.js designer portfolio landing with Locomotive Scroll, GSAP, and Framer Motion and documents safe Vercel prebuilt deploy steps.
Install
npx skills add https://github.com/eng0ai/eng0-template-skills --skill awwwards-landing-pageWhat is this skill?
- Next.js stack with Locomotive Scroll, GSAP, and Framer Motion for award-style motion
- Documented git-clone setup including shallow clone and optional fresh git init
- Vercel production path requires vercel build --prod then vercel deploy --prebuilt --prod—not vercel --prod alone
- Netlify deploy alternative and local dev on port 3000 via npm run dev
- Static site template with no environment variables required
- Dev server documented on port 3000
- Vercel flow uses vercel build --prod plus vercel deploy --prebuilt --prod
Adoption & trust: 782 installs on skills.sh; 5 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a standout portfolio or promo landing fast but lack a motion-ready Next.js starting point and a deploy recipe that won’t break Vercel production builds.
Who is it for?
Solo designers and indie builders shipping a motion-rich portfolio or campaign landing during validation before investing in a full app.
Skip if: Teams that need a multi-page SaaS marketing site, headless CMS wiring, or a backend-heavy product shell without animation dependencies.
When should I use this skill?
User wants a designer portfolio or promo landing with Locomotive Scroll, GSAP, and Framer Motion on Next.js.
What do I get? / Deliverables
You get a cloned, buildable static Next.js landing with documented local dev and Vercel or Netlify production deploy commands ready to customize with your own work.
- Cloned Next.js awwwards-style landing project
- Production build via npm run build
- Deployed static site on Vercel or Netlify
Recommended Skills
Journey fit
Awwwards-style landings are classic validate-phase proof pieces that show craft and positioning before a full product build. This skill lives on the landing subphase because it outputs a single high-impact page meant to impress visitors and convert interest.
How it compares
Use this as a clone-and-deploy frontend template rather than ad-hoc chat snippets that omit the required Vercel prebuilt production sequence.
Common Questions / FAQ
Who is awwwards-landing-page for?
It is for solo and indie builders who want an Awwwards-caliber motion landing on Next.js without assembling Locomotive Scroll, GSAP, and Framer Motion from scratch.
When should I use awwwards-landing-page?
Use it in Validate when you need a landing or portfolio page to prove positioning and visual quality, and optionally again in Build if you are extending that same frontend shell.
Is awwwards-landing-page safe to install?
Review the Security Audits panel on this Prism page and inspect the cloned GitHub template and npm dependencies before running install or deploy commands in your environment.
SKILL.md
READMESKILL.md - Awwwards Landing Page
# 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 ```bash git clone --depth 1 https://github.com/Eng0AI/awwwards-landing-page-template.git . ``` If the directory is not empty: ```bash 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) ```bash rm -rf .git git init ``` ### 3. Install Dependencies ```bash npm install ``` ## Build ```bash npm run build ``` ## Deploy > **CRITICAL**: For Vercel, you MUST use `vercel build --prod` then `vercel deploy --prebuilt --prod`. Never use `vercel --prod` directly. ### Vercel (Recommended) ```bash vercel pull --yes -t $VERCEL_TOKEN vercel build --prod -t $VERCEL_TOKEN vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN ``` ### Netlify ```bash netlify deploy --prod ``` ## Development ```bash npm run dev ``` Opens at http://localhost:3000 ## Notes - Static Next.js site - no environment variables needed - Never run `npm run dev` in VM environment