How do I install the Lean Video Hero skill?

Run npx skillmds@latest add brcapitalusa/lean-video-hero in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Lean Video Hero safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Lean Video Hero?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Lean Video Hero free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Lean Video Hero?

BRCapitalUSA (@brcapitalusa) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Lean Video Hero by brcapitalusa — Agent Skill

Name: Lean Video Hero
Rating: 4.2 (5 reviews)
Author: BRCapitalUSA

Lean Video Hero

Build a clean, minimal single-section landing hero with a fullscreen looping background video and lightweight UI — a slim navbar with a mobile menu, staggered fade-up hero text, and one or two CTAs. No glass, no ornament, no heavy effects. Use this skill whenever the user wants a "lean", "clean", "simple", "minimal", or "no-frills" video hero, a straightforward SaaS or studio landing header, or says something like "just a nice hero with a video behind it" — even if they don't say the word "lean". Prefer this over the more decorated video-hero skills when the brief emphasizes simplicity and fast load.

BRCapitalUSA Updated Sep 22, 2026

File contents

Lean Video Hero

A minimal, production-clean hero: one fullscreen video, a slim navbar, and crisp staggered text. The restraint is the point — nothing competes with the video and the headline.

Before building

Read /mnt/skills/public/frontend-design/SKILL.md for this environment's styling constraints. Collect the slots below; if the user didn't give the video, ask for one (it is the whole background) and invent tasteful defaults for the rest.

Slot	Example
`BRAND`	"Foldcraft", "flowpath"
`NAV_LINKS`	Home, Projects, Studio, Reach Us
`BADGE`	"Brand & Visual Storytelling"
`HEADLINE`	"Shaping visual narratives, one pixel at a time." (allow `<br/>`)
`SUBTEXT`	one sentence
`PRIMARY_CTA` (+ optional `SECONDARY_CTA`)	"Explore Work"
`VIDEO_URL`	fullscreen loop
`FONT`	one clean sans: Geist, Inter, or Helvetica Now Text

Stack

React + Vite + TypeScript, Tailwind CSS, lucide-react (ArrowRight, Menu, X). Single App.tsx, useState for the mobile menu. No routing.

Layout

Root: relative h-screen w-full overflow-hidden bg-black font-<sans>.

Video (behind everything): <video autoPlay muted loop playsInline className="absolute inset-0 h-full w-full object-cover" src={VIDEO_URL} />. Optionally object-[70%_center] to bias the focal point. Add at most a bg-black/10 overlay — no more.
Navbar (z-30, px-6 py-5 md:px-12 lg:px-16, flex justify-between): brand left (text-lg sm:text-xl font-semibold tracking-tight text-white) with desktop links (hidden md:flex, text-sm text-white/80 hover:text-white); right = a solid white pill CTA on desktop (rounded-lg bg-white px-5 py-2 text-sm font-medium text-black hover:scale-105 transition-transform) and a hamburger below md.
Hero content (z-10, fills remaining height): a flex flex-col justify-between block. Top: BADGE then the HEADLINE (text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-medium leading-[1.1] tracking-tight text-white, max-w-3xl). Bottom: SUBTEXT (text-white/60 max-w-sm sm:max-w-lg) then the CTA row.

Mobile menu

Full-screen overlay absolute inset-x-0 top-0, bg-black/98 backdrop-blur-xl, toggling h-screen opacity-100 ↔ h-0 opacity-0 pointer-events-none with duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]. Links text-3xl font-medium text-white/90; every link and the CTA call setMenuOpen(false). Animate the hamburger↔X with rotate/opacity (duration-300).

Animation (CSS only — this is what keeps it lean)

@keyframes fadeSlideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }

Apply staggered on each hero element via arbitrary values, e.g. animate-[fadeSlideUp_0.8s_ease_0.2s_both] (badge 0.2s, heading 0.4s, subtext 0.7s, CTA 0.9s). Do not add framer-motion; the whole appeal is low-dependency.

Responsive

Mobile-first, breakpoints sm/md/lg. Desktop links + CTA at md:, hamburger below. Headline scales through the responsive prefixes. CTA row uses flex-wrap.

Quality checklist

Video has autoPlay muted loop playsInline + object-cover.
Chosen sans applies globally (font <link> in index.html).
No liquid-glass, no serif display, no framer-motion — kept lean.
Overlay is at most bg-black/10.
Hamburger works below md; links close the menu.
All slots filled; check 375 / 768 / 1280px.

---name: lean-video-herodescription: Build a clean, minimal single-section landing hero with a fullscreen looping background video and lightweight UI — a slim navbar with a mobile menu, staggered fade-up hero text, and one or two CTAs. No glass, no ornament, no heavy effects. Use this skill whenever the user wants a "lean", "clean", "simple", "minimal", or "no-frills" video hero, a straightforward SaaS or studio landing header, or says something like "just a nice hero with a video behind it" — even if they don't say the word "lean". Prefer this over the more decorated video-hero skills when the brief emphasizes simplicity and fast load.---# Lean Video HeroA minimal, production-clean hero: one fullscreen video, a slim navbar, andcrisp staggered text. The restraint is the point — nothing competes with thevideo and the headline.## Before buildingRead `/mnt/skills/public/frontend-design/SKILL.md` for this environment'sstyling constraints. Collect the slots below; if the user didn't give thevideo, ask for one (it is the whole background) and invent tasteful defaultsfor the rest.| Slot | Example ||------|---------|| `BRAND` | "Foldcraft", "flowpath" || `NAV_LINKS` | Home, Projects, Studio, Reach Us || `BADGE` | "Brand & Visual Storytelling" || `HEADLINE` | "Shaping visual narratives, one pixel at a time." (allow `<br/>`) || `SUBTEXT` | one sentence || `PRIMARY_CTA` (+ optional `SECONDARY_CTA`) | "Explore Work" || `VIDEO_URL` | fullscreen loop || `FONT` | one clean sans: Geist, Inter, or Helvetica Now Text |## StackReact + Vite + TypeScript, Tailwind CSS, `lucide-react` (`ArrowRight`, `Menu`,`X`). Single `App.tsx`, `useState` for the mobile menu. No routing.## LayoutRoot: `relative h-screen w-full overflow-hidden bg-black font-<sans>`.1. **Video** (behind everything): `<video autoPlay muted loop playsInline className="absolute inset-0 h-full w-full object-cover" src={VIDEO_URL} />`. Optionally `object-[70%_center]` to bias the focal point. Add at most a `bg-black/10` overlay — no more.2. **Navbar** (`z-30`, `px-6 py-5 md:px-12 lg:px-16`, flex justify-between): brand left (`text-lg sm:text-xl font-semibold tracking-tight text-white`) with desktop links (`hidden md:flex`, `text-sm text-white/80 hover:text-white`); right = a solid white pill CTA on desktop (`rounded-lg bg-white px-5 py-2 text-sm font-medium text-black hover:scale-105 transition-transform`) and a hamburger below `md`.3. **Hero content** (`z-10`, fills remaining height): a `flex flex-col justify-between` block. Top: `BADGE` then the `HEADLINE` (`text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-medium leading-[1.1] tracking-tight text-white`, `max-w-3xl`). Bottom: `SUBTEXT` (`text-white/60 max-w-sm sm:max-w-lg`) then the CTA row.## Mobile menuFull-screen overlay `absolute inset-x-0 top-0`, `bg-black/98 backdrop-blur-xl`,toggling `h-screen opacity-100` ↔ `h-0 opacity-0 pointer-events-none` with`duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`. Links `text-3xl font-mediumtext-white/90`; every link and the CTA call `setMenuOpen(false)`. Animate thehamburger↔X with rotate/opacity (`duration-300`).## Animation (CSS only — this is what keeps it lean)```css@keyframes fadeSlideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }```Apply staggered on each hero element via arbitrary values, e.g.`animate-[fadeSlideUp_0.8s_ease_0.2s_both]` (badge `0.2s`, heading `0.4s`,subtext `0.7s`, CTA `0.9s`). Do **not** add framer-motion; the whole appeal islow-dependency.## ResponsiveMobile-first, breakpoints `sm/md/lg`. Desktop links + CTA at `md:`, hamburgerbelow. Headline scales through the responsive prefixes. CTA row uses`flex-wrap`.## Quality checklist- [ ] Video has `autoPlay muted loop playsInline` + `object-cover`.- [ ] Chosen sans applies globally (font `<link>` in `index.html`).- [ ] No liquid-glass, no serif display, no framer-motion — kept lean.- [ ] Overlay is at most `bg-black/10`.- [ ] Hamburger works below `md`; links close the menu.- [ ] All slots filled; check 375 / 768 / 1280px.

Frequently asked questions

Lean Video Hero

File contents

Lean Video Hero

Before building

Stack

Layout

Mobile menu

Animation (CSS only — this is what keeps it lean)

Responsive

Quality checklist

Related skills

Frequently asked questions

How do I install the Lean Video Hero skill?

What does the Lean Video Hero skill do?

Is Lean Video Hero safe to use?

Which AI agents work with Lean Video Hero?

Is Lean Video Hero free to use?

Who published Lean Video Hero?