How to use the Build Awwwards-Quality Sites agent skill

What the skill makes the agent do

The skill tells an agent to follow a fixed design process when it writes or edits website code in a project. It starts with an art direction, then builds the hero, the scroll and GSAP animations, optional Three.js effects, and finally checks accessibility and performance.

The skill also sets limits. It tells the agent to avoid generic layouts, fake testimonials, invented partnerships, and any claim that the site is award-winning. The name refers to a quality bar, not an award or recognition.

• Writes a short art direction before coding: visual idea, hero focal asset, type hierarchy, colour system, section order, motion narrative, and smooth-scroll choice.
• Uses GSAP as the main animation system and one smooth-scroll engine, either Lenis or Locomotive Scroll.
• Adds Three.js or custom WebGL shaders only when they support the design.
• Requires photographs for avatars, Iconify icons for interface symbols, and no invented customer logos.
• Respects prefers-reduced-motion and keeps a static first frame that works without JavaScript.

Install the skill

You can install the skill in one of two ways. Download the ZIP file from this page and unzip it. Then either place the folder in your personal skills directory, ~/.claude/skills/, or in a project's .claude/skills/ folder so it applies only to that project.

If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.

• Personal install: unzip into ~/.claude/skills/ so the skill is available across your projects.
• Project install: unzip into the .claude/skills/ folder inside the project.
• Claude apps: go to Settings → Capabilities → Skills and upload the skill.

Check the files after installing

The package contains two files: SKILL.md, which holds the instructions the agent reads, and agents/openai.yaml. Make sure SKILL.md is inside the skill folder after unzipping, since an agent runtime reads that file to load the skill.

The skill is written for a SKILL.md-compatible agent runtime. If your tool does not read SKILL.md files, the skill will not load.

Trigger the skill with a clear request

The skill's description says it applies when you ask for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website, or when you explicitly name this visual and motion system. Use words like these in your request so the agent knows to load it.

Describe the site's purpose, audience, and tone. The skill asks for a distinct art direction, so a short brief gives the agent more to work with than a single word.

• Example: "Build a premium, motion-led landing page for a ceramics studio. Use the build-awwwards-quality-sites skill."
• Example: "Make a cinematic portfolio site for a photographer with a strong hero and GSAP scroll reveals."
• Example: "Create an interactive editorial site for a film festival. Follow the Awwwards-quality skill, with reduced-motion support."

Prepare the project before you ask

The skill is built for a web project that has a build step, because it asks the agent to run a production build and fix any failures. GSAP is required. The agent chooses Lenis or Locomotive Scroll for smooth scrolling. Three.js, Iconify, and other web-design skills are optional, and the instructions refer to them where relevant.

The skill is not meant for simple brochure sites. Heavy animation adds cost and slows loading on those.

• Requires a SKILL.md-compatible agent runtime.
• Requires a web project with a build step.
• Requires GSAP.
• Requires Lenis or Locomotive Scroll (chosen by the agent).
• Optional: Three.js, Iconify, and other web-design skills.

Safety notes: scripts and network

This skill does not run scripts and does not use the network, according to its listing. The agent still writes code and runs your project's production build as the instructions require, so review the changes it makes before you deploy.

The skill asks the agent to keep provenance for any media it uses. Check that every image, video, and icon has a licence or source you can stand behind.

• Runs scripts: no.
• Uses network: no.
• Review generated code and dependencies before deploying.
• Keep licence records for any licensed photos or media.

Tips for better results

Give the agent real assets and copy when you have them. The skill says not to reuse a client's exact visuals, so if you need your own brand used, say so and expect the agent to generate new imagery instead.

If you have no real customer proof, do not ask for testimonials or a logo wall. The skill forbids fake testimonials and logo walls without honest evidence, and it will leave them out.

• Provide reference sites for the mood you want, and say that you want high-level traits only, not copies.
• Name the smooth-scroll engine if you have a preference; otherwise the agent chooses one.
• Ask for reduced-motion and mobile checks explicitly if they matter to you.
• Expect the agent to report the web-design skill it chose, asset sources, motion stack, and validation performed.