Skip to content
Get packs

Build Awwwards-Style Websites

Design and build distinctive, motion-rich marketing and portfolio sites with GSAP animation and accessibility safeguards

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
2 files

What it does

When installed, the agent follows a detailed design process for making a premium, animated website: it first sets an art direction, then builds the hero section, scroll and GSAP animations, optional 3D (Three.js) effects, and checks accessibility and performance. It is told to avoid generic layouts, fake testimonials, invented partnerships, and any claim that the site is award-winning. The instructions are written for an agent that will write and edit website code in a project.

Great for

  • Front-end developers who want a structured workflow for high-end landing pages or portfolios
  • Designers briefing an agent to produce a motion-led marketing site with accessibility checks
  • Teams that already use GSAP and want consistent quality rules for animated sites

Skip it if

  • Simple brochure or business sites where heavy animation adds cost and slows loading
  • Projects that must reuse a client's exact existing visuals or copy, since the skill insists on generating new identity and imagery
  • Anyone expecting the skill to supply real customer proof: it explicitly forbids fake testimonials and logo walls without honest evidence

Try asking

  • “Build a cinematic landing page for my new architecture studio with a scroll-driven hero animation”
  • “Create a motion-led portfolio site for my photography work with accessible, reduced-motion-safe transitions”
  • “Make a premium product launch page with a Three.js shader hero that falls back to a static image”
Step-by-step guide: how to use Build Awwwards-Style WebsitesInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    build-awwwards-quality-sites.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip build-awwwards-quality-sites.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip build-awwwards-quality-sites.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent reference sites or a brief so it can write a clear art direction before coding; it is told to extract only high-level traits.
  • Provide your own photos and logos; the skill restricts stock imagery and illustrated avatars, so real assets produce better results.
  • Ask explicitly for a desktop and mobile check, since the skill only runs browser validation when requested or needed.

What's inside

  • agents/openai.yaml
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.