Website build stack

The agent loads it when

Read this before starting any new website, landing page, or frontend build (plain HTML/CSS/JS, React, Next.js, or Astro). It names the preferred stack of libraries and references to check for every site build: GSAP for animation, Lenis for smooth scroll, react-bits for animated React components, Vercel's Web Interface Guidelines and design.md for visual/UX quality, Tailwind CSS v4 agent skills, and Astro for static/content sites. Use it to decide which library fits a request and to pull in that library's own agent-skill repo when deeper guidance is needed.

npx @codesudee/web-skills -s website-build-stack

Download .zip

Try it

Stack picker

What is this build?

Tick what applies. The stack lights up with what the skill reaches for, and the install lines follow.

Web Interface Guidelines + design.mdQuality bar before calling it done
conversion-ux-psychologyFor pages that sell or ask for a sign-up
react-bitsReady-made animated React components
GSAPAnimation, timelines, ScrollTrigger
LenisSmooth scroll, wired to ScrollTrigger
Tailwind v4 docsReal v4 syntax instead of guessed v3
AstroFramework for content and marketing sites

Nothing picked yet.

Lenis · lerp

What "lerp 0.1" feels like

Move your pointer across the track. Each frame, Lenis closes a fraction of the gap to where the page should be. That fraction islerp.

nativelerp 0.1

lerp

Website build stack

A standing reference for building websites. Whenever a task involves building, redesigning, or improving a website or web app, check this list and pull in the relevant library or skill instead of reinventing it.

1. Animation: GSAP (greensock/gsap-skills)

Default animation library when a request needs motion (scroll effects, reveals, transitions, timelines) and doesn’t name a library.

Core API: gsap.to(), .from(), .fromTo() with easing, duration, stagger, defaults.
Timelines for sequencing instead of chained delays or setTimeout.
ScrollTrigger for scroll-linked animation, pinning, scrubbing. Register once with gsap.registerPlugin(ScrollTrigger).
Other useful plugins: ScrollToPlugin, ScrollSmoother, Flip, Draggable, SplitText, Observer, CustomEase. All are free in the public gsap npm package.
Utils: clamp, mapRange, normalize, interpolate, wrap, snap.
React: use the useGSAP hook with a scope, or gsap.context() plus cleanup in useEffect. Vue/Svelte: scope selectors to the component and clean up on unmount.
Performance: animate transforms (x, y, scale, autoAlpha) rather than layout properties (top, left, width). Call ScrollTrigger.refresh() after layout changes.
Deeper guidance for animation-heavy work: npx skills add https://github.com/greensock/gsap-skills.

6 more sections

Smooth scroll: Lenis (darkroomengineering/lenis)
React UI components: react-bits (DavidHDev/react-bits)
Design and UX quality bar: Vercel Web Interface Guidelines + design.md
Tailwind CSS: Lombiq/Tailwind-Agent-Skills
Framework: Astro (content and marketing sites)
How to apply this

Create a free Pagenue account to read the whole skill, download it, and install it.