What is the awwwards-landing-page skill?
The awwwards-landing-page skill is a SKILL.md that scaffolds a designer portfolio landing page. It does not generate a design. It tells your AI coding agent to clone a Next.js template that uses Locomotive Scroll, GSAP and Framer Motion, install it, build it and deploy to Vercel or Netlify.
This skill is a short runbook, not a design generator. Its SKILL.md names a designer portfolio built with Next.js and animated through Locomotive Scroll, GSAP and Framer Motion, then lists the commands to set it up and ship it.
It sits in a repository of template skills for the eng0 platform, where the README labels this entry a designer portfolio under the landing and portfolio categories.
What the skill makes your agent do
- Clone the template repository into the current directory with a shallow git clone.
- Optionally remove the template's git history and start a fresh repository.
- Install dependencies with npm, then build with npm run build.
- Deploy to Vercel using the prebuilt flow, or to Netlify with one command.
The stack it sets up
- Framework: Next.js, described as a static site that needs no environment variables.
- Animation: Locomotive Scroll, GSAP and Framer Motion together.
- Package manager: pnpm or npm, with the dev server on port 3000.
- The template code comes from a separate repository, so the skill folder itself carries instructions only.
Who the awwwards-landing-page skill is for
Best for
- Designers and freelancers who want a scroll-animated portfolio running quickly without hand-wiring the animation libraries.
- Agents that need exact build and deploy commands, with GSAP framework guidance nearby for tweaks.
Not for
- Original designs. The layout and motion come from the template, so expect to restyle it yourself.
- Stacks other than Next.js, or sites that must run on WordPress.
- Performance tuning. Heavy scroll libraries deserve a check against Core Web Vitals before launch.
Use it with UiChemy
A Next.js app does not run inside WordPress. To get a similar scroll-driven page there, rebuild the design in Figma and convert it with UiChemy Figma to WordPress, or edit the result in Composer. Click Get Started on uichemy.com.
How to install Awwwards Landing Page Skill: Next.js Designer Portfolio Template
git clone https://github.com/rebyteai-template/rebyte-skills.gitClone the skills repository
Run
git clone https://github.com/rebyteai-template/rebyte-skills.git. The skill is the awwwards-landing-page folder at the top level.Add the folder to your agent
Copy awwwards-landing-page to the directory your agent loads skills from. The README says skills are automatically available in Claude Code, and other agents can read the SKILL.md and follow its steps.
Ask for the portfolio
Tell the agent to set up the awwwards landing page in an empty project folder. It clones the template, installs dependencies and builds.
Deploy when ready
Use the Vercel prebuilt sequence or the Netlify command from the skill. Set your own token for Vercel, since the commands read it from an environment variable.
Check that it loaded
Ask the agent to set up the template in an empty folder. It should run the shallow clone, install dependencies and finish with a successful npm run build.
Key features
- Designer portfolio templateThe skill description names a designer portfolio with Locomotive Scroll, GSAP and Framer Motion animations, and the repository README files it under landing and portfolio.
- Next.js foundationThe tech stack lists Next.js as the framework, with pnpm or npm as the package manager and port 3000 for local development.
- Three animation librariesLocomotive Scroll, GSAP and Framer Motion are the animation layer. If you want to extend them, motion design patterns is a natural companion.
- Shallow clone setupSetup runs a depth 1 clone of the template repository into the current directory.
- Fallback for a non-empty directoryIf the directory already has files, the skill clones into a temporary folder, moves the contents up and removes the temporary folder.
- Optional history resetAn optional step deletes the template's .git folder and runs git init, so the project starts with a clean history of its own.
- Build and dev commandsnpm install fetches dependencies, npm run build produces the production build and npm run dev serves at localhost port 3000.
- Vercel prebuilt deployA critical note says to run vercel pull, vercel build --prod and then vercel deploy --prebuilt --prod, and never to use vercel --prod directly.
- Netlify deployFor Netlify, the skill gives a single command, netlify deploy --prod.
Frequently asked questions
What is the awwwards-landing-page skill?
It is a SKILL.md in the rebyte-skills repository that sets up a designer portfolio landing page. It clones a Next.js template with Locomotive Scroll, GSAP and Framer Motion, then gives build, development and deployment commands for Vercel and Netlify.
How do I install the awwwards-landing-page skill?
Clone the rebyte-skills repository and copy the awwwards-landing-page folder into the place your agent loads skills from. Then ask the agent to set up the awwwards landing page in an empty directory, and it follows the clone, install and build steps.
Does the skill design the page for me?
No. It scaffolds an existing template and gives deployment steps. The layout and animations come from the template repository, so any original look needs your own edits. When you adjust the motion, review-animations is a handy second skill.
Which AI coding agents can use the awwwards-landing-page skill?
The README says skills are automatically available in Claude Code. For other agents such as Cursor, Windsurf and Cline, it says to open the skill file and follow its steps by hand. Any agent that can run shell commands should manage the same sequence.
How do I deploy the finished site?
For Vercel, the skill requires vercel pull, then vercel build --prod, then vercel deploy --prebuilt --prod, and warns against using vercel --prod directly. For Netlify it gives netlify deploy --prod. Both commands run after npm run build succeeds.
Does it need environment variables?
No. The skill notes that this is a static Next.js site with no environment variables. You still need a Vercel token if you deploy with the Vercel commands, since they pass it as a flag.
Why does the skill say never to run npm run dev in a VM?
The note appears in the skill's Notes section and gives no reason, so follow it as written when your agent runs in a VM. Outside that setting, the skill says npm run dev serves the site at localhost port 3000 for local development.
What license does the awwwards-landing-page skill use?
GitHub shows no license for the rebyte-skills repository, and the README does not state one. Treat the terms as unspecified and check the repository, and the separate template repository the skill clones, before using the code commercially.