<aside> 💡

A skill that turns a brand kit and website brief into a fully scroll-driven, video-backed landing page — using Higgsfield MCP to generate the background video and GSAP/Lenis to wire the scroll scrub.

</aside>

What This Skill Is For

This skill guides Claude through building scroll-driven product landing pages where the background video is AI-generated via Higgsfield and scrubs frame-by-frame with the user's scroll position. It collects brand and content requirements upfront, generates the video asset, then builds the full site around it.

Use this skill when someone asks to:

• Build a landing page or product site with a motion/video background
• Generate a scroll-driven website from a brand brief
• Create a premium single-page site with animated sections
• Use Higgsfield video generation as part of a web build

How It Works

<aside> 💡

Claude collects brand kit + website brief ↓ Claude generates background video via Higgsfield MCP ↓ Video is encoded all-keyframe for smooth scroll scrubbing ↓ Claude builds the full site: sections, scroll pins, glass UI ↓ Delivered as Vite + vanilla JS (or React) with GSAP + Lenis

</aside>

And here's the updated SKILL.md:

SKILL.md

What Happens When You Use This Skill

The first thing Claude will do is not write any code. It will open with a structured intake conversation — asking for your brand kit, your content, and your video brief. Only once those are confirmed does it move to generation.

This is intentional. A scroll-driven site built without knowing the brand color, the headline, or the video mood will always need to be rebuilt. The intake step costs two minutes and saves two hours.

The Output You Should Expect

When the skill completes a full run, you'll have:

• A Higgsfield-generated background video encoded for frame-perfect scroll scrubbing
• A complete Vite project — index.html, main.js, style.css, glass.css — ready to npm run dev