Awwwards Skills for Claude Code: Build an Award-Style Website

Ask Claude Code for "an award-winning website" with no extra context and you get a centered hero, a gradient and a fade-in. Sites that win on Awwwards are built from specific parts: smooth scroll, scroll-scrubbed timelines, kinetic type and strict performance rules. The skills below teach Claude those parts, and the Animation hub lists the rest of the catalog's motion tooling.

Key takeaways

• awwwards-animations is the most-installed Awwwards-focused skill, with 2,952 installs (skills.sh registry).
• The official GreenSock skills carry the motion layer: gsap-scrolltrigger has 75,939 installs and the gsap-skills repo has 17,599 GitHub stars.
• Two template skills scaffold a finished starting point: awwwards-landing-page (1,115 installs) and gsap-awwwards-website (679 installs) from eng0ai/eng0-template-skills.
• premium-web-design blacklists AI-tell fonts; it sits in davila7/claude-code-templates, a repo with 33,005 GitHub stars.
• gsap-performance (72,959 installs) keeps animation on transforms and opacity, which is what holds 60fps on long scroll pages.

What makes a website look Awwwards-level?

An Awwwards-level site rests on motion tied to scroll and on deliberate typography. In practice that means a smooth-scroll layer (Lenis or Locomotive Scroll), pinned sections and scrubbed timelines from GSAP ScrollTrigger, text that reveals by character or line, and micro-interactions such as magnetic buttons. awwwards-animations (2,952 installs, skills.sh registry) encodes exactly this stack for React: GSAP with useGSAP plus Lenis, a decision matrix for when to use ScrollTrigger, Motion or Anime.js, and prebuilt patterns for a magnetic cursor, parallax hero, text reveal and glitch effect.

What is the best Claude Code skill for an Awwwards-style site?

Install awwwards-animations from DevMartinese/awwwards-animations-skill first. With 2,952 installs and 15 GitHub stars (skills.sh registry, GitHub) it leads every other Awwwards-named skill, and it treats 60fps and prefers-reduced-motion as hard requirements. Its repo has 15 GitHub stars. Install it with:

npx skills add https://github.com/DevMartinese/awwwards-animations-skill --skill awwwards-animations

For page-level design rather than motion, awwwards-landing-page from rebyte-skills (1,328 installs) covers hero sections, scroll storytelling and typography systems for marketing pages. Compare more options on the best frontend design skills page.

Which skills handle scroll animation correctly?

The official GreenSock skills, because they come from the library's own maintainers. gsap-scrolltrigger (75,939 installs) covers pinning with automatic spacers, scrubbing, snapping and a scroll proxy for custom smooth-scroll libraries. gsap-core (79,161 installs) handles tweens, easing and stagger, and adds gsap.matchMedia() for responsive and reduced-motion variants. gsap-react (69,742 installs) uses the useGSAP hook so ScrollTriggers clean up on unmount. All figures come from the skills.sh registry. If you prefer Locomotive Scroll, locomotive-scroll from claudedesignskills (2,610 installs) documents its data attributes and parallax speed controls. For a deeper library comparison, read the CSS scroll animations vs GSAP guide.

Should you start from a template skill?

Start from a template when you need a credible result in an afternoon, and from a generative skill when the brand needs its own look. awwwards-landing-page from eng0-template-skills (1,115 installs) clones a Next.js portfolio template with Locomotive Scroll, GSAP and Framer Motion already wired. gsap-awwwards-website (679 installs) clones a Vite and React 19 product page styled with Tailwind CSS 4. Both are fast, but every site built from them starts with the same layout, so plan to replace the type, color and section order.

How do you avoid the generic AI look?

Give Claude explicit taste constraints. premium-web-design blacklists the fonts and predictable type hierarchy that mark a page as AI-generated, and targets Awwwards and FWA-quality portfolios (49 installs, in a repo with 33,005 GitHub stars). Pair it with scroll-animations from dylantarre/animation-principles (1,135 installs), which applies the 12 classic animation principles to scroll reveals and starts anticipation at 10 to 20% element visibility, so motion feels staged instead of a uniform fade-in. The Landing pages hub collects related layout skills.

A complete starter stack

• awwwards-animations (2,952 installs): the React motion system and pattern library.
• gsap-core (79,161) and gsap-scrolltrigger (75,939): correct timelines, pinning and scrub.
• gsap-react (69,742): cleanup-safe GSAP inside React and Next.js.
• gsap-performance (72,959): transforms, opacity and batched DOM work for 60fps.
• premium-web-design: typography and layout rules that avoid the default AI aesthetic.
• awwwards-landing-page (1,328): hero and scroll-storytelling structure for the page itself.

Common pitfalls

• Animating layout properties. Width, top and margin trigger reflow on every frame; gsap-performance keeps motion on transforms and opacity.
• Ignoring reduced motion. Heavy scroll effects can make some visitors sick; honor prefers-reduced-motion with a calmer variant.
• Leaking ScrollTriggers in React. Without useGSAP or manual cleanup, triggers stack up on every route change and pin positions drift.

For the page structure around the motion, follow the landing page guide.

Common questions