# awwwards-landing-page

Provides instructions for scaffolding a Next.js designer portfolio with GSAP and Locomotive Scroll. Useful for shipping an animated static site quickly.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1300 installs · ★ 17
- Author: rebyteai-template
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/rebyteai-template/rebyte-skills/tree/HEAD/awwwards-landing-page/SKILL.md
- Updated: 2026-06-16
- HTML: https://affpapa.org/en/nevibecode/skills/awwwards-landing-page

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/awwwards-landing-page/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/awwwards-landing-page/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/awwwards-landing-page/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/awwwards-landing-page/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install rebyteai-template/rebyte-skills awwwards-landing-page
```

2. **Manually: put the files in place**
- File: `.github/skills/awwwards-landing-page/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/rebyteai-template/rebyte-skills --path awwwards-landing-page
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/awwwards-landing-page/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add rebyteai-template/rebyte-skills --skill awwwards-landing-page -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/rebyteai-template/rebyte-skills/tree/HEAD/awwwards-landing-page/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [rebyteai-template/rebyte-skills](https://affpapa.org/en/nevibecode/by/rebyteai-template/rebyte-skills.md) — 5 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md